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/App.tsx

@@ -913,11 +913,15 @@ export default function App() {
     onDownloadVaultAttachment: vaultSendActions.downloadVaultAttachment,
     downloadingAttachmentKey: vaultSendActions.downloadingAttachmentKey,
     attachmentDownloadPercent: vaultSendActions.attachmentDownloadPercent,
+    uploadingAttachmentName: vaultSendActions.uploadingAttachmentName,
+    attachmentUploadPercent: vaultSendActions.attachmentUploadPercent,
     onRefreshVault: vaultSendActions.refreshVault,
     onCreateSend: vaultSendActions.createSend,
     onUpdateSend: vaultSendActions.updateSend,
     onDeleteSend: vaultSendActions.deleteSend,
     onBulkDeleteSends: vaultSendActions.bulkDeleteSends,
+    uploadingSendFileName: vaultSendActions.uploadingSendFileName,
+    sendUploadPercent: vaultSendActions.sendUploadPercent,
     onChangePassword: accountSecurityActions.changePassword,
     onEnableTotp: async (secret: string, token: string) => {
       await accountSecurityActions.enableTotp(secret, token);

webapp/src/components/AdminPage.tsx

@@ -11,7 +11,7 @@ interface AdminPageProps {
   onRefresh: () => void;
   onCreateInvite: (hours: number) => Promise<void>;
   onDeleteAllInvites: () => Promise<void>;
-  onToggleUserStatus: (userId: string, currentStatus: string) => Promise<void>;
+  onToggleUserStatus: (userId: string, currentStatus: 'active' | 'banned') => Promise<void>;
   onDeleteUser: (userId: string) => Promise<void>;
   onRevokeInvite: (code: string) => Promise<void>;
 }

webapp/src/components/AppMainRoutes.tsx

@@ -67,11 +67,15 @@ export interface AppMainRoutesProps {
   onDownloadVaultAttachment: (cipher: Cipher, attachmentId: string) => Promise<void>;
   downloadingAttachmentKey: string;
   attachmentDownloadPercent: number | null;
+  uploadingAttachmentName: string;
+  attachmentUploadPercent: number | null;
   onRefreshVault: () => Promise<void>;
   onCreateSend: (draft: SendDraft, autoCopyLink: boolean) => Promise<void>;
   onUpdateSend: (send: Send, draft: SendDraft, autoCopyLink: boolean) => Promise<void>;
   onDeleteSend: (send: Send) => Promise<void>;
   onBulkDeleteSends: (ids: string[]) => Promise<void>;
+  uploadingSendFileName: string;
+  sendUploadPercent: number | null;
   onChangePassword: (currentPassword: string, nextPassword: string, nextPassword2: string) => Promise<void>;
   onEnableTotp: (secret: string, token: string) => Promise<void>;
   onOpenDisableTotp: () => void;
@@ -139,6 +143,8 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
             onUpdate={props.onUpdateSend}
             onDelete={props.onDeleteSend}
             onBulkDelete={props.onBulkDeleteSends}
+            uploadingSendFileName={props.uploadingSendFileName}
+            sendUploadPercent={props.sendUploadPercent}
             onNotify={props.onNotify}
           />
         </Suspense>
@@ -171,6 +177,8 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
             onDownloadAttachment={props.onDownloadVaultAttachment}
             downloadingAttachmentKey={props.downloadingAttachmentKey}
             attachmentDownloadPercent={props.attachmentDownloadPercent}
+            uploadingAttachmentName={props.uploadingAttachmentName}
+            attachmentUploadPercent={props.attachmentUploadPercent}
           />
         </Suspense>
       </Route>

webapp/src/components/SendsPage.tsx

@@ -12,6 +12,8 @@ interface SendsPageProps {
   onUpdate: (send: Send, draft: SendDraft, autoCopyLink: boolean) => Promise<void>;
   onDelete: (send: Send) => Promise<void>;
   onBulkDelete: (ids: string[]) => Promise<void>;
+  uploadingSendFileName: string;
+  sendUploadPercent: number | null;
   onNotify: (type: 'success' | 'error', text: string) => void;
 }
 
@@ -79,6 +81,13 @@ export default function SendsPage(props: SendsPageProps) {
       return false;
     }
   });
+  const sendUploadLabel =
+    props.sendUploadPercent == null
+      ? t('txt_uploading_file_named', { name: props.uploadingSendFileName || t('txt_file') })
+      : t('txt_uploading_file_named_percent', {
+          name: props.uploadingSendFileName || t('txt_file'),
+          percent: props.sendUploadPercent,
+        });
 
   useEffect(() => {
     if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
@@ -370,6 +379,7 @@ export default function SendsPage(props: SendsPageProps) {
         {isEditing && draft && (
           <div className="card">
             <h3 className="detail-title">{isCreating ? t('txt_new_send') : t('txt_edit_send')}</h3>
+            {!!props.uploadingSendFileName && <div className="detail-sub">{sendUploadLabel}</div>}
             <div className="field-grid">
               <label className="field field-span-2">
                 <span>{t('txt_name')}</span>

webapp/src/components/VaultPage.tsx

@@ -48,6 +48,8 @@ interface VaultPageProps {
   onDownloadAttachment: (cipher: Cipher, attachmentId: string) => Promise<void>;
   downloadingAttachmentKey: string;
   attachmentDownloadPercent: number | null;
+  uploadingAttachmentName: string;
+  attachmentUploadPercent: number | null;
 }
 
 
@@ -821,6 +823,8 @@ function folderName(id: string | null | undefined): string {
               onDownloadAttachment={(cipher, attachmentId) => void props.onDownloadAttachment(cipher, attachmentId)}
               downloadingAttachmentKey={props.downloadingAttachmentKey}
               attachmentDownloadPercent={props.attachmentDownloadPercent}
+              uploadingAttachmentName={props.uploadingAttachmentName}
+              attachmentUploadPercent={props.attachmentUploadPercent}
               onPatchDraftCustomField={patchDraftCustomField}
               onUpdateDraftCustomFields={updateDraftCustomFields}
               onOpenFieldModal={() => setFieldModalOpen(true)}

webapp/src/components/vault/VaultEditor.tsx

@@ -18,6 +18,8 @@ interface VaultEditorProps {
   localError: string;
   downloadingAttachmentKey: string;
   attachmentDownloadPercent: number | null;
+  uploadingAttachmentName: string;
+  attachmentUploadPercent: number | null;
   onUpdateDraft: (patch: Partial<VaultDraft>) => void;
   onSeedSshDefaults: (force?: boolean) => void;
   onUpdateSshPublicKey: (value: string) => void;
@@ -42,6 +44,13 @@ export default function VaultEditor(props: VaultEditorProps) {
       ? t('txt_downloading')
       : t('txt_downloading_percent', { percent: props.attachmentDownloadPercent });
   };
+  const uploadLabel =
+    props.attachmentUploadPercent == null
+      ? t('txt_uploading_attachment_named', { name: props.uploadingAttachmentName || t('txt_attachment') })
+      : t('txt_uploading_attachment_named_percent', {
+          name: props.uploadingAttachmentName || t('txt_attachment'),
+          percent: props.attachmentUploadPercent,
+        });
 
   return (
     <>
@@ -220,6 +229,7 @@ export default function VaultEditor(props: VaultEditorProps) {
             <Plus size={14} className="btn-icon" />
           </button>
         </div>
+        {!!props.uploadingAttachmentName && <div className="detail-sub">{uploadLabel}</div>}
         {!props.isCreating && props.selectedCipher && props.editExistingAttachments.length > 0 && (
           <div className="attachment-list">
             {props.editExistingAttachments.map((attachment) => {

webapp/src/hooks/useVaultSendActions.ts

@@ -93,6 +93,10 @@ export default function useVaultSendActions(options: UseVaultSendActionsOptions)
   } = options;
   const [downloadingAttachmentKey, setDownloadingAttachmentKey] = useState('');
   const [attachmentDownloadPercent, setAttachmentDownloadPercent] = useState<number | null>(null);
+  const [uploadingAttachmentName, setUploadingAttachmentName] = useState('');
+  const [attachmentUploadPercent, setAttachmentUploadPercent] = useState<number | null>(null);
+  const [uploadingSendFileName, setUploadingSendFileName] = useState('');
+  const [sendUploadPercent, setSendUploadPercent] = useState<number | null>(null);
 
   return useMemo(() => {
     const refetchVault = async () => {
@@ -132,13 +136,18 @@ export default function useVaultSendActions(options: UseVaultSendActionsOptions)
         const file = new File([fileBytes], name, { type: 'application/octet-stream' });
         const cipher = cipherById.get(targetCipherId) || null;
         try {
-          await uploadCipherAttachment(importAuthedFetch, session, targetCipherId, file, cipher);
+          setUploadingAttachmentName(name);
+          setAttachmentUploadPercent(0);
+          await uploadCipherAttachment(importAuthedFetch, session, targetCipherId, file, cipher, setAttachmentUploadPercent);
           imported += 1;
         } catch (error) {
           failed.push({
             fileName: name,
             reason: error instanceof Error ? error.message : t('txt_upload_attachment_failed'),
           });
+        } finally {
+          setUploadingAttachmentName('');
+          setAttachmentUploadPercent(null);
         }
       }
 
@@ -157,13 +166,18 @@ export default function useVaultSendActions(options: UseVaultSendActionsOptions)
         try {
           const created = await createCipher(authedFetch, session, draft);
           for (const file of attachments) {
-            await uploadCipherAttachment(authedFetch, session, created.id, file);
+            setUploadingAttachmentName(file.name);
+            setAttachmentUploadPercent(0);
+            await uploadCipherAttachment(authedFetch, session, created.id, file, undefined, setAttachmentUploadPercent);
           }
           await Promise.all([refetchCiphers(), refetchFolders()]);
           onNotify('success', t('txt_item_created'));
         } catch (error) {
           onNotify('error', error instanceof Error ? error.message : t('txt_create_item_failed'));
           throw error;
+        } finally {
+          setUploadingAttachmentName('');
+          setAttachmentUploadPercent(null);
         }
       },
 
@@ -179,13 +193,18 @@ export default function useVaultSendActions(options: UseVaultSendActionsOptions)
             await deleteCipherAttachment(authedFetch, cipher.id, id);
           }
           for (const file of addFiles) {
-            await uploadCipherAttachment(authedFetch, session, cipher.id, file, cipher);
+            setUploadingAttachmentName(file.name);
+            setAttachmentUploadPercent(0);
+            await uploadCipherAttachment(authedFetch, session, cipher.id, file, cipher, setAttachmentUploadPercent);
           }
           await Promise.all([refetchCiphers(), refetchFolders()]);
           onNotify('success', t('txt_item_updated'));
         } catch (error) {
           onNotify('error', error instanceof Error ? error.message : t('txt_update_item_failed'));
           throw error;
+        } finally {
+          setUploadingAttachmentName('');
+          setAttachmentUploadPercent(null);
         }
       },
 
@@ -316,7 +335,12 @@ export default function useVaultSendActions(options: UseVaultSendActionsOptions)
       async createSend(draft: SendDraft, autoCopyLink: boolean) {
         if (!session) return;
         try {
-          const created = await createSend(authedFetch, session, draft);
+          const fileName = draft.type === 'file' ? String(draft.file?.name || '').trim() : '';
+          if (fileName) {
+            setUploadingSendFileName(fileName);
+            setSendUploadPercent(0);
+          }
+          const created = await createSend(authedFetch, session, draft, fileName ? setSendUploadPercent : undefined);
           await refetchSends();
           if (autoCopyLink && created.key && session.symEncKey && session.symMacKey) {
             const keyPart = await buildSendShareKey(created.key, session.symEncKey, session.symMacKey);
@@ -327,6 +351,9 @@ export default function useVaultSendActions(options: UseVaultSendActionsOptions)
         } catch (error) {
           onNotify('error', error instanceof Error ? error.message : t('txt_create_send_failed'));
           throw error;
+        } finally {
+          setUploadingSendFileName('');
+          setSendUploadPercent(null);
         }
       },
 
@@ -696,9 +723,14 @@ export default function useVaultSendActions(options: UseVaultSendActionsOptions)
       },
       downloadingAttachmentKey,
       attachmentDownloadPercent,
+      uploadingAttachmentName,
+      attachmentUploadPercent,
+      uploadingSendFileName,
+      sendUploadPercent,
     };
   }, [
     attachmentDownloadPercent,
+    attachmentUploadPercent,
     authedFetch,
     defaultKdfIterations,
     downloadingAttachmentKey,
@@ -711,5 +743,8 @@ export default function useVaultSendActions(options: UseVaultSendActionsOptions)
     refetchFolders,
     refetchSends,
     session,
+    sendUploadPercent,
+    uploadingAttachmentName,
+    uploadingSendFileName,
   ]);
 }

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';