Merge pull request #115 from vrajroham/vue2

No more tragedy of dropzoneOptions and props

Author: vrajroham

README.md

@@ -2,9 +2,6 @@
 
 A Vue component for file uploads, powered by [Dropzone.js](http://www.dropzonejs.com/). [Check out the demo](https://rowanwins.github.io/vue-dropzone/dist/index.html).
 
-## Up for adoption
-This component is looking for a new owner, see [here for further details](https://github.com/rowanwins/vue-dropzone/issues/105) if you're interested in helping out.
-
 ## Install
 ````
 // For Vue.js 2.0+
@@ -55,6 +52,8 @@ You'll also need to load either the [Material Icon](https://material.io/icons/)
 ## Props
 Many of these props are inherited from [dropzone configuration so see their doco](http://www.dropzonejs.com/#configuration-options) for further details.
 
+> <b>Important</b> :<br> - If you are using following options as `props` (attributes) to component then use `dash-seperated` names of `props`. <br>E.g. `paramName` becomes `:param-name=""`, `showRemoveLink` becomes `:show-remove-link=""`. <br><br> - If you are passing props using `dropzoneOptions` object then, use prop names <b>same</b> as given in below table. <br>E.g. `:dropzone-options="customOptionsObject"`. `customOptionsObject` is defined in `data()` with following `props` names.
+
 | Prop Name | Type | Description |
 |----------|------|--------------|
 | id | String | A string by which to identify the component, can be anything. **Required**|

dev/bundle.js

@@ -7,10 +7,10 @@
             <dropzone ref="myVueDropzone" id="dropzone" url="https://httpbin.org/post"
                       v-on:vdropzone-success="showSuccess"
                       v-bind:dropzone-options="dropzoneOptions"
-                      v-bind:use-custom-dropzone-options="false">
+                      v-bind:max-number-of-files="2"                    
+                      v-bind:use-custom-dropzone-options="true">
             </dropzone>
         </div>
-        <button v-on:click="process">process</button>
     </div>
 </template>
 
@@ -24,7 +24,12 @@
         data () {
             return {
                 ok: true,
-                dropzoneOptions: {autoProcessQueue: false}
+                dropzoneOptions: {
+                    autoProcessQueue: true,                    
+                },
+                language: {
+                    dictDefaultMessage : 'Hi'
+                }
             }
         },
         methods: {

dev/bundle.js.map

@@ -150,28 +150,46 @@
             },
             getQueuedFiles: function () {
                 return this.dropzone.getQueuedFiles();
-            }
+            },
+            getProp:function(attribute_prop,object_prop){
+                if (!this.useCustomDropzoneOptions)
+                    return attribute_prop;
+
+                if (object_prop !== undefined && object_prop !== null && object_prop !== '')
+                    return object_prop;
+                else
+                    return attribute_prop;
+            },
+
         },
         computed: {
             languageSettings () {
                 let defaultValues = {
-                    dictDefaultMessage: '<br>Drop files here to upload',
-                    dictCancelUpload: 'Cancel upload',
+                    dictDefaultMessage          : '<br>Drop files here to upload',
+                    dictCancelUpload            : 'Cancel upload',
                     dictCancelUploadConfirmation: 'Are you sure you want to cancel this upload?',
-                    dictFallbackMessage: 'Your browser does not support drag and drop file uploads.',
-                    dictFallbackText: 'Please use the fallback form below to upload your files like in the olden days.',
-                    dictFileTooBig: 'File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.',
-                    dictInvalidFileType: `You can't upload files of this type.`,
-                    dictMaxFilesExceeded: 'You can not upload any more files. (max: {{maxFiles}})',
-                    dictRemoveFile: 'Remove',
-                    dictRemoveFileConfirmation: null,
-                    dictResponseError: 'Server responded with {{statusCode}} code.'
-                };
+                    dictFallbackMessage         : 'Your browser does not support drag and drop file uploads.',
+                    dictFallbackText            : 'Please use the fallback form below to upload your files like in the olden days.',
+                    dictFileTooBig              : 'File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.',
+                    dictInvalidFileType         : `You can't upload files of this type.`,
+                    dictMaxFilesExceeded        : 'You can not upload any more files. (max: {{maxFiles}})',
+                    dictRemoveFile              : 'Remove',
+                    dictRemoveFileConfirmation  : null,
+                    dictResponseError           : 'Server responded with {{statusCode}} code.'
+                };                
 
                 for (let attrname in this.language) {
                     defaultValues[attrname] = this.language[attrname]
                 }
 
+                if (this.useCustomDropzoneOptions) {
+                    if (this.dropzoneOptions.language) {
+                        for (let attrname in this.dropzoneOptions.language) {
+                            defaultValues[attrname] = this.dropzoneOptions.language[attrname]
+                        }
+                    }
+                }
+
                 return defaultValues
             },
             cloudIcon: function () {
@@ -202,41 +220,36 @@
             }
             let Dropzone = require('dropzone');
             Dropzone.autoDiscover = false;
-            let element = document.getElementById(this.id);
-
-            if (!this.useCustomDropzoneOptions) {                
-                this.dropzone = new Dropzone(element, {
-                    clickable: this.clickable,
-                    paramName: this.paramName,
-                    thumbnailWidth: this.thumbnailWidth,
-                    thumbnailHeight: this.thumbnailHeight,
-                    maxFiles: this.maxNumberOfFiles,
-                    maxFilesize: this.maxFileSizeInMB,
-                    addRemoveLinks: this.showRemoveLink,
-                    acceptedFiles: this.acceptedFileTypes,
-                    autoProcessQueue: this.autoProcessQueue,
-                    headers: this.headers,
-                    previewTemplate: this.previewTemplate(this),
-                    dictDefaultMessage: this.cloudIcon + this.languageSettings.dictDefaultMessage,
-                    dictCancelUpload: this.languageSettings.dictCancelUpload,
-                    dictCancelUploadConfirmation: this.languageSettings.dictCancelUploadConfirmation,
-                    dictFallbackMessage: this.languageSettings.dictFallbackMessage,
-                    dictFallbackText: this.languageSettings.dictFallbackText,
-                    dictFileTooBig: this.languageSettings.dictFileTooBig,
-                    dictInvalidFileType: this.languageSettings.dictInvalidFileType,
-                    dictMaxFilesExceeded: this.languageSettings.dictMaxFilesExceeded,
-                    dictRemoveFile: this.languageSettings.dictRemoveFile,
-                    dictRemoveFileConfirmation: this.languageSettings.dictRemoveFileConfirmation,
-                    dictResponseError: this.languageSettings.dictResponseError,
-                    resizeWidth:this.resizeWidth,
-                    resizeHeight:this.resizeHeight,
-                    resizeMimeType:this.resizeMimeType,
-                    resizeQuality:this.resizeQuality,
-                    resizeMethod:this.resizeMethod,
-                })
-            } else {
-                this.dropzone = new Dropzone(element, this.dropzoneOptions);
-            }
+            let element = document.getElementById(this.id);            
+            this.dropzone = new Dropzone(element, {
+                clickable                   : this.getProp(this.clickable,this.dropzoneOptions.clickable),
+                paramName                   : this.getProp(this.paramName,this.dropzoneOptions.paramName),
+                thumbnailWidth              : this.getProp(this.thumbnailWidth,this.dropzoneOptions.thumbnailWidth),
+                thumbnailHeight             : this.getProp(this.thumbnailHeight,this.dropzoneOptions.thumbnailHeight),
+                maxFiles                    : this.getProp(this.maxNumberOfFiles,this.dropzoneOptions.maxNumberOfFiles),
+                maxFilesize                 : this.getProp(this.maxFileSizeInMB,this.dropzoneOptions.maxFileSizeInMB),
+                addRemoveLinks              : this.getProp(this.showRemoveLink,this.dropzoneOptions.showRemoveLink),
+                acceptedFiles               : this.getProp(this.acceptedFileTypes,this.dropzoneOptions.acceptedFileTypes),
+                autoProcessQueue            : this.getProp(this.autoProcessQueue,this.dropzoneOptions.autoProcessQueue),
+                headers                     : this.getProp(this.headers,this.dropzoneOptions.headers),
+                previewTemplate             : this.previewTemplate(this),
+                dictDefaultMessage          : this.cloudIcon + this.languageSettings.dictDefaultMessage,
+                dictCancelUpload            : this.languageSettings.dictCancelUpload,
+                dictCancelUploadConfirmation: this.languageSettings.dictCancelUploadConfirmation,
+                dictFallbackMessage         : this.languageSettings.dictFallbackMessage,
+                dictFallbackText            : this.languageSettings.dictFallbackText,
+                dictFileTooBig              : this.languageSettings.dictFileTooBig,
+                dictInvalidFileType         : this.languageSettings.dictInvalidFileType,
+                dictMaxFilesExceeded        : this.languageSettings.dictMaxFilesExceeded,
+                dictRemoveFile              : this.languageSettings.dictRemoveFile,
+                dictRemoveFileConfirmation  : this.languageSettings.dictRemoveFileConfirmation,
+                dictResponseError           : this.languageSettings.dictResponseError,
+                resizeWidth                 : this.getProp(this.resizeWidth,this.dropzoneOptions.resizeWidth),
+                resizeHeight                : this.getProp(this.resizeHeight,this.dropzoneOptions.resizeHeight),
+                resizeMimeType              : this.getProp(this.resizeMimeType,this.dropzoneOptions.resizeMimeType),
+                resizeQuality               : this.getProp(this.resizeQuality,this.dropzoneOptions.resizeQuality),
+                resizeMethod                : this.getProp(this.resizeMethod,this.dropzoneOptions.resizeMethod)
+            })            
 
             // Handle the dropzone events
             let vm = this;