Start working on v3.7

.babelrc

@@ -1,5 +1,9 @@
 {
   "presets": [
-    ["@babel/preset-env", { "modules": false }]
-  ]
+    [
+      "@babel/preset-env", {
+        "modules": false
+      }
+    ]
+  ],
 }

FUNDING.yml

@@ -0,0 +1,2 @@
+github: [rowanwins]
+custom: ["https://paypal.me/rowanwinsemius"]

docs/src/pages/UploadToAWSS3.vue

@@ -2,7 +2,7 @@
   <div>
     <h1>Upload directly to AWS S3</h1>
     <p v-html="marked(description)"></p>
-    <vue-dropzone ref="myVueDropzone" id="dropzone" v-on:vdropzone-sending="sendingEvent" :awss3="awss3" v-on:vdropzone-s3-upload-error="s3UploadError" v-on:vdropzone-s3-upload-success="s3UploadSuccess" :options="dropzoneOptions">
+    <vue-dropzone ref="myVueDropzone" id="dropzone" :awss3="awss3" v-on:vdropzone-s3-upload-error="s3UploadError" v-on:vdropzone-s3-upload-success="s3UploadSuccess" :options="dropzoneOptions">
     </vue-dropzone>
     <hr>
     <label>Enter your URL Signer Endpoint</label>
@@ -93,8 +93,7 @@ export default {
       dropzoneOptions: {
         url: 'https://httpbin.org/post',
         thumbnailWidth: 200,
-        addRemoveLinks: true,
-        autoProcessQueue: false,
+        addRemoveLinks: true
       },
       awss3: {
         signingURL: '',
@@ -104,9 +103,6 @@ export default {
     }
   },
   methods: {
-    sendingEvent(file, xhr, formData) {
-      formData.append('paramName', 'some value or other');
-    },
     s3UploadError(error) {
       console.log(error)
     },

package.json

@@ -12,9 +12,10 @@
   "repository": "git@github.com:rowanwins/vue-dropzone.git",
   "devDependencies": {
     "@babel/core": "^7.3.4",
+    "@babel/plugin-transform-runtime": "^7.9.6",
+    "@babel/polyfill": "^7.8.7",
     "@babel/preset-env": "^7.3.4",
     "babel-loader": "^8.0.5",
-    "babel-plugin-external-helpers": "^6.22.0",
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
     "file-loader": "^3.0.1",
@@ -57,6 +58,6 @@
     "dist"
   ],
   "dependencies": {
-    "dropzone": "^5.5.1"
+    "dropzone": "5.7.0"
   }
-}
+}

src/components/vue-dropzone.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import Dropzone from "dropzone"; //eslint-disable-line
-import awsEndpoint from "../services/urlsigner";
+import Dropzone from "dropzone";
+import {generateSignedUrl} from "../services/aws";
 
 Dropzone.autoDiscover = false;
 
@@ -47,72 +47,101 @@ export default {
       type: Boolean,
       default: false,
       required: false
+    },
+    confirm: {
+      type: Function,
+      default: null,
+      required: false
     }
   },
