feat: implement direct file upload for sends with JWT token validation

- Added `processSendFileUpload` function to handle file uploads for sends.
- Integrated JWT token creation and verification for secure file uploads.
- Updated `handleCreateFileSendV2` and `handleGetSendFileUpload` to use new upload URL generation.
- Refactored upload handling in `handleUploadSendFile` and `handlePublicUploadSendFile` to utilize the new upload process.
- Introduced `uploadDirectEncryptedPayload` for handling direct uploads with progress tracking.
- Enhanced API routes to support both POST and PUT methods for attachment uploads.
- Added localization strings for upload progress messages.
- Created utility functions for direct upload URL building and payload parsing.

webapp/src/lib/api/send.ts

@@ -1,6 +1,6 @@
 import { base64ToBytes, bytesToBase64, decryptBw, decryptBwFileData, decryptStr, encryptBw, encryptBwFileData, hkdf, pbkdf2 } from '../crypto';
 import type { Send, SendDraft, SessionState } from '../types';
-import { chunkArray, createApiError, parseErrorMessage, parseJson, type AuthedFetch } from './shared';
+import { chunkArray, createApiError, parseErrorMessage, parseJson, uploadDirectEncryptedPayload, type AuthedFetch } from './shared';
 
 function toIsoDateFromDays(value: string, required: boolean): string | null {
   const raw = String(value || '').trim();
@@ -70,7 +70,8 @@ export async function getSends(authedFetch: AuthedFetch): Promise<Send[]> {
 export async function createSend(
   authedFetch: AuthedFetch,
   session: SessionState,
-  draft: SendDraft
+  draft: SendDraft,
+  onProgress?: (percent: number | null) => void
 ): Promise<Send> {
   if (!session.symEncKey || !session.symMacKey) throw new Error('Vault key unavailable');
   const userEnc = base64ToBytes(session.symEncKey);
@@ -148,16 +149,16 @@ export async function createSend(
   });
   if (!fileResp.ok) throw new Error(await parseErrorMessage(fileResp, 'Create file send failed'));
 
-  const uploadInfo = await parseJson<{ url?: string; sendResponse?: Send }>(fileResp);
+  const uploadInfo = await parseJson<{ url?: string; sendResponse?: Send; fileUploadType?: number }>(fileResp);
   const uploadUrl = uploadInfo?.url;
   if (!uploadUrl) throw new Error('Create file send failed: missing upload URL');
-
-  const formData = new FormData();
-  const encryptedBlob = new Blob([encryptedFileBytes as unknown as BlobPart], { type: 'application/octet-stream' });
-  formData.set('data', encryptedBlob, fileNameCipher);
-  const uploadResp = await authedFetch(uploadUrl, {
-    method: 'POST',
-    body: formData,
+  const uploadResp = await uploadDirectEncryptedPayload({
+    accessToken: session.accessToken,
+    uploadUrl,
+    payload: encryptedFileBytes,
+    fileUploadType: uploadInfo?.fileUploadType,
+    unsupportedMessage: 'Unsupported send upload type',
+    onProgress,
   });
   if (!uploadResp.ok) throw new Error(await parseErrorMessage(uploadResp, 'Upload send file failed'));
   if (!uploadInfo?.sendResponse?.id) throw new Error('Create file send failed');

webapp/src/lib/api/shared.ts

@@ -58,3 +58,99 @@ export function createApiError(message: string, status?: number): Error & { stat
 export function requiredError(messageKey: string): never {
   throw new Error(t(messageKey));
 }
+
+interface UploadWithProgressOptions {
+  accessToken?: string;
+  method?: string;
+  headers?: HeadersInit;
+  body?: Document | XMLHttpRequestBodyInit | null;
+  onProgress?: (percent: number | null) => void;
+}
+
+interface DirectEncryptedUploadOptions {
+  accessToken: string;
+  uploadUrl: string;
+  payload: ArrayBuffer | Uint8Array;
+  fileUploadType: number | null | undefined;
+  unsupportedMessage: string;
+  onProgress?: (percent: number | null) => void;
+}
+
+function toAbsoluteUrl(input: string): string {
+  if (typeof window === 'undefined') return input;
+  return new URL(input, window.location.origin).toString();
+}
+
+function parseXhrHeaders(raw: string): Headers {
+  const headers = new Headers();
+  for (const line of raw.split(/\r?\n/)) {
+    const index = line.indexOf(':');
+    if (index <= 0) continue;
+    const name = line.slice(0, index).trim();
+    const value = line.slice(index + 1).trim();
+    if (name) headers.append(name, value);
+  }
+  return headers;
+}
+
+export async function uploadWithProgress(input: string, options: UploadWithProgressOptions = {}): Promise<Response> {
+  if (typeof XMLHttpRequest === 'undefined') {
+    const headers = new Headers(options.headers || {});
+    if (options.accessToken) headers.set('Authorization', `Bearer ${options.accessToken}`);
+    return fetch(input, {
+      method: options.method || 'POST',
+      headers,
+      body: options.body ?? null,
+    });
+  }
+
+  return new Promise<Response>((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open(options.method || 'POST', toAbsoluteUrl(input), true);
+
+    const headers = new Headers(options.headers || {});
+    if (options.accessToken) headers.set('Authorization', `Bearer ${options.accessToken}`);
+    headers.forEach((value, key) => xhr.setRequestHeader(key, value));
+
+    xhr.upload.onprogress = (event) => {
+      if (!options.onProgress) return;
+      if (!event.lengthComputable || event.total <= 0) {
+        options.onProgress(null);
+        return;
+      }
+      options.onProgress(Math.max(0, Math.min(100, Math.round((event.loaded / event.total) * 100))));
+    };
+
+    xhr.onerror = () => reject(new Error('Network error'));
+    xhr.onabort = () => reject(new Error('Upload aborted'));
+    xhr.onload = () => {
+      options.onProgress?.(100);
+      resolve(
+        new Response(xhr.responseText || null, {
+          status: xhr.status,
+          statusText: xhr.statusText,
+          headers: parseXhrHeaders(xhr.getAllResponseHeaders()),
+        })
+      );
+    };
+
+    xhr.send(options.body ?? null);
+  });
+}
+
+export async function uploadDirectEncryptedPayload(options: DirectEncryptedUploadOptions): Promise<Response> {
+  if (options.fileUploadType !== 1) {
+    throw new Error(options.unsupportedMessage);
+  }
+
+  return uploadWithProgress(options.uploadUrl, {
+    accessToken: options.accessToken,
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/octet-stream',
+      'x-ms-blob-type': 'BlockBlob',
+    },
+    body: options.payload,
+    onProgress: options.onProgress,
+  });
+}

webapp/src/lib/api/vault.ts

@@ -12,6 +12,7 @@ import {
   chunkArray,
   parseErrorMessage,
   parseJson,
+  uploadDirectEncryptedPayload,
   type AuthedFetch,
 } from './shared';
 import { readResponseBytesWithProgress } from '../download';
@@ -199,7 +200,8 @@ export async function uploadCipherAttachment(
   session: SessionState,
   cipherId: string,
   file: File,
-  cipherForKey?: Cipher | null
+  cipherForKey?: Cipher | null,
+  onProgress?: (percent: number | null) => void
 ): Promise<void> {
   if (!session.symEncKey || !session.symMacKey) throw new Error('Vault key unavailable');
   const id = String(cipherId || '').trim();
@@ -233,6 +235,7 @@ export async function uploadCipherAttachment(
     (await parseJson<{
       attachmentId?: string;
       url?: string;
+      fileUploadType?: number;
     }>(metaResp)) || {};
   const attachmentId = String(meta.attachmentId || '').trim();
   const uploadUrl = String(meta.url || '').trim();
@@ -240,12 +243,13 @@ export async function uploadCipherAttachment(
 
   const payload = new ArrayBuffer(encryptedBytes.byteLength);
   new Uint8Array(payload).set(encryptedBytes);
-  const formData = new FormData();
-  formData.set('data', new Blob([payload], { type: 'application/octet-stream' }), encryptedFileName);
-
-  const uploadResp = await authedFetch(uploadUrl, {
-    method: 'POST',
-    body: formData,
+  const uploadResp = await uploadDirectEncryptedPayload({
+    accessToken: session.accessToken,
+    uploadUrl,
+    payload,
+    fileUploadType: meta.fileUploadType,
+    unsupportedMessage: 'Unsupported attachment upload type',
+    onProgress,
   });
   if (!uploadResp.ok) {
     try {

webapp/src/lib/i18n.ts

@@ -291,10 +291,15 @@ const messages: Record<Locale, Record<string, string>> = {
     txt_disable_this_send: "Disable this send",
     txt_disable_totp: "Disable TOTP",
     txt_disable_totp_failed: "Disable TOTP failed",
-    txt_download: "Download",
-    txt_downloading: "Downloading...",
-    txt_downloading_percent: "Downloading {percent}%",
-    txt_download_failed: "Download failed",
+     txt_download: "Download",
+     txt_downloading: "Downloading...",
+     txt_downloading_percent: "Downloading {percent}%",
+     txt_attachment: "Attachment",
+     txt_uploading_attachment_named: "Uploading {name}...",
+     txt_uploading_attachment_named_percent: "Uploading {name} {percent}%",
+     txt_uploading_file_named: "Uploading {name}...",
+     txt_uploading_file_named_percent: "Uploading {name} {percent}%",
+     txt_download_failed: "Download failed",
     txt_edge_browser: "Edge Browser",
     txt_edge_extension: "Edge Extension",
     txt_edit: "Edit",
@@ -928,6 +933,11 @@ const zhCNOverrides: Record<string, string> = {
   txt_download: '下载',
   txt_downloading: '下载中...',
   txt_downloading_percent: '下载中 {percent}%',
+  txt_attachment: '附件',
+  txt_uploading_attachment_named: '正在上传 {name}...',
+  txt_uploading_attachment_named_percent: '正在上传 {name} {percent}%',
+  txt_uploading_file_named: '正在上传 {name}...',
+  txt_uploading_file_named_percent: '正在上传 {name} {percent}%',
   txt_expires_at: '过期时间',
   txt_expires_at_value: '过期于：{value}',
   txt_dash: '-',
@@ -1192,6 +1202,11 @@ zhCNOverrides.txt_passkey_created_at_value = '创建于 {value}';
 zhCNOverrides.txt_attachments = '附件';
 zhCNOverrides.txt_upload_attachments = '上传附件';
 zhCNOverrides.txt_new_attachments = '待上传附件';
+zhCNOverrides.txt_attachment = '附件';
+zhCNOverrides.txt_uploading_attachment_named = '正在上传 {name}...';
+zhCNOverrides.txt_uploading_attachment_named_percent = '正在上传 {name} {percent}%';
+zhCNOverrides.txt_uploading_file_named = '正在上传 {name}...';
+zhCNOverrides.txt_uploading_file_named_percent = '正在上传 {name} {percent}%';
 zhCNOverrides.txt_marked_for_removal_count = '保存后将删除 {count} 个附件';
 messages.en.txt_import = 'Import';
 messages.en.txt_export = 'Export';