Merge pull request #132 from Geode-solutions/drag&drop

Drag&drop

Author: JulienChampagnol

components/FileSelector.vue

@@ -2,7 +2,7 @@
   <FetchingData v-if="loading" />
   <FileUploader
     v-else
-    v-bind="{ multiple, accept }"
+    v-bind="{ multiple, accept, files }"
     @files_uploaded="files_uploaded_event"
   />
 </template>
@@ -20,6 +20,7 @@
   const props = defineProps({
     multiple: { type: Boolean, required: true },
     supported_feature: { type: String, required: false, default: null },
+    files: { type: Array, required: false, default: [] },
   })
 
   const { multiple, supported_feature } = props
@@ -51,6 +52,5 @@
     )
     toggle_loading()
   }
-
   await get_allowed_files()
 </script>

components/FileUploader.vue

@@ -39,7 +39,9 @@
   const props = defineProps({
     multiple: { type: Boolean, required: true },
     accept: { type: String, required: true },
+    files: { type: Array, required: false, default: [] },
   })
+
   const { multiple, accept } = toRefs(props)
 
   const label = multiple ? "Please select file(s)" : "Please select a file"
@@ -77,6 +79,11 @@
     toggle_loading()
   }
 
+  if (props.files.length) {
+    files.value = props.files
+    upload_files()
+  }
+
   function clear() {
     files.value = []
     emit("files_uploaded", files.value)

test/components/FileSelector.nuxt.test.js

@@ -57,4 +57,34 @@ describe("FileSelector.vue", async () => {
       files,
     })
   })
+
+  test(`Files prop`, async () => {
+    registerEndpoint(allowed_files_schema.$id, {
+      method: allowed_files_schema.methods[0],
+      handler: () => ({
+        extensions: ["1", "2", "3"],
+      }),
+    })
+
+    const files = [new File(["fake_file"], "fake_file.txt")]
+
+    const wrapper = await mountSuspended(FileSelector, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: { multiple: false, supported_feature: "test", files: files },
+    })
+    registerEndpoint(upload_file_schema.$id, {
+      method: upload_file_schema.methods[1],
+      handler: () => ({}),
+    })
+
+    await flushPromises()
+
+    expect(wrapper.emitted()).toHaveProperty("update_values")
+    expect(wrapper.emitted().update_values).toHaveLength(1)
+    expect(wrapper.emitted().update_values[0][0]).toEqual({
+      files,
+    })
+  })
 })