[pull] main from enyo:main

packages/dropzone/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 6.3.5
+
+### Patch Changes
+
+- [#2380](https://github.com/enyo/dropzone/pull/2380) [`88901b7`](https://github.com/enyo/dropzone/commit/88901b747360d2033b30a9539331cc5d46d2b96c) - Fix `binaryBody` uploads sending the original file instead of the transformed one. `resizeWidth`, `resizeHeight` and any custom `transformFile` were silently ignored, so an unresized image went to the server. Chunked and form-data uploads were unaffected.
+
+- [#2379](https://github.com/enyo/dropzone/pull/2379) [`eae9121`](https://github.com/enyo/dropzone/commit/eae9121da858f4af9002df125286f83e098eb9e5) - Fix cancelling an upload while `transformFile` is still running. The file had no `xhr` yet, so it was grouped with every other file that had not started and the whole queue was cancelled with it — and the file itself was still sent once the transform finished.
+
 ## 6.3.4
 
 ### Patch Changes

packages/dropzone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dropzone",
-  "version": "6.3.4",
+  "version": "6.3.5",
   "description": "Handles drag and drop of files for you.",
   "keywords": [
     "drag and drop",

packages/dropzone/src/dropzone.ts

@@ -1624,7 +1624,7 @@ export default class Dropzone extends Emitter {
       if (this.options.uploadMultiple) {
         this.emit("sendingmultiple", files, xhr);
       }
-      this.submitRequest(xhr, null as any, files);
+      this.submitRequest(xhr, null, files, dataBlocks);
     } else {
       let formData = new FormData();
 
@@ -1672,7 +1672,7 @@ export default class Dropzone extends Emitter {
         formData.append(dataBlock.name, dataBlock.data, dataBlock.filename);
       }
 
-      this.submitRequest(xhr, formData, files);
+      this.submitRequest(xhr, formData, files, dataBlocks);
     }
   }
 
@@ -1852,7 +1852,12 @@ export default class Dropzone extends Emitter {
     );
   }
 
-  submitRequest(xhr: XMLHttpRequest, formData: FormData, files: DropzoneFile[]) {
+  submitRequest(
+    xhr: XMLHttpRequest,
+    formData: FormData | null,
+    files: DropzoneFile[],
+    dataBlocks?: any[],
+  ) {
     if (xhr.readyState != 1) {
       console.warn("Cannot send this request because the XMLHttpRequest.readyState is not OPENED.");
       return;
@@ -1862,7 +1867,12 @@ export default class Dropzone extends Emitter {
         const chunk = this._getChunk(files[0], xhr)!;
         xhr.send(chunk.dataBlock.data);
       } else {
-        xhr.send(files[0]);
+        // `files[0]` is the file as it was dropped, not what should go on the
+        // wire: `transformFile` may have replaced it, which is how
+        // `resizeWidth` and `resizeHeight` work. The result is in
+        // `dataBlocks`, the same as for the chunked and form-data paths. The
+        // fallback is for anyone calling this themselves without them.
+        xhr.send(dataBlocks ? dataBlocks[0].data : files[0]);
       }
     } else {
       xhr.send(formData);

packages/dropzone/test/unit-tests/amazon-s3.js

@@ -61,6 +61,29 @@ describe("Amazon S3 Support", function () {
       dropzone.destroy();
       return xhr.restore();
     });
+    it("should send the file itself when there is nothing to transform", async () => {
+      let file = getMockFile("text/plain", "plain.txt", ["original contents"]);
+      dropzone.addFile(file);
+      await sleep(10);
+
+      expect(requests[0].body).toBe(file);
+    });
+
+    // The point of binaryBody is uploading straight to a bucket, which is
+    // exactly where resizeWidth/resizeHeight are wanted -- and transformFile
+    // is how those work. The transformed blob was being dropped and the
+    // original file uploaded in its place.
+    it("should send what transformFile produced, not the original file", async () => {
+      let transformed = new Blob(["transformed contents"], { type: "text/plain" });
+      dropzone.options.transformFile = (file, done) => done(transformed);
+
+      dropzone.addFile(getMockFile("text/plain", "plain.txt", ["original contents"]));
+      await sleep(10);
+
+      expect(requests[0].body).toBe(transformed);
+      expect(await new Response(requests[0].body).text()).toBe("transformed contents");
+    });
+
     it("should add proper Content-Type", async () => {
       dropzone.addFile(getMockFile());
       dropzone.addFile(getMockFile("image/jpeg", "some-file.jpg", [[1, 2, 3]]));