Merge pull request #1771 from SevanNerse/master

component dropzone related works

resources/assets/js/components/Inputs/DropzoneFileUpload.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dropzone mb-3 dz-clickable"
-       :class="[multiple ? 'dropzone-multiple': 'dropzone-single']">
+       :class="[isPreviewSingle ? 'dropzone-single': 'dropzone-multiple']">
     <div class="fallback">
       <div class="custom-file">
         <input type="file"
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="dz-preview dz-preview-single"
-         v-if="!multiple"
+         v-if="isPreviewSingle"
          :class="previewClasses"
          ref="previewSingle">
       <div class="dz-preview-cover">
@@ -57,7 +57,11 @@
         default: 'http://'
       },
       multiple: Boolean,
-      previewClasses: [String, Object, Array]
+      previewClasses: [String, Object, Array],
+      isPreviewSingle: {
+        type: Boolean,
+        default: true
+      } 
     },
     model: {
       prop: 'value',
@@ -75,8 +79,9 @@
         let Dropzone = await import('dropzone')
         Dropzone = Dropzone.default || Dropzone
         Dropzone.autoDiscover = false
-        let preview = this.multiple ? this.$refs.previewMultiple : this.$refs.previewSingle;
+        let preview = this.isPreviewSingle ? this.$refs.previewSingle : this.$refs.previewMultiple;
         let self = this
+
         let finalOptions = {
           ...this.options,
           url: this.url,
@@ -84,33 +89,41 @@
           thumbnailHeight: null,
           previewsContainer: preview,
           previewTemplate: preview.innerHTML,
-          maxFiles: (!this.multiple) ? 1 : null,
-          acceptedFiles: (!this.multiple) ? 'image/*' : null,
           init: function () {
             this.on("addedfile", function (file) {
-              if (!self.multiple && self.currentFile) {
-                // this.removeFile(this.currentFile);
+              self.files.push(file)
+
+              if (self.options.maxFiles == 1) {
+                self.$emit('change', file)
+              } else {
+                self.$emit('change', this.files)
               }
-              self.currentFile = file;
+            }),
+            this.on("maxfilesexceeded", function(file) {
+              this.removeAllFiles('notCancel')
+              this.addFile(file)
             })
           }
         }
+
         this.dropzone = new Dropzone(this.$el, finalOptions)
         preview.innerHTML = ''
         let evtList = ['drop', 'dragstart', 'dragend', 'dragenter', 'dragover', 'addedfile', 'removedfile', 'thumbnail', 'error', 'processing', 'uploadprogress', 'sending', 'success', 'complete', 'canceled', 'maxfilesreached', 'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple', 'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete']
+        
         evtList.forEach(evt => {
           this.dropzone.on(evt, (data) => {
             this.$emit(evt, data);
 
-            if (evt === 'addedfile') {
-              this.files.push(data)
-              this.$emit('change', this.files);
-            } else if (evt === 'removedfile') {
+            if (evt === 'removedfile') {
+
               let index = this.files.findIndex(f => f.upload.uuid === data.upload.uuid)
+
               if (index !== -1) {
                 this.files.splice(index, 1);
               }
+
               this.$emit('change', this.files);
+
             }
           })
         })