-  data() {
-    return {
-      isS3: false,
-      isS3OverridesServerPropagation: false,
-      wasQueueAutoProcess: true
-    };
-  },
   computed: {
+    // s3DropZoneSettings extend the regular options param that someone passes through
+    // so things like acceptedFiles should just work
+    s3DropZoneSettings() {
+      const normalSettings = this.dropzoneSettings
+      const that = this
+      const s3Settings = {
+        method: 'PUT',
+        parallelUploads: 1,
+        uploadMultiple: false,
+        paramName: "file",
+        autoProcessQueue: false,
+        sending (file, xhr) {
+          let _send = xhr.send
+          xhr.send = () => {
+            _send.call(xhr, file)
+          }
+        },
+        accept: async function(file, done) {
+          if (vm.isS3) {
+            const incFile = vm.awss3.includeFile === true ? true : false
+            const signed = await generateSignedUrl(that.awss3.signingURL, file, incFile);
+            vm.setOption('headers', {
+              'Content-Type': file.type,
+              'x-amz-acl': 'public-read'
+            });
+            vm.setOption('url', signed.signature)
+            done()
+            setTimeout(() => vm.dropzone.processFile(file))
+          }
+        }
+      }
+
+      Object.keys(s3Settings).forEach(function(key) {
+        normalSettings[key] = s3Settings[key];
+      }, this);
+      const vm = this;
+      return normalSettings;
+    },
     dropzoneSettings() {
       let defaultValues = {
         thumbnailWidth: 200,
-        thumbnailHeight: 200
+        thumbnailHeight: 200,
       };
+
       Object.keys(this.options).forEach(function(key) {
         defaultValues[key] = this.options[key];
       }, this);
-      if (this.awss3 !== null) {
-        defaultValues["autoProcessQueue"] = false;
-        this.isS3 = true; //eslint-disable-line
-        this.isS3OverridesServerPropagation =
-          this.awss3.sendFileToServer === false; //eslint-disable-line
-        if (this.options.autoProcessQueue !== undefined)
-          this.wasQueueAutoProcess = this.options.autoProcessQueue; //eslint-disable-line
-
-        if (this.isS3OverridesServerPropagation) {
-          defaultValues["url"] = files => {
-            return files[0].s3Url;
-          };
-        }
-      }
+      const vm = this;
+
       return defaultValues;
+    },
+    isS3 () {
+      return this.awss3 !== null
     }
   },
   mounted() {
     if (this.$isServer && this.hasBeenMounted) {
       return;
     }
+
     this.hasBeenMounted = true;
 
+    if (this.confirm) {
+      Dropzone.confirm = this.confirm
+    }
+
     this.dropzone = new Dropzone(
       this.$refs.dropzoneElement,
-      this.dropzoneSettings
+      this.isS3 ? this.s3DropZoneSettings : this.dropzoneSettings
     );
     let vm = this;
 
     this.dropzone.on("thumbnail", function(file, dataUrl) {
       vm.$emit("vdropzone-thumbnail", file, dataUrl);
     });
 
-    this.dropzone.on("addedfile", function(file) {
+    this.dropzone.on("addedfile", async function(file) {
       var isDuplicate = false;
       if (vm.duplicateCheck) {
         if (this.files.length) {
           var _i, _len;
-          for (
-            _i = 0, _len = this.files.length;
-            _i < _len - 1;
-            _i++ // -1 to exclude current file
-          ) {
+          for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) {
             if (
               this.files[_i].name === file.name &&
               this.files[_i].size === file.size &&
-              this.files[_i].lastModifiedDate.toString() ===
-                file.lastModifiedDate.toString()
+              this.files[_i].lastModified ===
+                file.lastModified
             ) {
               this.removeFile(file);
               isDuplicate = true;
@@ -121,11 +150,7 @@ export default {
           }
         }
       }
-
       vm.$emit("vdropzone-file-added", file);
-      if (vm.isS3 && vm.wasQueueAutoProcess && !file.manuallyAdded) {
-        vm.getSignedAndUploadToS3(file);
-      }
     });
 
     this.dropzone.on("addedfiles", function(files) {
@@ -134,23 +159,13 @@ export default {
 
     this.dropzone.on("removedfile", function(file) {
       vm.$emit("vdropzone-removed-file", file);
-      if (file.manuallyAdded && vm.dropzone.options.maxFiles !== null)
+      if (file.manuallyAdded && vm.dropzone.options.maxFiles !== null) {
         vm.dropzone.options.maxFiles++;
+      }
     });
 
     this.dropzone.on("success", function(file, response) {
       vm.$emit("vdropzone-success", file, response);
-      if (vm.isS3) {
-        if (vm.isS3OverridesServerPropagation) {
-          var xmlResponse = new window.DOMParser().parseFromString(
-            response,
-            "text/xml"
-          );
-          var s3ObjectLocation = xmlResponse.firstChild.children[0].innerHTML;
-          vm.$emit("vdropzone-s3-upload-success", s3ObjectLocation);
-        }
-        if (vm.wasQueueAutoProcess) vm.setOption("autoProcessQueue", false);
-      }
     });
 
     this.dropzone.on("successmultiple", function(file, response) {
@@ -159,24 +174,13 @@ export default {
 
     this.dropzone.on("error", function(file, message, xhr) {
       vm.$emit("vdropzone-error", file, message, xhr);
-      if (this.isS3) vm.$emit("vdropzone-s3-upload-error");
     });
 
     this.dropzone.on("errormultiple", function(files, message, xhr) {
       vm.$emit("vdropzone-error-multiple", files, message, xhr);
     });
 
     this.dropzone.on("sending", function(file, xhr, formData) {
-      if (vm.isS3) {
-        if (vm.isS3OverridesServerPropagation) {
-          let signature = file.s3Signature;
-          Object.keys(signature).forEach(function(key) {
-            formData.append(key, signature[key]);
-          });
-        } else {
-          formData.append("s3ObjectLocation", file.s3ObjectLocation);
-        }
-      }
       vm.$emit("vdropzone-sending", file, xhr, formData);
     });
 
@@ -208,7 +212,7 @@ export default {
       vm.$emit("vdropzone-max-files-exceeded", file);
     });
 
-    this.dropzone.on("processing", function(file) {
+    this.dropzone.on("processing", async function(file) {
       vm.$emit("vdropzone-processing", file);
     });
 
@@ -275,15 +279,10 @@ export default {
       file.manuallyAdded = true;
       this.dropzone.emit("addedfile", file);
       let containsImageFileType = false;
-      if (
-        fileUrl.indexOf(".svg") > -1 ||
-        fileUrl.indexOf(".png") > -1 ||
-        fileUrl.indexOf(".jpg") > -1 ||
-        fileUrl.indexOf(".jpeg") > -1 ||
-        fileUrl.indexOf(".gif") > -1 ||
-        fileUrl.indexOf(".webp") > -1
-      )
+      const supportedThumbnailTypes = [".svg", ".png", ".jpg", "jpeg", ".gif", ".webp", "image/"]
+      if (supportedThumbnailTypes.filter(s => fileUrl.toLowerCase().indexOf(s) > -1).length > 0) {
         containsImageFileType = true;
+      }
       if (
         this.dropzone.options.createImageThumbnails &&
         containsImageFileType &&
@@ -299,11 +298,12 @@ export default {
             this.dropzoneSettings.thumbnailWidth + "px";
           thumbnails[i].style.height =
             this.dropzoneSettings.thumbnailHeight + "px";
-          thumbnails[i].style["object-fit"] = "contain";
+          thumbnails[i].classList.add("vdManualThumbnail")
         }
       }
       this.dropzone.emit("complete", file);
       if (this.dropzone.options.maxFiles) this.dropzone.options.maxFiles--;
+      file.accepted = true;
       this.dropzone.files.push(file);
       this.$emit("vdropzone-file-added-manually", file);
     },
@@ -315,13 +315,7 @@ export default {
     },
     processQueue: function() {
       let dropzoneEle = this.dropzone;
-      if (this.isS3 && !this.wasQueueAutoProcess) {
-        this.getQueuedFiles().forEach(file => {
-          this.getSignedAndUploadToS3(file);
-        });
-      } else {
-        this.dropzone.processQueue();
-      }
+      this.dropzone.processQueue();
       this.dropzone.on("success", function() {
         dropzoneEle.options.autoProcessQueue = true;
       });
@@ -388,43 +382,6 @@ export default {
     },
     getActiveFiles: function() {
       return this.dropzone.getActiveFiles();
-    },
-    getSignedAndUploadToS3(file) {
-      var promise = awsEndpoint.sendFile(
-        file,
-        this.awss3,
-        this.isS3OverridesServerPropagation
-      );
-      if (!this.isS3OverridesServerPropagation) {
-        promise.then(response => {
-          if (response.success) {
-            file.s3ObjectLocation = response.message;
-            setTimeout(() => this.dropzone.processFile(file));
-            this.$emit("vdropzone-s3-upload-success", response.message);
-          } else {
-            if ("undefined" !== typeof response.message) {
-              this.$emit("vdropzone-s3-upload-error", response.message);
-            } else {
-              this.$emit(
-                "vdropzone-s3-upload-error",
-                "Network Error : Could not send request to AWS. (Maybe CORS error)"
-              );
-            }
-          }
-        });
-      } else {
-        promise.then(() => {
-          setTimeout(() => this.dropzone.processFile(file));
-        });
-      }
-      promise.catch(error => {
-        alert(error);
-      });
-    },
-    setAWSSigningURL(location) {
-      if (this.isS3) {
-        this.awss3.signingURL = location;
-      }
     }
   }
 };
@@ -541,4 +498,7 @@ export default {
 .vue-dropzone > .dz-preview .dz-error-message:after {
   display: none;
 }
+.vue-dropzone > .dz-preview .vdManualThumbnail {
+  object-fit: cover;
+}
 </style>

src/index.js

@@ -1,4 +1,5 @@
 import './../node_modules/dropzone/dist/dropzone.css'
 import vueDropzone from './components/vue-dropzone.vue'
+import "@babel/polyfill"
 
 export default vueDropzone