AkauntingDropzpneFileUpload feature added.

resources/assets/js/components/AkauntingDropzoneFileUpload.vue

@@ -0,0 +1,194 @@
+<template>
+    <div class="dropzone mb-3 dz-clickable" :class="[isPreviewSingle ? 'dropzone-single': 'dropzone-multiple']">
+        <div class="fallback">
+            <div class="custom-file">
+                <input type="file" class="custom-file-input" :id="'projectCoverUploads' + _uid" :multiple="multiple">
+
+                <label class="custom-file-label" :for="'projectCoverUploads' + _uid">{{ textChooseFile }}</label>
+          </div>
+        </div>
+
+        <div v-if="isPreviewSingle" class="dz-preview dz-preview-single" :class="previewClasses" ref="previewSingle">
+            <div class="dz-preview-cover">
+                <img class="dz-preview-img" data-dz-thumbnail>
+            </div>
+        </div>
+
+        <ul v-else class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush" :class="previewClasses" ref="previewMultiple">
+            <li class="list-group-item px-0">
+                <div class="row align-items-center">
+                    <div class="col-auto">
+                        <div class="avatar">
+                            <img class="avatar-img rounded" data-dz-thumbnail>
+                        </div>
+                    </div>
+
+                    <div class="col ml--3">
+                        <h4 class="mb-1" data-dz-name>...</h4>
+                        <p class="small text-muted mb-0" data-dz-size>...</p>
+                    </div>
+
+                    <div class="col-auto">
+                        <button data-dz-remove="true" class="btn btn-danger btn-sm">
+                          <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import Dropzone from 'dropzone';
+
+Dropzone.autoDiscover = false;
+
+export default {
+    name: 'akaunting-dropzone-file-upload',
+
+    props: {
+        textChooseFile: {
+            type: String,
+            default: 'Choose File',
+            description: 'Choose file text'
+        },
+        options: {
+            type: Object,
+            default: () => ({})
+        },
+        value: [String, Object, Array],
+        url: {
+            type: String,
+            default: 'http:'
+        },
+        multiple: {
+            type: Boolean,
+            default: false,
+            description: 'Multiple file Upload'
+        },
+        previewClasses: [String, Object, Array],
+        isPreviewSingle: {
+            type: Boolean,
+            default: true
+        },
+    },
+
+    model: {
+        prop: 'value',
+        event: 'change'
+    },
+
+    data() {
+        return {
+            currentFile: null,
+            files: [],
+            showList: false,
+        }
+    },
+
+    methods: {
+        async initDropzone() {
+            let self = this;
+            let preview = this.isPreviewSingle ? this.$refs.previewSingle : this.$refs.previewMultiple;
+
+            let finalOptions = {
+              ...this.options,
+              url: this.url,
+              thumbnailWidth: null,
+              thumbnailHeight: null,
+              previewsContainer: preview,
+              previewTemplate: preview.innerHTML,
+              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);
+                    }
+                }),
+                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, (file) => {
+                    this.$emit(evt, file);
+                    /*
+                    if (evt === 'addedfile') {
+                        if (self.multiple) {
+                            this.files.push(file);
+
+                            this.$emit('change', this.files);
+                        } else {
+                            this.file = file;
+                            this.$emit('change', file);
+                        }
+                    }
+                    */
+                    
+                    if (evt === 'removedfile') {
+                        //if (self.multiple) {
+                            let index = this.files.findIndex(f => f.upload.uuid === file.upload.uuid);
+
+                            if (index !== -1) {
+                                this.files.splice(index, 1);
+                            }
+
+                            this.$emit('change', this.files);
+                        //} else {
+                        //    this.file = '';
+
+                        //    this.$emit('change', '');
+                        //}
+                    }
+                })
+            }, this);
+        }
+    },
+
+    async mounted() {
+        this.initDropzone();
+    },
+}
+</script>
+
+<style>
+</style>

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],
+      previewClasses: [String, Object, Array]
-      isPreviewSingle: {
-        type: Boolean,
-        default: true
-      } 
     },
     model: {
       prop: 'value',
@@ -76,12 +76,8 @@
     },
     methods: {
       async initDropzone() {
-        let Dropzone = await import('dropzone')
+        let preview = this.multiple ? this.$refs.previewMultiple : this.$refs.previewSingle;
-        Dropzone = Dropzone.default || Dropzone
-        Dropzone.autoDiscover = false
-        let preview = this.isPreviewSingle ? this.$refs.previewSingle : this.$refs.previewMultiple;
         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.multiple && self.currentFile) {
-
+                // this.removeFile(this.currentFile);
-              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 === '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);
-
             }
           })
         })

resources/views/partials/form/file_group.blade.php

@@ -8,7 +8,7 @@
         @endif
 
         <div class="input-group input-group-merge">
-            <dropzone-file-upload
+            <akaunting-dropzone-file-upload
                 @if (!empty($attributes['dropzone-class']))
                 class="{{ $attributes['dropzone-class'] }}"
                 @endif
@@ -22,7 +22,7 @@
                 :is-preview-single="{{ $attributes['isPreviewSingle'] }}"
                 @endif
                 v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : (!empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.'. $name : 'form.' . $name) }}"
-            ></dropzone-file-upload>
+            ></akaunting-dropzone-file-upload>
         </div>
 
         <div class="invalid-feedback d-block"