AkauntingDropzpneFileUpload feature added.

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

@@ -1,6 +1,6 @@
 <template>
   <div class="dropzone mb-3 dz-clickable"
-       :class="[isPreviewSingle ? 'dropzone-single': 'dropzone-multiple']">
+       :class="[multiple ? 'dropzone-multiple': 'dropzone-single']">
     <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="isPreviewSingle"
+         v-if="!multiple"
          :class="previewClasses"
          ref="previewSingle">
       <div class="dz-preview-cover">
@@ -44,6 +44,10 @@
   </div>
 </template>
 <script>
+  import Dropzone from 'dropzone';
+
+  Dropzone.autoDiscover = false;
+
   export default {
     name: 'dropzone-file-upload',
     props: {
@@ -57,11 +61,7 @@
         default: 'http://'
       },
       multiple: Boolean,
-      previewClasses: [String, Object, Array],
-      isPreviewSingle: {
-        type: Boolean,
-        default: true
-      } 
+      previewClasses: [String, Object, Array]
     },
     model: {
       prop: 'value',
@@ -76,12 +76,8 @@
     },
     methods: {
       async initDropzone() {
-        let Dropzone = await import('dropzone')
-        Dropzone = Dropzone.default || Dropzone
-        Dropzone.autoDiscover = false
-        let preview = this.isPreviewSingle ? this.$refs.previewSingle : this.$refs.previewMultiple;
+        let preview = this.multiple ? this.$refs.previewMultiple : this.$refs.previewSingle;
         let self = this
-
         let finalOptions = {
           ...this.options,
           url: this.url,
@@ -89,41 +85,33 @@
           thumbnailHeight: null,
           previewsContainer: preview,
           previewTemplate: preview.innerHTML,
+          maxFiles: (!this.multiple) ? 1 : null,
+          acceptedFiles: (!this.multiple) ? 'image/*' : null,
           init: function () {
             this.on("addedfile", function (file) {
-              self.files.push(file)
-
-              if (self.options.maxFiles == 1) {
-                self.$emit('change', file)
-              } else {
-                self.$emit('change', this.files)
+              if (!self.multiple && self.currentFile) {
+                // this.removeFile(this.currentFile);
               }
-            }),
-            this.on("maxfilesexceeded", function(file) {
-              this.removeAllFiles('notCancel')
-              this.addFile(file)
+              self.currentFile = 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 === 'removedfile') {
-
+            if (evt === 'addedfile') {
+              this.files.push(data)
+              this.$emit('change', this.files);
+            } else 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);
-
             }
           })
         })