feat!: change default uploadFormat to 'raw' (#10424)

Switch the default upload format from 'multipart' to 'raw' binary uploads.

BREAKING CHANGE: The default upload format has changed from 'multipart' to 'raw'.
Existing applications that rely on multipart/form-data uploads must now explicitly
set upload-format="multipart" to maintain the previous behavior.

Author: Artur-

packages/upload/src/vaadin-upload-mixin.d.ts

@@ -199,8 +199,8 @@ export declare class UploadMixinClass {
 
   /**
    * Specifies the upload format to use when sending files to the server.
-   * - 'multipart': Send file using multipart/form-data encoding (default)
-   * - 'raw': Send file as raw binary data with the file's MIME type as Content-Type
+   * - 'raw': Send file as raw binary data with the file's MIME type as Content-Type (default)
+   * - 'multipart': Send file using multipart/form-data encoding
    * @attr {string} upload-format
    */
   uploadFormat: UploadFormat;

packages/upload/src/vaadin-upload-mixin.js

@@ -312,14 +312,14 @@ export const UploadMixin = (superClass) =>
 
         /**
          * Specifies the upload format to use when sending files to the server.
-         * - 'multipart': Send file using multipart/form-data encoding (default)
-         * - 'raw': Send file as raw binary data with the file's MIME type as Content-Type
+         * - 'raw': Send file as raw binary data with the file's MIME type as Content-Type (default)
+         * - 'multipart': Send file using multipart/form-data encoding
          * @attr {string} upload-format
          * @type {string}
          */
         uploadFormat: {
           type: String,
-          value: 'multipart',
+          value: 'raw',
         },
 
         /**

packages/upload/test/upload.test.js

@@ -156,7 +156,9 @@ describe('upload', () => {
         upload._uploadFile(file);
       });
 
-      it('should fire the upload-before with configurable form data name', (done) => {
+      it('should fire the upload-before with configurable form data name in multipart mode', (done) => {
+        upload.uploadFormat = 'multipart';
+
         function MockFormData() {
           this.data = [];
         }
@@ -183,7 +185,9 @@ describe('upload', () => {
         window.FormData = OriginalFormData;
       });
 
-      it('should use formDataName property as a default form data name', (done) => {
+      it('should use formDataName property as a default form data name in multipart mode', (done) => {
+        upload.uploadFormat = 'multipart';
+
         upload.addEventListener('upload-before', (e) => {
           expect(e.detail.file.formDataName).to.equal('attachment');
           done();
@@ -201,7 +205,9 @@ describe('upload', () => {
         expect(file.xhr.readyState).to.equal(0);
       });
 
-      it('should fire upload-request event', (done) => {
+      it('should fire upload-request event in multipart mode', (done) => {
+        upload.uploadFormat = 'multipart';
+
         upload.addEventListener('upload-request', (e) => {
           expect(e.detail.file).to.be.ok;
           expect(e.detail.xhr).to.be.ok;
@@ -656,7 +662,7 @@ describe('upload', () => {
       expect(e.detail.xhr.status).to.equal(200);
     });
 
-    it('should include uploadFormat and requestBody in upload-request event for raw', (done) => {
+    it('should include uploadFormat and requestBody in upload-request event in raw format', (done) => {
       upload.uploadFormat = 'raw';
       upload.addEventListener('upload-request', (e) => {
         expect(e.detail.uploadFormat).to.equal('raw');