@christianriedl/media 1.0.14 → 1.0.15

package/package.json

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

package/src/components/FileUpload.vue

@@ -5,34 +5,36 @@
 
     const getMediaService = inject<() => MediaService>('get-media')!;
     const mediaService = getMediaService();
-    const fileInput = ref<HTMLInputElement | null>(null);
-    const loadResult = ref("");
+    const feedBack = ref("");
+    const name = ref("");
     
     async function onFileInput(event: any) {
-        const files = event.target.files
-        const formData = new FormData()
-        formData.append('upload', files[0]);
-        loadResult.value = "Start upload";
-        const rc = await mediaService.upload(formData);
-        loadResult.value = rc ? "Upload successful" : "Upload failed";
-    }
-    /*
-    function onUpload(ev : InputEvent) {
-        const file = fileInput.value!.files![0];
-        const reader = new FileReader();
-        loadResult.value = "start upload ...";
-        reader.onload = async (e) => {
-            var text = reader.result;
-            var res = await stocks.upload(text as string);
-            loadResult.value = res;
+        const files = event.target.files as string[];
+        feedBack.value = "Start Upload";
+        let count = 0;
+        for (let i = 0; i < files.length; i++) {
+            const formData = new FormData()
+            formData.append(name.value, files[i]);
+            const rc = await mediaService.upload(formData);
+            if (rc)
+                count++;
+            feedBack.value = `${files[i]} : ${rc ? "OK" : "FAILED" }`; 
         }
-        reader.readAsText(file);
+        feedBack.value = `${count} von ${files.length} erfolgreich hochgeladen ! (Close : Upload Icon)`;
     }
-    */
 </script>
 
 <template>
-    <input ref="fileInput" type="file" style="width:25%" @change="onFileInput">
+    <v-row>
+        <v-col cols="2">
+            <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-col>
+        <v-col cols="6">{{feedBack}}
+        </v-col>
+    </v-row>
     <!--
     <v-col cols="2">
         <v-btn @click="onUpload">

package/src/views/PhotosPage.vue

@@ -18,6 +18,7 @@
     const selected = reactive<IPhotoSelection>(mediaService.photoSelection);
     const listHeight = ref(0);
     const listhead = ref<any>(null);
+    const uploadVisible = ref(true);
 
     const roots: string[] = ['Jahr', 'Orte', 'Ereignisse', 'Personen'];
     const criterias: string[] = ['ye', 'lo', 'ev', 'pe'];
@@ -161,15 +162,19 @@
                 <v-icon large>{{$vuetify.icons.values.back}}</v-icon>Back
             </v-btn>
             <v-rating clearable length="2" v-model="selected.rating" @update:modelValue="onRating" />
-            <v-select v-model="selected.root" 
-                        :items="roots"
-                        persistent-hint
-                        @update:modelValue="onRootChange"
-                        dense solo hide-details single-line>
+            <v-select v-model="selected.root"
+                      :items="roots"
+                      persistent-hint
+                      @update:modelValue="onRootChange"
+                      dense solo hide-details single-line>
             </v-select>
-            <file-upload></file-upload>
+            <v-btn v-if="!isMobile" @click="uploadVisible.value = !uploadVisible.value">
+                UPLOAD
+                <v-icon>{{$vuetify.icons.values.upload}}</v-icon>
+            </v-btn>
         </v-card-actions>
     </v-card>
+    <file-upload v-if="uploadVisible"></file-upload>
     <v-card :max-height="listHeight" class="overflow-y-auto">
         <v-list v-if="!grouped" class="bg-media" >
             <v-list-item-group v-model="itemIndex" color="primary">