Bug when editing submissions - file input (#357)

client/components/forms/FileInput.vue

@@ -1,24 +1,16 @@
 <template>
-  <input-wrapper
+  <input-wrapper v-bind="inputWrapperProps">
-    v-bind="inputWrapperProps"
-  >
     <template #label>
       <slot name="label" />
     </template>
 
-    <div class="flex w-full items-center justify-center transition-colors duration-40"
+    <div class="flex w-full items-center justify-center transition-colors duration-40" :class="[{
-         :class="[{'!cursor-not-allowed':disabled, 'cursor-pointer':!disabled,
+    '!cursor-not-allowed': disabled, 'cursor-pointer': !disabled,
     [theme.fileInput.inputHover.light + ' dark:' + theme.fileInput.inputHover.dark]: uploadDragoverEvent,
-                   ['hover:'+theme.fileInput.inputHover.light +' dark:hover:'+theme.fileInput.inputHover.dark]: !loading}, theme.fileInput.input]"
+    ['hover:' + theme.fileInput.inputHover.light + ' dark:hover:' + theme.fileInput.inputHover.dark]: !loading
-         @dragover.prevent="uploadDragoverEvent=true"
+  }, theme.fileInput.input]" @dragover.prevent="uploadDragoverEvent = true"
-         @dragleave.prevent="uploadDragoverEvent=false"
+      @dragleave.prevent="uploadDragoverEvent = false" @drop.prevent="onUploadDropEvent" @click="openFileUpload">
-         @drop.prevent="onUploadDropEvent"
+      <div v-if="loading" class="text-gray-600 dark:text-gray-400">
-         @click="openFileUpload"
-    >
-      <div
-        v-if="loading"
-        class="text-gray-600 dark:text-gray-400"
-      >
         <Loader class="mx-auto h-6 w-6" />
         <p class="mt-2 text-center text-sm text-gray-500">
           Uploading your file...
@@ -26,32 +18,18 @@
       </div>
       <template v-else>
         <div class="text-center">
-          <input
+          <input ref="actual-input" class="hidden" :multiple="multiple" type="file" :name="name"
-            ref="actual-input"
+            :accept="acceptExtensions" @change="manualFileUpload">
-            class="hidden"
-            :multiple="multiple"
-            type="file"
-            :name="name"
-            :accept="acceptExtensions"
-            @change="manualFileUpload"
-          >
           <div v-if="files.length" class="flex flex-wrap items-center justify-center gap-4">
-            <uploaded-file
+            <uploaded-file v-for="file in files" :key="file.url" :file="file" :theme="theme"
-              v-for="file in files"
+              @remove="clearFile(file)" />
-              :key="file.url"
-              :file="file"
-              :theme="theme"
-              @remove="clearFile(file)"
-            />
           </div>
           <template v-else>
             <div class="text-gray-500 w-full flex justify-center">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                   stroke="currentColor" class="w-6 h-6"
+                stroke="currentColor" class="w-6 h-6">
-              >
                 <path stroke-linecap="round" stroke-linejoin="round"
-                      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                  d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
-                />
               </svg>
             </div>
 
@@ -225,6 +203,9 @@ export default {
         })
     },
     async getFileFromUrl(url, defaultType = 'image/jpeg') {
+      if (typeof url === 'object') {
+        url = url?.file_url
+      }
       const response = await fetch(url)
       const data = await response.blob()
       const name = url.replace(/^.*(\\|\/|\:)/, '')