File input new design (#246)

Co-authored-by: Julien Nahum <julien@nahum.net>

app/Jobs/Form/StoreFormSubmissionJob.php

@@ -8,6 +8,7 @@ use App\Http\Controllers\Forms\FormController;
 use App\Http\Requests\AnswerFormRequest;
 use App\Models\Forms\Form;
 use App\Models\Forms\FormSubmission;
+use App\Service\Forms\FormLogicPropertyResolver;
 use App\Service\Storage\StorageFileNameParser;
 use Illuminate\Bus\Queueable;
 use Illuminate\Contracts\Filesystem\Filesystem;
@@ -224,8 +225,10 @@ class StoreFormSubmissionJob implements ShouldQueue
         collect($this->form->properties)->filter(function ($property) {
             return isset($property['hidden'])
                 && isset($property['prefill'])
-                && $property['hidden']
-                && !is_null($property['prefill']);
+                && FormLogicPropertyResolver::isHidden($property, $this->submissionData)
+                && !is_null($property['prefill'])
+                && !in_array($property['type'], ['files'])
+                && !($property['type'] == 'url' && isset($property['file_upload']) && $property['file_upload']);
         })->each(function (array $property) use (&$formData) {
             if ($property['type'] === 'date' && isset($property['prefill_today']) && $property['prefill_today']) {
                 $formData[$property['id']] = now()->format((isset($property['with_time']) && $property['with_time']) ? 'Y-m-d H:i' : 'Y-m-d');

resources/js/components/forms/FileInput.vue

@@ -1,168 +1,98 @@
 <template>
   <div :class="wrapperClass">
-    <label v-if="label"
-           :class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
+    <label
+      v-if="label"
+      :class="[
+        theme.default.label,
+        {
+          'text-xs uppercase': uppercaseLabels,
+          'text-sm': !uppercaseLabels,
+        },
+      ]"
     >
       {{ label }}
-      <span v-if="required" class="text-red-500 required-dot">*</span>
+      <span v-if="required" class="required-dot text-red-500">*</span>
     </label>
     <small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1">
       <slot name="help"><span class="field-help" v-html="help" /></slot>
     </small>
-    <span class="inline-block w-full rounded-md shadow-sm">
-      <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" role="button"
-              class="cursor-pointer relative flex"
-              :class="[theme.default.input,{'!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled}]"
-              :style="inputStyle" @click.self="showUploadModal=true"
-      >
-        <div v-if="currentUrl==null" class="h-6 text-gray-600 dark:text-gray-400 flex-grow truncate"
-             @click.prevent="showUploadModal=true"
-        >
-          Upload {{ multiple ? 'file(s)' : 'a file' }} <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline"
-                                                            fill="none" viewBox="0 0 24 24"
-                                                            stroke="currentColor"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-            />
-          </svg>
-        </div>
-        <template v-else>
-          <div class="flex-grow h-6 text-gray-600 dark:text-gray-400 truncate" @click.prevent="showUploadModal=true">
-            <div>
-              <p v-if="files.length==1"><svg xmlns="http://www.w3.org/2000/svg"
-                                             class="h-6 w-6 inline mr-2 -mt-1" fill="none"
-                                             viewBox="0 0 24 24"
-                                             stroke="currentColor"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                />
-              </svg>{{ files[0].file.name }}</p>
-              <p v-else><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline mr-2 -mt-1" fill="none"
-                             viewBox="0 0 24 24"
-                             stroke="currentColor"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                />
-              </svg>{{ files.length }} file(s)</p>
-            </div>
-          </div>
-          <div v-if="files.length>0">
-            <a href="#" class="hover:text-nt-blue" role="button" @click.prevent="clearAll">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                />
-              </svg>
-            </a>
-          </div>
-        </template>
-      </button>
-    </span>
-    <small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
-      <slot name="help"><span class="field-help" v-html="help" /></slot>
-    </small>
-    <has-error v-if="hasValidation" :form="form" :field="name" />
 
-    <!--  Modal  -->
-    <modal :portal-order="2" :show="showUploadModal" @close="showUploadModal=false">
-      <h2 class="text-lg font-semibold">
-        Upload {{ multiple ? 'file(s)' : 'a file' }}
-      </h2>
-
-      <div class="max-w-3xl mx-auto lg:max-w-none">
-        <div class="sm:mt-5 sm:grid sm:grid-cols-1 sm:gap-4 sm:items-start sm:pt-5">
-          <div class="mt-2 sm:mt-0 sm:col-span-2 mb-5">
+    <div class="flex w-full items-center justify-center transition-colors duration-40"
+         :class="[{'!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]"
+         @dragover.prevent="uploadDragoverEvent=true"
+         @dragleave.prevent="uploadDragoverEvent=false"
+         @drop.prevent="onUploadDropEvent"
+         @click="openFileUpload"
+    >
       <div
-              v-cloak
-              class="w-full flex justify-center items-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md h-128"
-              @dragover.prevent="onUploadDragoverEvent($event)"
-              @drop.prevent="onUploadDropEvent($event)"
+        v-if="loading"
+        class="text-gray-600 dark:text-gray-400"
       >
-              <div v-if="loading" class="text-gray-600 dark:text-gray-400">
-                <loader class="h-6 w-6 mx-auto m-10" />
-                <p class="text-center mt-6">
+        <loader class="mx-auto h-6 w-6" />
+        <p class="mt-2 text-center text-sm text-gray-500">
           Uploading your file...
         </p>
       </div>
       <template v-else>
-                <div
-                  class="absolute rounded-full bg-gray-100 h-20 w-20 z-10 transition-opacity duration-500 ease-in-out"
-                  :class="{
-                    'opacity-100': uploadDragoverTracking,
-                    'opacity-0': !uploadDragoverTracking
-                  }"
-                />
-                <div class="relative z-20 text-center">
-                  <input ref="actual-input" class="hidden" :multiple="multiple" type="file" :name="name"
+        <div class="text-center">
+          <input
+            ref="actual-input"
+            class="hidden"
+            :multiple="multiple"
+            type="file"
+            :name="name"
             :accept="acceptExtensions"
             @change="manualFileUpload"
           >
-                  <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-24 w-24 text-gray-200" fill="none"
-                       viewBox="0 0 24 24" stroke="currentColor"
+          <div v-if="files.length" class="flex flex-wrap items-center justify-center gap-4">
+            <uploaded-file
+              v-for="file in files"
+              :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"
               >
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                <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"
                 />
               </svg>
-                  <p class="mt-5 text-sm text-gray-600">
-                    <button
-                      type="button"
-                      class="font-semibold text-nt-blue hover:text-nt-blue-dark focus:outline-none focus:underline transition duration-150 ease-in-out"
-                      @click="openFileUpload"
-                    >
-                      Upload {{ multiple ? 'file(s)' : 'a file' }},
-                    </button>
-                    use drag and drop or paste it
+            </div>
+
+            <p class="mt-2 text-sm text-gray-500 font-semibold select-none">
+              Click to choose {{ multiple ? 'file(s)' : 'a file' }} or drag here
             </p>
-                  <p class="mt-1 text-xs text-gray-500">
-                    Up to {{ mbLimit }}mb
+            <p class="mt-1 text-xs text-gray-400 dark:text-gray-600 select-none">
+              Size limit: {{ mbLimit }}MB per file
             </p>
+          </template>
         </div>
       </template>
     </div>
-            <div v-if="files.length" class="mt-4">
-              <div class="border rounded-md">
-                <div v-for="file,index in files" class="flex p-2" :class="{'border-t':index!==0}">
-                  <p class="flex-grow truncate text-gray-500">
-                    {{ file.file.name }}
-                  </p>
-                  <div>
-                    <a href="#" class="text-gray-400 dark:text-gray-600 hover:text-nt-blue flex" role="button"
-                       @click.prevent="clearFile(index)"
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                           stroke="currentColor"
-                      >
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                        />
-                      </svg>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </modal>
+
+    <small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
+      <slot name="help"><span class="field-help" v-html="help" /></slot>
+    </small>
+    <has-error v-if="hasValidation" :form="form" :field="name" />
   </div>
 </template>
 
 <script>
-import Modal from '../Modal.vue'
 import axios from 'axios'
 import inputMixin from '~/mixins/forms/input.js'
+import UploadedFile from './components/UploadedFile.vue'
 
 export default {
   name: 'FileInput',
 
-  components: { Modal },
+  components: { UploadedFile },
   mixins: [inputMixin],
   props: {
     multiple: { type: Boolean, default: true },
@@ -172,10 +102,7 @@ export default {
   },
 
   data: () => ({
-    showUploadModal: false,
-
     files: [],
-    uploadDragoverTracking: false,
     uploadDragoverEvent: false,
     loading: false
   }),
@@ -185,43 +112,44 @@ export default {
       return this.form[this.name]
     },
     acceptExtensions () {
-      if (this.accept) {
-        return this.accept.split(',').map((i) => {
-          return '.' + i.trim()
-        }).join(',')
+      if (!this.accept) {
+        return null
       }
-      return ''
+      return this.accept
+        .split(',')
+        .map((i) => {
+          return '.' + i.trim()
+        })
+        .join(',')
     }
   },
 
   watch: {
-    showUploadModal: {
-      handler (val) {
-        if(this.disabled){
-          this.showUploadModal = false
-        }
-        document.removeEventListener('paste', this.onUploadPasteEvent)
-        if(this.showUploadModal){
-          document.addEventListener("paste", this.onUploadPasteEvent)
-        }
-      }
-    },
     files: {
       deep: true,
       handler (files) {
-        this.compVal = files.map(file => file.url)
+        this.compVal = files.map((file) => file.url)
       }
     }
   },
 
   async created () {
-    if(this.compVal && this.compVal.length > 0) {
-      let tmpFiles = []
+    if (typeof this.compVal === 'string' || this.compVal instanceof String) {
+      await this.getFileFromUrl(this.compVal).then((fileObj) => {
+        this.files = [{
+          file: fileObj,
+          url: this.compVal,
+          src: this.getFileSrc(fileObj)
+        }]
+      })
+    } else if (this.compVal && this.compVal.length > 0) {
+      const tmpFiles = []
       for (let i = 0; i < this.compVal.length; i++) {
         await this.getFileFromUrl(this.compVal[i]).then((fileObj) => {
           tmpFiles.push({
             file: fileObj,
-            url: this.compVal[i]
+            url: this.compVal[i],
+            src: this.getFileSrc(fileObj)
           })
         })
       }
@@ -236,29 +164,19 @@ export default {
     clearFile (index) {
       this.files.splice(index, 1)
     },
-    onUploadDragoverEvent (e) {
-      this.uploadDragoverEvent = true
-      this.uploadDragoverTracking = true
-    },
     onUploadDropEvent (e) {
       this.uploadDragoverEvent = false
-      this.uploadDragoverTracking = false
       this.droppedFiles(e.dataTransfer.files)
     },
-    onUploadPasteEvent (e) {
-      if(!this.showUploadModal) return
-      this.uploadDragoverEvent = false
-      this.uploadDragoverTracking = false
-      this.droppedFiles(e.clipboardData.files)
-    },
     droppedFiles (droppedFiles) {
-      if (!droppedFiles) return
+      if (!droppedFiles || this.disabled) return
 
       for (let i = 0; i < droppedFiles.length; i++) {
         this.uploadFileToServer(droppedFiles.item(i))
       }
     },
     openFileUpload () {
+      if (this.disabled) return
       this.$refs['actual-input'].click()
     },
     manualFileUpload (e) {
@@ -268,8 +186,10 @@ export default {
       }
     },
     uploadFileToServer (file) {
+      if (this.disabled) return
       this.loading = true
-      this.storeFile(file).then(response => {
+      this.storeFile(file)
+        .then((response) => {
           if (!this.multiple) {
             this.files = []
           }
@@ -281,35 +201,40 @@ export default {
             }).then(moveFileResponse => {
               this.files.push({
                 file: file,
-              url: moveFileResponse.data.url
+                url: moveFileResponse.data.url,
+                src: this.getFileSrc(file)
               })
-            this.showUploadModal = false
               this.loading = false
             }).catch((error) => {
-            this.showUploadModal = false
               this.loading = false
             })
           } else {
             this.files.push({
               file: file,
-            url: file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
+              url: file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension,
+              src: this.getFileSrc(file)
             })
-          this.showUploadModal = false
             this.loading = false
           }
-      }).catch((error) => {
+        })
+        .catch((error) => {
           this.clearAll()
-        this.showUploadModal = false
           this.loading = false
         })
     },
-    async getFileFromUrl(url, defaultType='image/jpeg'){
+    async getFileFromUrl (url, defaultType = 'image/jpeg') {
       const response = await fetch(url)
       const data = await response.blob()
       const name = url.replace(/^.*(\\|\/|\:)/, '')
       return new File([data], name, {
-        type: data.type || defaultType,
+        type: data.type || defaultType
       })
+    },
+    getFileSrc (file) {
+      if (file.type && file.type.split('/')[0] === 'image') {
+        return URL.createObjectURL(file)
+      }
+      return null
     }
   }
 }

resources/js/components/forms/components/UploadedFile.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    :class="[theme.fileInput.uploadedFile, 'overflow-hidden']"
+    :title="file.file.name"
+  >
+    <div v-if="file.src && !isImageHide" class="h-20 overflow-hidden flex">
+      <img class="block object-cover object-center w-full" :src="file.src" @error="isImageHide=true">
+    </div>
+    <div v-else class="h-20 flex items-center justify-center">
+      <svg class="w-10 h-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+           stroke-width="0.8" stroke="currentColor"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round"
+              d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+        />
+      </svg>
+    </div>
+    <div class="flex gap-2 items-center border-t py-1 px-2">
+      <p class="flex-grow text-left truncate text-gray-500 text-xs">
+        {{ file.file.name }}
+      </p>
+      <a
+        href="javascript:void(0);"
+        class="flex text-gray-400 rounded hover:bg-neutral-50 hover:text-red-500 dark:text-gray-600 p-1"
+        role="button"
+        title="Remove"
+        @click.stop="$emit('remove')"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+          />
+        </svg>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UploadedFile',
+
+  props: {
+    file: { default: null },
+    theme: { type: Object }
+  },
+
+  data: () => ({
+    isImageHide: false
+  }),
+
+  computed: {}
+}
+</script>

resources/js/config/form-themes.js

@@ -31,6 +31,14 @@ export const themes = {
       button: 'cursor-pointer text-gray-700 inline-block rounded-lg border-gray-300 px-4 py-2 flex-grow dark:bg-notion-dark-light dark:text-gray-300 text-center',
       unselectedButton: 'bg-white hover:bg-gray-50 border',
       help: 'text-gray-400 dark:text-gray-500'
+    },
+    fileInput: {
+      input: 'min-h-40 border border-dashed border-gray-300 p-4 rounded-lg',
+      inputHover: {
+        light: 'bg-neutral-50',
+        dark: 'bg-notion-dark-light'
+      },
+      uploadedFile: 'border border-gray-300 dark:border-gray-600 bg-white dark:bg-notion-dark-light rounded-lg shadow-sm max-w-[10rem]'
     }
   },
   simple: {
@@ -62,6 +70,14 @@ export const themes = {
       button: 'flex-1 appearance-none border-gray-300 dark:border-gray-600 w-full py-2 px-2 bg-gray-50 text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 text-center',
       unselectedButton: 'bg-white hover:bg-gray-50 border -mx-4',
       help: 'text-gray-400 dark:text-gray-500'
+    },
+    fileInput: {
+      input: 'min-h-40 border border-dashed border-gray-300 p-4',
+      inputHover: {
+        light: 'bg-neutral-50',
+        dark: 'bg-notion-dark-light'
+      },
+      uploadedFile: 'border border-gray-300 dark:border-gray-600 bg-white dark:bg-notion-dark-light shadow-sm max-w-[10rem]'
     }
   },
   notion: {
@@ -93,6 +109,14 @@ export const themes = {
       button: 'rounded border-transparent flex-1 appearance-none shadow-inner-notion w-full py-2 px-2 bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 text-center',
       unselectedButton: 'bg-notion-input-background dark:bg-notion-dark-light hover:bg-gray-50 border',
       help: 'text-notion-input-help dark:text-gray-500'
+    },
+    fileInput: {
+      input: 'min-h-40 border border-dashed border-gray-300 p-4 rounded bg-notion-input-background',
+      inputHover: {
+        light: 'bg-neutral-50',
+        dark: 'bg-notion-dark-light'
+      },
+      uploadedFile: 'border border-gray-300 dark:border-gray-600 bg-white dark:bg-notion-dark-light rounded shadow-sm max-w-[10rem]'
     }
   }