From 9bacbaa1c63081101d4a2c9cd7d41b09a107a3d3 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Wed, 3 Apr 2024 12:23:22 +0200
Subject: [PATCH] Upload folder, switch from FileList to File[], fix #97

---
 CHANGELOG.md                             | 1 +
 package.json                             | 1 +
 src/api/api.ts                           | 4 ++--
 src/api/backend.composable.ts            | 2 +-
 src/components/FileDropArea.vue          | 9 ++++++---
 src/components/FileUpload.vue            | 8 +++++---
 src/corpus/createCorpus.composable.ts    | 4 ++--
 src/corpus/sources/SourceUpload.vue      | 7 ++-----
 src/corpus/sources/sources.composable.ts | 2 +-
 src/library/LibraryView.vue              | 2 +-
 src/metadata/MetadataOverview.vue        | 4 ++--
 yarn.lock                                | 5 +++++
 12 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b4e29e..60144cf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ As this project is a user-facing application, the places in the semantic version
 - A quick, brief resource listing view for admin [#146](https://github.com/spraakbanken/mink-frontend/issues/146)
 - Group export files by folder [#95](https://github.com/spraakbanken/mink-frontend/issues/95)
 - JWT request now has a 2s timeout and two retries [#124](https://github.com/spraakbanken/mink-frontend/issues/124)
+- Upload an entire folder of source files [#97](https://github.com/spraakbanken/mink-frontend/issues/97)
 
 ### Changed
 
diff --git a/package.json b/package.json
index 184cf90..9605c5a 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@vueuse/core": "^10.7.2",
     "autoprefixer": "^10.4.7",
     "axios": "^1",
+    "datatransfer-files-promise": "^2.0.0",
     "eslint": "^8.15.0",
     "filesize": "^10.0.6",
     "js-yaml": "^4.1.0",
diff --git a/src/api/api.ts b/src/api/api.ts
index 40c90d8..f887513 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -115,11 +115,11 @@ class MinkApi {
   /** @see https://ws.spraakbanken.gu.se/ws/mink/api-doc#tag/Manage-Sources/operation/uploadsources */
   async uploadSources(
     corpusId: string,
-    files: FileList,
+    files: File[],
     onProgress?: ProgressHandler,
   ) {
     const formData = new FormData();
-    [...files].forEach((file) => formData.append("files[]", file));
+    files.forEach((file) => formData.append("files[]", file));
     const response = await this.axios.put<MinkResponse>(
       "upload-sources",
       formData,
diff --git a/src/api/backend.composable.ts b/src/api/backend.composable.ts
index 2c60b11..efe4ced 100644
--- a/src/api/backend.composable.ts
+++ b/src/api/backend.composable.ts
@@ -39,7 +39,7 @@ export default function useMinkBackend() {
 
   const uploadSources = (
     corpusId: string,
-    files: FileList,
+    files: File[],
     onProgress?: ProgressHandler,
   ) =>
     spin(
diff --git a/src/components/FileDropArea.vue b/src/components/FileDropArea.vue
index 773dbbc..bccaf06 100644
--- a/src/components/FileDropArea.vue
+++ b/src/components/FileDropArea.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
+import { getFilesFromDataTransferItems } from "datatransfer-files-promise";
 import useMessenger from "@/message/messenger.composable";
 import useDropToPage from "@/components/droptopage.composable";
 
 const emit = defineEmits<{
-  (e: "drop", files: FileList): void;
+  (e: "drop", files: File[]): void;
 }>();
 
 const { alert } = useMessenger();
 const { t } = useI18n();
 
-function drop(event: DragEvent) {
+async function drop(event: DragEvent) {
   // On Chrome+Ubuntu, the file list may be empty for security reasons.
   // See https://askubuntu.com/a/1411727
   if (!event.dataTransfer?.files[0]) {
@@ -18,7 +19,9 @@ function drop(event: DragEvent) {
     return;
   }
 
-  emit("drop", event.dataTransfer.files);
+  const files = await getFilesFromDataTransferItems(event.dataTransfer.items);
+
+  emit("drop", files);
 }
 
 const { isDragover } = useDropToPage(drop);
diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue
index 2353027..1a2f2fe 100644
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   /**
    * A function that presumably uploads given file(s) to the appropriate API.
    */
-  fileHandler: (files: FileList, onProgress: ProgressHandler) => Promise<void>;
+  fileHandler: (files: File[], onProgress: ProgressHandler) => Promise<void>;
   primary?: boolean;
   accept?: string;
   multiple?: boolean;
@@ -27,13 +27,15 @@ async function handleFileInput(event: Event) {
     throw new RangeError("No file found in the file input");
   }
 
-  await handleUpload(fileInput.files!);
+  // Convert from FileList to File[]
+  const files = [...fileInput.files!];
+  await handleUpload(files);
   // Empty the input value to enable selecting the same file again.
   fileInput.value = "";
 }
 
 /** Call upload function. */
-async function handleUpload(files: FileList) {
+async function handleUpload(files: File[]) {
   clear();
   try {
     await props.fileHandler(files, onProgress);
diff --git a/src/corpus/createCorpus.composable.ts b/src/corpus/createCorpus.composable.ts
index 30dff5e..6f1e85c 100644
--- a/src/corpus/createCorpus.composable.ts
+++ b/src/corpus/createCorpus.composable.ts
@@ -29,7 +29,7 @@ export default function useCreateCorpus() {
     return corpusId;
   }
 
-  async function createFromUpload(files: FileList) {
+  async function createFromUpload(files: File[]) {
     const corpusId = await createCorpus().catch(alertError);
     if (!corpusId) return;
 
@@ -70,7 +70,7 @@ export default function useCreateCorpus() {
 
   // Like the `uploadSources` in `sources.composable.ts` but takes `corpusId` as argument.
   async function uploadSources(
-    files: FileList,
+    files: File[],
     corpusId: string,
     onProgress?: ProgressHandler,
   ) {
diff --git a/src/corpus/sources/SourceUpload.vue b/src/corpus/sources/SourceUpload.vue
index 1d29be6..63d63d6 100644
--- a/src/corpus/sources/SourceUpload.vue
+++ b/src/corpus/sources/SourceUpload.vue
@@ -11,7 +11,7 @@ import FileUpload from "@/components/FileUpload.vue";
 import type { ProgressHandler } from "@/api/api.types";
 
 const props = defineProps<{
-  fileHandler?: (files: FileList) => Promise<void>;
+  fileHandler?: (files: File[]) => Promise<void>;
   primary?: boolean;
 }>();
 
@@ -24,10 +24,7 @@ const extensionsAccept = computed(() =>
   extensions.value?.map((ext) => `.${ext}`).join(),
 );
 
-async function defaultFileHandler(
-  files: FileList,
-  onProgress: ProgressHandler,
-) {
+async function defaultFileHandler(files: File[], onProgress: ProgressHandler) {
   const requests = [uploadSources(files, onProgress).catch(alertError)];
 
   // Also update format setting in config if needed
diff --git a/src/corpus/sources/sources.composable.ts b/src/corpus/sources/sources.composable.ts
index c78dd50..5207877 100644
--- a/src/corpus/sources/sources.composable.ts
+++ b/src/corpus/sources/sources.composable.ts
@@ -29,7 +29,7 @@ export default function useSources(corpusId: string) {
     return mink.downloadPlaintext(corpusId, source.name).catch(alertError);
   }
 
-  async function uploadSources(files: FileList, onProgress?: ProgressHandler) {
+  async function uploadSources(files: File[], onProgress?: ProgressHandler) {
     await mink.uploadSources(corpusId, files, onProgress);
     loadSources();
   }
diff --git a/src/library/LibraryView.vue b/src/library/LibraryView.vue
index 69ccf22..f560195 100644
--- a/src/library/LibraryView.vue
+++ b/src/library/LibraryView.vue
@@ -33,7 +33,7 @@ requireAuthentication(() => {
   }
 });
 
-async function createCorpusFromFiles(files: FileList) {
+async function createCorpusFromFiles(files: File[]) {
   await spin(createFromUpload(files), "create");
 }
 </script>
diff --git a/src/metadata/MetadataOverview.vue b/src/metadata/MetadataOverview.vue
index b7b0247..dc3d74b 100644
--- a/src/metadata/MetadataOverview.vue
+++ b/src/metadata/MetadataOverview.vue
@@ -15,8 +15,8 @@ const { uploadYaml } = useMetadata(resourceId);
 
 const metadata = computed(() => resourceStore.metadatas[resourceId]);
 
-async function uploadMetadata(files: FileList) {
-  const yaml = await files.item(0)!.text();
+async function uploadMetadata(files: File[]) {
+  const yaml = await files[0]!.text();
   await uploadYaml(yaml);
 }
 </script>
diff --git a/yarn.lock b/yarn.lock
index da273ec..908e2e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1494,6 +1494,11 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+datatransfer-files-promise@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/datatransfer-files-promise/-/datatransfer-files-promise-2.0.0.tgz#510e4cd22ec15a2d68942b37e070e18abc948bee"
+  integrity sha512-an4ngC5aqKsm13BsJxMctJWD6v8FCzU7WOoOljunNdpxAGFYBBicjmsvTCVn/IYgHTE/FdXEhzJlLJBVVsuByA==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"