@christianriedl/media 1.0.90 → 1.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.90",
+  "version": "1.0.91",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",

package/src/components/FileUpload.vue

@@ -3,31 +3,34 @@
     import { IRest, IRestResult, IValueResult, Rest } from '@christianriedl/rest';
     import { MediaService, getMediaSymbol } from '@christianriedl/media';
 
+    const props = defineProps<{ accept: string }>();
+
     const getMediaService = inject(getMediaSymbol)!;
     const mediaService = getMediaService();
     const feedBack = ref("");
     const name = ref("");
+    const files = ref<File[]>([]);
     
-    async function onFileInput(event: any) {
-        const files = event.target.files as File[];
+    async function onUpload() {
         feedBack.value = "Start Upload";
         let count = 0;
         let rc = false;
-        for (let i = 0; i < files.length; i++) {
-            if (files[i].size > 20000000) {
+        for (let i = 0; i < files.value.length; i++) {
+            var file = files.value[i];
+            if (file.size > 20000000) {
                 // Big file
-                rc = await mediaService.uploadBigFile(files[i], name.value, (progress) => feedBack.value = progress);
+                rc = await mediaService.uploadBigFile(file, name.value, (progress) => feedBack.value = progress);
             }
             else {
                 const formData = new FormData()
-                formData.append(name.value, files[i]);
+                formData.append(name.value, file);
                 rc = await mediaService.upload(formData);
             }
             if (rc)
                 count++;
-            feedBack.value = `${files[i].name} : ${rc ? " - OK" : "- FAILED"}`; 
+            feedBack.value = `${file.name} : ${rc ? " - OK" : "- FAILED"}`; 
         }
-        feedBack.value = `${count} von ${files.length} erfolgreich hochgeladen ! (Close : Upload Icon)`;
+        feedBack.value = `${count} von ${files.value.length} erfolgreich hochgeladen ! (Close : Upload Icon)`;
     }
 </script>
 
@@ -37,7 +40,9 @@
             <v-text-field name="directory" label="Name (Directory)" type="text" v-model="name" density="compact" hide-details></v-text-field>
         </v-col>
         <v-col cols="4">
-            <input type="file" multiple @change="onFileInput">
+            <v-file-input show-size clearable multiple v-model="files" :accept="props.accept" label="Select File"
+                          prepend-icon="" append-icon="$upload" @click:append="onUpload">
+            </v-file-input>
         </v-col>
         <v-col cols="6">{{feedBack}}
         </v-col>

package/src/views/MusicPage.vue

@@ -361,7 +361,7 @@
         </v-card-actions>
         <v-progress-linear v-if="playingTrack" v-model="positionLength" color="blue" height="25"><strong>{{positionText}}</strong></v-progress-linear>
     </v-card>
-    <file-upload v-if="uploadVisible"></file-upload>
+    <file-upload v-if="uploadVisible" accept="audio/mpeg, audio/flac"></file-upload>
     <v-card :height="listHeight" class="overflow-y-auto bg-media">
         <v-list lines="two" class="bg-media">
             <v-list-item-group v-model="itemIndex">

package/src/views/PhotosPage.vue

@@ -208,7 +208,7 @@
             </v-btn>
         </v-card-actions>
     </v-card>
-    <file-upload v-if="uploadVisible"></file-upload>
+    <file-upload v-if="uploadVisible" accept="image/jpeg"></file-upload>
     <v-card :max-height="listHeight" class="overflow-y-auto bg-media" ref="scrollElement" v-scroll.self="onScroll">
         <v-list v-if="!grouped">
             <v-list-item v-for="item in items" :key="item.DLNAID" :title="item.info" density="compact" @click.stop="showFolder(item)">

package/src/views/VideosPage.vue

@@ -248,7 +248,7 @@
             </v-btn>
         </v-card-actions>
     </v-card>
-    <file-upload v-if="uploadVisible"></file-upload>
+    <file-upload v-if="uploadVisible" accept="video/mp4"></file-upload>
     <v-card :max-height="listHeight" class="overflow-y-auto bg-media">
         <v-list lines="two" class="bg-media">
             <v-list-item-group v-model="itemIndex">