Include support for FA - Resolve rowanwins#6

Author: rowanwins

README.md

@@ -56,6 +56,7 @@ Many of these props are inherited from [dropzone configuration so see their doco
 | maxFileSizeInMB | Number |The maximum file size for a single upload in MB.|
 | maxNumberOfFiles | Number | The maximum number of files to allow the user to upload.|
 | autoProcessQueue | Boolean | Whether the files are automatically uploaded or not.|
+| useFontAwesome | Boolean | Whether to use Font Awesome instead of Material Icon.|
 | useCustomDropzoneOptions | Boolean | If you want to define your own Dropzone config set this to true and define a dropzoneOptions.|
 | dropzoneOptions | Object | A custom set of rules to define your dropzone object, use anything available in the [dropzone config](http://www.dropzonejs.com/#configuration-options).|
 

dev/bundle.js

@@ -2,7 +2,7 @@
   "name": "vue2-dropzone",
   "description": "A wrapper around Dropzone.js for Vue 2",
   "author": "rowanwins <[email protected]>",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "main": "./dist/vue2-dropzone.js",
   "scripts": {
     "dev": "webpack-dev-server --inline --hot --config ./build/dev.js --port 8080",

dev/bundle.js.map

@@ -49,6 +49,10 @@
         type: Boolean,
         default: true
       },
+      useFontAwesome: {
+        type: Boolean,
+        default: false      
+      },
       useCustomDropzoneOptions: {
         type: Boolean,
         default: false
@@ -65,6 +69,29 @@
         this.dropzone.processQueue()
       }
     },
+    computed: {
+      cloudIcon: function () {
+        if (this.useFontAwesome) {
+          return '<i class="fa fa-cloud-upload"></i>'
+        } else {
+          return  '<i class="material-icons">cloud_upload</i>'
+        }
+      },
+      doneIcon: function () {
+        if (this.useFontAwesome) {
+          return '<i class="fa fa-check"></i>'
+        } else {
+          return  ' <i class="material-icons">done</i>'
+        }
+      },
+      errorIcon: function () {
+        if (this.useFontAwesome) {
+          return '<i class="fa fa-close"></i>'
+        } else {
+          return  ' <i class="material-icons">error</i>'
+        }
+      }
+    },
     mounted () {
       var element = document.getElementById(this.id)
       if (!this.useCustomDropzoneOptions) {
@@ -78,8 +105,8 @@
           addRemoveLinks: this.showRemoveLink,
           acceptedFiles: this.acceptedFileTypes,
           autoProcessQueue: this.autoProcessQueue,
-          dictDefaultMessage: '<i class="material-icons">cloud_upload</i><br>Drop files here to upload',
-          previewTemplate: '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px"><img data-dz-thumbnail /></div>  <div class="dz-details">    <div class="dz-size"><span data-dz-size></span></div>    <div class="dz-filename"><span data-dz-name></span></div>  </div>  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark"> <i class="material-icons">done</i> </div>  <div class="dz-error-mark"><i class="material-icons">error</i></div></div>'
+          dictDefaultMessage: this.cloudIcon +'<br>Drop files here to upload',
+          previewTemplate: '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px"><img data-dz-thumbnail /></div>  <div class="dz-details">    <div class="dz-size"><span data-dz-size></span></div>    <div class="dz-filename"><span data-dz-name></span></div>  </div>  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark">' + this.doneIcon + ' </div>  <div class="dz-error-mark' + this.errorIcon + '</div></div>'
         })
       } else {
         this.dropzone = new Dropzone(element, this.dropzoneOptions)