Allow multiple files to be selected/dropped at once

frontend/src/components/file/FileUpload.vue

@@ -42,29 +42,33 @@ const onFileUploadDragAndDrop = (event: FileUploadUploaderEvent) => {
     return;
   }
 
-  onUpload(Array.isArray(event.files) ? event.files[0] : event.files);
+  onUpload(Array.isArray(event.files) ? event.files : [event.files]);
 };
 
-const onUpload = async (file: File) => {
-  try {
-    const response = (await documentService.createDocument(file, props.activityId, getConfig.value.coms.bucketId))
-      ?.data;
-
-    if (response) {
-      submissionStore.addDocument(response);
-      toast.success('Document uploaded');
-    }
-  } catch (e: any) {
-    toast.error('Failed to upload document', e);
-  }
+const onUpload = async (files: Array<File>) => {
+  await Promise.allSettled(
+    files.map(async (file: File) => {
+      try {
+        const response = (await documentService.createDocument(file, props.activityId, getConfig.value.coms.bucketId))
+          ?.data;
+
+        if (response) {
+          submissionStore.addDocument(response);
+          toast.success('Document uploaded');
+        }
+      } catch (e: any) {
+        toast.error('Failed to upload document', e);
+      }
+    })
+  );
 };
 </script>
 
 <template>
   <div class="hover-hand hover-shadow">
     <FileUpload
       name="fileUpload"
-      :multiple="false"
+      :multiple="true"
       :custom-upload="true"
       :auto="true"
       :disabled="props.disabled"
@@ -100,7 +104,8 @@ const onUpload = async (file: File) => {
       type="file"
       style="display: none"
       accept="*"
-      @change="(event: any) => onUpload(event.target.files[0])"
+      multiple
+      @change="(event: any) => onUpload(Array.from(event.target.files))"
       @click="(event: any) => (event.target.value = null)"
     />
   </div>