@vaadin/upload 25.0.0-beta3 → 25.0.0-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "25.0.0-beta3",
+  "version": "25.0.0-beta4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,23 +34,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-beta3",
-    "@vaadin/button": "25.0.0-beta3",
-    "@vaadin/component-base": "25.0.0-beta3",
-    "@vaadin/progress-bar": "25.0.0-beta3",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-beta3",
+    "@vaadin/a11y-base": "25.0.0-beta4",
+    "@vaadin/button": "25.0.0-beta4",
+    "@vaadin/component-base": "25.0.0-beta4",
+    "@vaadin/progress-bar": "25.0.0-beta4",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-beta3",
-    "@vaadin/test-runner-commands": "25.0.0-beta3",
+    "@vaadin/chai-plugins": "25.0.0-beta4",
+    "@vaadin/test-runner-commands": "25.0.0-beta4",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-beta3",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta4",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4b2006b0e2f4fc131f5483223b852d34224e7b9a"
+  "gitHead": "707c30af7ed0afacc13c0afb27d047b043160d1f"
 }

package/src/styles/vaadin-upload-file-base-styles.js

@@ -90,11 +90,7 @@ export const uploadFileStyles = css`
     color: var(--vaadin-upload-file-button-text-color, var(--vaadin-text-color));
     cursor: var(--vaadin-clickable-cursor);
     flex-shrink: 0;
-    font-family: var(--vaadin-upload-file-button-font-family, inherit);
-    font-size: var(--vaadin-upload-file-button-font-size, inherit);
-    font-weight: var(--vaadin-upload-file-button-font-weight, 500);
-    height: var(--vaadin-upload-file-button-height, auto);
-    line-height: var(--vaadin-upload-file-button-line-height, inherit);
+    font: inherit;
     padding: var(--vaadin-upload-file-button-padding, var(--vaadin-padding-container));
   }
 

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

@@ -68,6 +68,8 @@ export interface UploadI18n {
 
 export type UploadMethod = 'POST' | 'PUT';
 
+export type UploadFormat = 'raw' | 'multipart';
+
 export declare function UploadMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<UploadMixinClass> & Constructor<I18nMixinClass<UploadI18n>> & T;
@@ -170,7 +172,8 @@ export declare class UploadMixinClass {
   maxFileSize: number;
 
   /**
-   * Specifies the 'name' property at Content-Disposition
+   * Specifies the 'name' property at Content-Disposition for multipart uploads.
+   * This property is ignored when uploadFormat is 'raw'.
    * @attr {string} form-data-name
    */
   formDataName: string;
@@ -194,6 +197,14 @@ export declare class UploadMixinClass {
    */
   capture: string | null | undefined;
 
+  /**
+   * Specifies the upload format to use when sending files to the server.
+   * - '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;
+
   /**
    * The object used to localize this component. To change the default
    * localization, replace this with an object that provides all properties, or

package/src/vaadin-upload-mixin.js

@@ -279,7 +279,8 @@ export const UploadMixin = (superClass) =>
         },
 
         /**
-         * Specifies the 'name' property at Content-Disposition
+         * Specifies the 'name' property at Content-Disposition for multipart uploads.
+         * This property is ignored when uploadFormat is 'raw'.
          * @attr {string} form-data-name
          * @type {string}
          */
@@ -309,6 +310,18 @@ export const UploadMixin = (superClass) =>
           value: false,
         },
 
+        /**
+         * Specifies the upload format to use when sending files to the server.
+         * - '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: 'raw',
+        },
+
         /**
          * Pass-through to input's capture attribute. Allows user to trigger device inputs
          * such as camera or microphone immediately.
@@ -636,7 +649,7 @@ export const UploadMixin = (superClass) =>
     }
 
     /** @private */
-    _configureXhr(xhr) {
+    _configureXhr(xhr, file = null, isRawUpload = false) {
       if (typeof this.headers === 'string') {
         try {
           this.headers = JSON.parse(this.headers);
@@ -647,6 +660,13 @@ export const UploadMixin = (superClass) =>
       Object.entries(this.headers).forEach(([key, value]) => {
         xhr.setRequestHeader(key, value);
       });
+
+      // Set Content-Type and filename header for raw binary uploads
+      if (isRawUpload && file) {
+        xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
+        xhr.setRequestHeader('X-Filename', encodeURIComponent(file.name));
+      }
+
       if (this.timeout) {
         xhr.timeout = this.timeout;
       }
@@ -759,12 +779,17 @@ export const UploadMixin = (superClass) =>
         }
       };
 
-      const formData = new FormData();
+      // Determine upload format and prepare request body
+      const isRawUpload = this.uploadFormat === 'raw';
 
       if (!file.uploadTarget) {
         file.uploadTarget = this.target || '';
       }
-      file.formDataName = this.formDataName;
+
+      // Only set formDataName for multipart uploads
+      if (!isRawUpload) {
+        file.formDataName = this.formDataName;
+      }
 
       const evt = this.dispatchEvent(
         new CustomEvent('upload-before', {
@@ -776,10 +801,19 @@ export const UploadMixin = (superClass) =>
         return;
       }
 
-      formData.append(file.formDataName, file, file.name);
+      let requestBody;
+      if (isRawUpload) {
+        // Raw binary upload - send file directly
+        requestBody = file;
+      } else {
+        // Multipart upload - use FormData
+        const formData = new FormData();
+        formData.append(file.formDataName, file, file.name);
+        requestBody = formData;
+      }
 
       xhr.open(this.method, file.uploadTarget, true);
-      this._configureXhr(xhr);
+      this._configureXhr(xhr, file, isRawUpload);
 
       file.status = this.__effectiveI18n.uploading.status.connecting;
       file.uploading = file.indeterminate = true;
@@ -796,14 +830,26 @@ export const UploadMixin = (superClass) =>
 
       // Custom listener could modify the xhr just before sending it
       // preventing default
+      const eventDetail = {
+        file,
+        xhr,
+        uploadFormat: this.uploadFormat,
+        requestBody,
+      };
+
+      // Expose formData property when using multipart so listeners can modify it
+      if (!isRawUpload) {
+        eventDetail.formData = requestBody;
+      }
+
       const uploadEvt = this.dispatchEvent(
         new CustomEvent('upload-request', {
-          detail: { file, xhr, formData },
+          detail: eventDetail,
           cancelable: true,
         }),
       );
       if (uploadEvt) {
-        xhr.send(formData);
+        xhr.send(requestBody);
       }
     }
 

package/src/vaadin-upload.d.ts

@@ -5,9 +5,9 @@
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { type UploadFile, UploadMixin } from './vaadin-upload-mixin.js';
+import { type UploadFile, type UploadFormat, UploadMixin } from './vaadin-upload-mixin.js';
 
-export { UploadFile, UploadI18n, UploadMethod } from './vaadin-upload-mixin.js';
+export { UploadFile, UploadFormat, UploadI18n, UploadMethod } from './vaadin-upload-mixin.js';
 
 type UploadEvent<T> = CustomEvent<T> & { target: Upload };
 
@@ -83,7 +83,13 @@ export type UploadAbortEvent = UploadEvent<{ xhr: XMLHttpRequest; file: UploadFi
  * headers, etc. If the event is defaultPrevented, `vaadin-upload` will not
  * send the request allowing the user to do something on his own.
  */
-export type UploadRequestEvent = UploadEvent<{ xhr: XMLHttpRequest; file: UploadFile; formData: FormData }>;
+export type UploadRequestEvent = UploadEvent<{
+  xhr: XMLHttpRequest;
+  file: UploadFile;
+  uploadFormat: UploadFormat;
+  requestBody: FormData | File;
+  formData?: FormData;
+}>;
 
 export interface UploadCustomEventMap {
   'file-reject': UploadFileRejectEvent;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "25.0.0-beta3",
+  "version": "25.0.0-beta4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -339,7 +339,7 @@
             },
             {
               "name": "form-data-name",
-              "description": "Specifies the 'name' property at Content-Disposition",
+              "description": "Specifies the 'name' property at Content-Disposition for multipart uploads.\nThis property is ignored when uploadFormat is 'raw'.",
               "value": {
                 "type": [
                   "string"
@@ -364,6 +364,15 @@
                 ]
               }
             },
+            {
+              "name": "upload-format",
+              "description": "Specifies the upload format to use when sending files to the server.\n- 'raw': Send file as raw binary data with the file's MIME type as Content-Type (default)\n- 'multipart': Send file using multipart/form-data encoding",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
             {
               "name": "capture",
               "description": "Pass-through to input's capture attribute. Allows user to trigger device inputs\nsuch as camera or microphone immediately.",
@@ -491,7 +500,7 @@
               },
               {
                 "name": "formDataName",
-                "description": "Specifies the 'name' property at Content-Disposition",
+                "description": "Specifies the 'name' property at Content-Disposition for multipart uploads.\nThis property is ignored when uploadFormat is 'raw'.",
                 "value": {
                   "type": [
                     "string"
@@ -516,6 +525,15 @@
                   ]
                 }
               },
+              {
+                "name": "uploadFormat",
+                "description": "Specifies the upload format to use when sending files to the server.\n- 'raw': Send file as raw binary data with the file's MIME type as Content-Type (default)\n- 'multipart': Send file using multipart/form-data encoding",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
               {
                 "name": "capture",
                 "description": "Pass-through to input's capture attribute. Allows user to trigger device inputs\nsuch as camera or microphone immediately.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "25.0.0-beta3",
+  "version": "25.0.0-beta4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -217,7 +217,14 @@
             },
             {
               "name": ".formDataName",
-              "description": "Specifies the 'name' property at Content-Disposition",
+              "description": "Specifies the 'name' property at Content-Disposition for multipart uploads.\nThis property is ignored when uploadFormat is 'raw'.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".uploadFormat",
+              "description": "Specifies the upload format to use when sending files to the server.\n- 'raw': Send file as raw binary data with the file's MIME type as Content-Type (default)\n- 'multipart': Send file using multipart/form-data encoding",
               "value": {
                 "kind": "expression"
               }