@comitor/ui 1.3.3 → 1.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -117,7 +117,13 @@ function useFileUpload(options) {
|
|
|
117
117
|
uppy.on("restriction-failed", ((_file, error) => {
|
|
118
118
|
handlers.current.onError?.({ message: error?.message ?? labels.uploadFailed });
|
|
119
119
|
}));
|
|
120
|
-
for (const file of list)
|
|
120
|
+
for (const file of list) {
|
|
121
|
+
try {
|
|
122
|
+
uppy.addFile({ name: file.name, type: file.type, data: file });
|
|
123
|
+
} catch (error) {
|
|
124
|
+
if (!error?.isRestriction) throw error;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
121
127
|
await uppy.upload();
|
|
122
128
|
} finally {
|
|
123
129
|
setBusy(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/uploader/use-file-upload.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { DEFAULT_FILE_UPLOAD_LABELS, type FileUploadLogicLabels } from \"./file-upload-constants.js\";\n\n/**\n * Phần MÁY MÓC của việc tải tệp, tách khỏi mọi quyết định về hình dạng.\n *\n * ── VÌ SAO TÁCH ───────────────────────────────────────────────────────────────────────────────\n * `FileUpload` vẽ một khung kéo-thả viền đứt nét — đúng cho tài liệu nhiều tệp, **sai** cho một ô\n * ảnh đại diện 56px. Nhưng phần bên dưới thì hai ca cần y hệt nhau: hàng đợi Uppy, tiến độ theo\n * byte, bốn cạm bẫy của `@uppy/xhr-upload`, và việc xoá `input.value` sau mỗi lượt.\n *\n * Đường cắt này không phải một trừu tượng mới bịa ra: trong `file-upload.tsx` bản 1.2.0, toàn bộ\n * khối `start` + `useEffect` dọn dẹp + ba `useState` **không chạm một dòng JSX nào**, còn JSX thì\n * chỉ đọc `busy`/`percent`/`dragging`. Đây là việc đặt tên cho một ranh giới đã có sẵn.\n *\n * ⚠ `inputProps` và `dropProps` là **prop-getter**: chỗ gọi phải rải chúng lên đúng phần tử. Thiếu\n * `<input {...inputProps} />` thì `open()` không làm gì, và triệu chứng là một nút bấm im lặng.\n * `dropProps` đã tự gọi `preventDefault` — lỗi kinh điển khi để app tự viết.\n */\n/**\n * Bề mặt Uppy mà component này dùng — khai TAY, không import kiểu thật.\n *\n * Hai lý do, cả hai đều thực dụng: kiểu thật của `Uppy` mang generic `<Meta, Body>` và đổi hình\n * dạng giữa các bản major; và `@uppy/core` là peer TUỲ CHỌN, nên `import type` từ nó sẽ làm\n * `tsc` của một app KHÔNG cài Uppy báo đỏ ở một file họ không hề dùng.\n *\n * Cái giá: nếu Uppy đổi tên một phương thức thì lỗi lộ ra lúc CHẠY, không lúc biên dịch. Bù lại\n * bằng `scripts/smoke-entries.mjs` — nó nạp thật entry này ở mỗi lần publish.\n */\ninterface UppyLike {\n addFile: (file: { name: string; type: string; data: File }) => void;\n upload: () => Promise<unknown>;\n cancelAll: () => void;\n destroy: () => void;\n on: (event: string, handler: (...args: never[]) => void) => void;\n use: (plugin: unknown, options?: unknown) => unknown;\n}\n\n/**\n * Nạp Uppy LƯỜI — chỉ khi người dùng thật sự chọn tệp.\n *\n * `import()` động giữ Uppy ra khỏi bundle của lượt tải trang đầu tiên. Với một màn hồ sơ mà đa số\n * người mở ra chỉ để xem, đó là toàn bộ chi phí của Uppy bị hoãn tới lúc nó thật sự có việc.\n *\n * ⚠ Hai gói này là **peer TUỲ CHỌN**. App không cài mà lại render component này thì `import()` sẽ\n * hỏng — nên lỗi được bắt và trả về qua `onError` với thông điệp nói đúng tên gói phải cài, thay vì\n * một `ChunkLoadError` không gợi gì.\n */\nasync function loadUppy(): Promise<{ Uppy: new (o: unknown) => UppyLike; XHRUpload: unknown } | null> {\n try {\n const [core, xhr] = await Promise.all([import(\"@uppy/core\"), import(\"@uppy/xhr-upload\")]);\n return {\n // `as unknown as` là bắt buộc: kiểu thật của Uppy có generic `<Meta, Body>` mà `UppyLike`\n // cố ý không mang. Xem ghi chú ở `UppyLike` về việc vì sao gói này không dùng kiểu thật.\n Uppy: (core.default ?? (core as unknown as { Uppy: unknown }).Uppy) as unknown as new (o: unknown) => UppyLike,\n XHRUpload: xhr.default ?? xhr\n };\n } catch {\n return null;\n }\n}\n\nexport interface UseFileUploadOptions<T = unknown> {\n /** Đường dẫn endpoint nhận multipart, ví dụ `/api/account/avatar`. */\n endpoint: string;\n /** Tên trường trong `FormData`. Mặc định `\"file\"`. */\n fieldName?: string;\n maxFileSize: number;\n allowedFileTypes: string[];\n maxNumberOfFiles?: number;\n onUploaded: (result: FileUploadResult<T>) => void;\n onError?: (error: { code?: string; status?: number; message: string }) => void;\n /**\n * CHỈ hai chuỗi mà phần máy móc thật sự dùng.\n *\n * Cố ý KHÔNG nhận cả `FileUploadLabels`: ba chuỗi còn lại (`dropHint`/`choose`/`uploading`) là\n * của bố cục, và để chúng lọt vào đây là mời người viết truyền một prop không bao giờ chạy.\n */\n labels?: Partial<FileUploadLogicLabels>;\n disabled?: boolean;\n}\n\n/** Kết quả một tệp tải xong: thân phản hồi JSON của endpoint app. */\nexport interface FileUploadResult<T = unknown> {\n body: T;\n fileName: string;\n}\n\nexport interface UseFileUploadResult {\n /** Mở hộp chọn tệp. Cần `<input {...inputProps} />` có mặt trong cây. */\n open: () => void;\n /** Bắt đầu tải một danh sách tệp có sẵn (dùng cho kéo-thả tự xử lý). */\n start: (files: FileList | File[]) => void;\n /** Huỷ lượt đang chạy. */\n cancel: () => void;\n inputProps: {\n ref: React.RefObject<HTMLInputElement | null>;\n type: \"file\";\n accept: string;\n multiple: boolean;\n disabled: boolean;\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n };\n dropProps: {\n onDragOver: (event: React.DragEvent) => void;\n onDragLeave: () => void;\n onDrop: (event: React.DragEvent) => void;\n };\n /** Có tệp đang được rê TRÊN khối này. */\n dragging: boolean;\n busy: boolean;\n /** 0–100. */\n percent: number;\n}\n\nexport function useFileUpload<T = unknown>(options: UseFileUploadOptions<T>): UseFileUploadResult {\n const {\n endpoint,\n fieldName = \"file\",\n maxFileSize,\n allowedFileTypes,\n maxNumberOfFiles = 1,\n onUploaded,\n onError,\n disabled = false\n } = options;\n const labels = { ...DEFAULT_FILE_UPLOAD_LABELS, ...options.labels };\n\n const inputRef = useRef<HTMLInputElement>(null);\n const [busy, setBusy] = useState(false);\n const [percent, setPercent] = useState(0);\n const [dragging, setDragging] = useState(false);\n\n /*\n * `onUploaded`/`onError` đi qua ref: chỗ gọi thường truyền hàm mới ở mỗi lần render, và để chúng\n * trong mảng phụ thuộc là dựng lại Uppy sau mỗi phím gõ vào biểu mẫu bên cạnh.\n */\n const handlers = useRef({ onUploaded, onError });\n handlers.current = { onUploaded, onError };\n\n const uppyRef = useRef<UppyLike | null>(null);\n useEffect(() => {\n return () => {\n uppyRef.current?.destroy();\n uppyRef.current = null;\n };\n }, []);\n\n const start = useCallback(\n async (files: FileList | File[]) => {\n const list = Array.from(files).slice(0, maxNumberOfFiles);\n if (list.length === 0) return;\n\n setBusy(true);\n setPercent(0);\n try {\n const mod = await loadUppy();\n if (!mod) {\n handlers.current.onError?.({ message: labels.missingDependency });\n return;\n }\n\n /*\n * Dựng MỘT Uppy cho MỘT lượt tải rồi huỷ. Giữ lại một instance dài hạn nghe hấp dẫn hơn,\n * nhưng Uppy nhớ cả những tệp đã hỏng ở lượt trước — chọn lại đúng tệp đó sẽ bị chặn vì\n * \"trùng\", và triệu chứng là một nút bấm không làm gì.\n */\n uppyRef.current?.destroy();\n const uppy = new mod.Uppy({\n autoProceed: false,\n restrictions: { maxNumberOfFiles, maxFileSize, allowedFileTypes }\n });\n uppyRef.current = uppy;\n\n /*\n * Chỗ giữ lỗi của lượt gọi gần nhất. `upload-error` của Uppy KHÔNG mang thân phản hồi —\n * thứ nó ném là `new NetworkError(xhr.statusText, xhr)`, mà trên HTTP/2 `statusText` là\n * chuỗi RỖNG. Nên `code` phải được nhặt ở `onAfterResponse`, nơi còn nhìn thấy `xhr`.\n */\n const lastError: { code?: string; status?: number; message?: string } = {};\n\n uppy.use(mod.XHRUpload, {\n endpoint,\n fieldName,\n method: \"POST\",\n // Cookie phiên là cách Comitor xác thực mọi route tự viết — thiếu dòng này là 401.\n withCredentials: true,\n\n /*\n * ⚠ CHỈ THỬ LẠI LỖI 5xx.\n *\n * Mặc định của Uppy là `shouldRetry = () => true` với `retries = 3` (đọc\n * `@uppy/core/lib/utils/fetcher.js`), tức MỌI phản hồi không-2xx bị gửi lại ba lần. Hậu\n * quả đo được bằng chính hợp đồng của Comitor:\n * · một ảnh sai định dạng 2 MB → BỐN lượt POST 2 MB, tất cả đều biết chắc sẽ hỏng;\n * · một **429** của `lib/api/rate-limit.ts` cũng bị thử lại, mỗi lần tiêu thêm một đơn\n * vị hạn mức và bỏ qua `Retry-After` — client tự đào sâu cái hố nó vừa rơi vào.\n * 4xx là \"yêu cầu sai, gửi lại cũng thế\"; chỉ 5xx mới đáng thử lại.\n */\n shouldRetry: (xhr: XMLHttpRequest) => xhr.status >= 500,\n\n /*\n * ⚠ `getResponseError` KHÔNG TỒN TẠI — nó chỉ còn trong một dòng comment cũ ở\n * `@uppy/xhr-upload/lib/index.js`, không có trong `XhrUploadOpts`, và không được đọc ở\n * đâu cả. Truyền nó vào là viết một callback không bao giờ chạy. Đường thật là\n * `onAfterResponse`, thứ XHRUpload có forward xuống fetcher.\n */\n onAfterResponse: (xhr: XMLHttpRequest) => {\n if (xhr.status >= 200 && xhr.status < 300) return;\n lastError.status = xhr.status;\n try {\n const parsed = JSON.parse(xhr.responseText) as { error?: { code?: string; message?: string } };\n lastError.code = parsed.error?.code;\n lastError.message = parsed.error?.message;\n } catch {\n // Phản hồi không phải JSON (proxy trả HTML, 413 của tầng mạng…). Giữ `status` là đủ.\n }\n },\n\n /*\n * ⚠ KHÔNG gửi meta kèm tệp.\n *\n * Mặc định `allowedMetaFields: true` ghi MỌI meta vào cùng `FormData`, và nó ghi TRƯỚC\n * khi append tệp. Route của Comitor đọc `form.get(\"file\")` — hàm đó trả phần tử ĐẦU TIÊN\n * cùng tên. Nên chỉ cần một khoá meta tên `file` là route nhận về một chuỗi,\n * `file instanceof File` thành false, và nó trả 400 \"Thiếu tệp ảnh\" trong khi tệp vẫn\n * nằm nguyên trong request. Mảng rỗng đóng hẳn đường đó.\n */\n allowedMetaFields: []\n });\n\n uppy.on(\"progress\", ((value: number) => setPercent(value)) as never);\n uppy.on(\"upload-success\", ((file: { name?: string } | undefined, response: { body?: T }) => {\n handlers.current.onUploaded({ body: response?.body as T, fileName: file?.name ?? \"\" });\n }) as never);\n uppy.on(\"upload-error\", ((_file: unknown, error: Error) => {\n // `lastError` là nguồn duy nhất có `code` — xem `onAfterResponse` ở trên.\n handlers.current.onError?.({\n code: lastError.code,\n status: lastError.status,\n message: lastError.message ?? error?.message ?? labels.uploadFailed\n });\n }) as never);\n /*\n * `restriction-failed` là đường RIÊNG, không đi qua `upload-error`. Bỏ sót nó thì một tệp\n * quá lớn hay sai định dạng bị Uppy chặn trong im lặng — người dùng bấm rồi không thấy gì.\n */\n uppy.on(\"restriction-failed\", ((_file: unknown, error: Error) => {\n handlers.current.onError?.({ message: error?.message ?? labels.uploadFailed });\n }) as never);\n\n for (const file of list) uppy.addFile({ name: file.name, type: file.type, data: file });\n await uppy.upload();\n } finally {\n setBusy(false);\n setPercent(0);\n /*\n * Xoá giá trị input: chọn LẠI cùng một tệp sau một lần lỗi sẽ KHÔNG bắn `change` nếu giá\n * trị không đổi — và triệu chứng là thử lại im lặng không làm gì.\n */\n if (inputRef.current) inputRef.current.value = \"\";\n }\n },\n [\n endpoint,\n fieldName,\n maxFileSize,\n allowedFileTypes,\n maxNumberOfFiles,\n labels.missingDependency,\n labels.uploadFailed\n ]\n );\n\n const cancel = useCallback(() => {\n uppyRef.current?.cancelAll();\n }, []);\n\n return {\n open: () => inputRef.current?.click(),\n start,\n cancel,\n inputProps: {\n ref: inputRef,\n type: \"file\",\n accept: allowedFileTypes.join(\",\"),\n multiple: maxNumberOfFiles > 1,\n disabled: disabled || busy,\n onChange: (event) => {\n if (event.target.files) void start(event.target.files);\n }\n },\n dropProps: {\n onDragOver: (event) => {\n // `preventDefault` là BẮT BUỘC — thiếu nó trình duyệt mở tệp thay vì bắn `onDrop`.\n event.preventDefault();\n if (!disabled && !busy) setDragging(true);\n },\n onDragLeave: () => setDragging(false),\n onDrop: (event) => {\n event.preventDefault();\n setDragging(false);\n if (!disabled && !busy && event.dataTransfer.files.length > 0) void start(event.dataTransfer.files);\n }\n },\n dragging,\n busy,\n percent\n };\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/uploader/use-file-upload.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { DEFAULT_FILE_UPLOAD_LABELS, type FileUploadLogicLabels } from \"./file-upload-constants.js\";\n\n/**\n * Phần MÁY MÓC của việc tải tệp, tách khỏi mọi quyết định về hình dạng.\n *\n * ── VÌ SAO TÁCH ───────────────────────────────────────────────────────────────────────────────\n * `FileUpload` vẽ một khung kéo-thả viền đứt nét — đúng cho tài liệu nhiều tệp, **sai** cho một ô\n * ảnh đại diện 56px. Nhưng phần bên dưới thì hai ca cần y hệt nhau: hàng đợi Uppy, tiến độ theo\n * byte, bốn cạm bẫy của `@uppy/xhr-upload`, và việc xoá `input.value` sau mỗi lượt.\n *\n * Đường cắt này không phải một trừu tượng mới bịa ra: trong `file-upload.tsx` bản 1.2.0, toàn bộ\n * khối `start` + `useEffect` dọn dẹp + ba `useState` **không chạm một dòng JSX nào**, còn JSX thì\n * chỉ đọc `busy`/`percent`/`dragging`. Đây là việc đặt tên cho một ranh giới đã có sẵn.\n *\n * ⚠ `inputProps` và `dropProps` là **prop-getter**: chỗ gọi phải rải chúng lên đúng phần tử. Thiếu\n * `<input {...inputProps} />` thì `open()` không làm gì, và triệu chứng là một nút bấm im lặng.\n * `dropProps` đã tự gọi `preventDefault` — lỗi kinh điển khi để app tự viết.\n */\n/**\n * Bề mặt Uppy mà component này dùng — khai TAY, không import kiểu thật.\n *\n * Hai lý do, cả hai đều thực dụng: kiểu thật của `Uppy` mang generic `<Meta, Body>` và đổi hình\n * dạng giữa các bản major; và `@uppy/core` là peer TUỲ CHỌN, nên `import type` từ nó sẽ làm\n * `tsc` của một app KHÔNG cài Uppy báo đỏ ở một file họ không hề dùng.\n *\n * Cái giá: nếu Uppy đổi tên một phương thức thì lỗi lộ ra lúc CHẠY, không lúc biên dịch. Bù lại\n * bằng `scripts/smoke-entries.mjs` — nó nạp thật entry này ở mỗi lần publish.\n */\ninterface UppyLike {\n addFile: (file: { name: string; type: string; data: File }) => void;\n upload: () => Promise<unknown>;\n cancelAll: () => void;\n destroy: () => void;\n on: (event: string, handler: (...args: never[]) => void) => void;\n use: (plugin: unknown, options?: unknown) => unknown;\n}\n\n/**\n * Nạp Uppy LƯỜI — chỉ khi người dùng thật sự chọn tệp.\n *\n * `import()` động giữ Uppy ra khỏi bundle của lượt tải trang đầu tiên. Với một màn hồ sơ mà đa số\n * người mở ra chỉ để xem, đó là toàn bộ chi phí của Uppy bị hoãn tới lúc nó thật sự có việc.\n *\n * ⚠ Hai gói này là **peer TUỲ CHỌN**. App không cài mà lại render component này thì `import()` sẽ\n * hỏng — nên lỗi được bắt và trả về qua `onError` với thông điệp nói đúng tên gói phải cài, thay vì\n * một `ChunkLoadError` không gợi gì.\n */\nasync function loadUppy(): Promise<{ Uppy: new (o: unknown) => UppyLike; XHRUpload: unknown } | null> {\n try {\n const [core, xhr] = await Promise.all([import(\"@uppy/core\"), import(\"@uppy/xhr-upload\")]);\n return {\n // `as unknown as` là bắt buộc: kiểu thật của Uppy có generic `<Meta, Body>` mà `UppyLike`\n // cố ý không mang. Xem ghi chú ở `UppyLike` về việc vì sao gói này không dùng kiểu thật.\n Uppy: (core.default ?? (core as unknown as { Uppy: unknown }).Uppy) as unknown as new (o: unknown) => UppyLike,\n XHRUpload: xhr.default ?? xhr\n };\n } catch {\n return null;\n }\n}\n\nexport interface UseFileUploadOptions<T = unknown> {\n /** Đường dẫn endpoint nhận multipart, ví dụ `/api/account/avatar`. */\n endpoint: string;\n /** Tên trường trong `FormData`. Mặc định `\"file\"`. */\n fieldName?: string;\n maxFileSize: number;\n allowedFileTypes: string[];\n maxNumberOfFiles?: number;\n onUploaded: (result: FileUploadResult<T>) => void;\n onError?: (error: { code?: string; status?: number; message: string }) => void;\n /**\n * CHỈ hai chuỗi mà phần máy móc thật sự dùng.\n *\n * Cố ý KHÔNG nhận cả `FileUploadLabels`: ba chuỗi còn lại (`dropHint`/`choose`/`uploading`) là\n * của bố cục, và để chúng lọt vào đây là mời người viết truyền một prop không bao giờ chạy.\n */\n labels?: Partial<FileUploadLogicLabels>;\n disabled?: boolean;\n}\n\n/** Kết quả một tệp tải xong: thân phản hồi JSON của endpoint app. */\nexport interface FileUploadResult<T = unknown> {\n body: T;\n fileName: string;\n}\n\nexport interface UseFileUploadResult {\n /** Mở hộp chọn tệp. Cần `<input {...inputProps} />` có mặt trong cây. */\n open: () => void;\n /** Bắt đầu tải một danh sách tệp có sẵn (dùng cho kéo-thả tự xử lý). */\n start: (files: FileList | File[]) => void;\n /** Huỷ lượt đang chạy. */\n cancel: () => void;\n inputProps: {\n ref: React.RefObject<HTMLInputElement | null>;\n type: \"file\";\n accept: string;\n multiple: boolean;\n disabled: boolean;\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n };\n dropProps: {\n onDragOver: (event: React.DragEvent) => void;\n onDragLeave: () => void;\n onDrop: (event: React.DragEvent) => void;\n };\n /** Có tệp đang được rê TRÊN khối này. */\n dragging: boolean;\n busy: boolean;\n /** 0–100. */\n percent: number;\n}\n\nexport function useFileUpload<T = unknown>(options: UseFileUploadOptions<T>): UseFileUploadResult {\n const {\n endpoint,\n fieldName = \"file\",\n maxFileSize,\n allowedFileTypes,\n maxNumberOfFiles = 1,\n onUploaded,\n onError,\n disabled = false\n } = options;\n const labels = { ...DEFAULT_FILE_UPLOAD_LABELS, ...options.labels };\n\n const inputRef = useRef<HTMLInputElement>(null);\n const [busy, setBusy] = useState(false);\n const [percent, setPercent] = useState(0);\n const [dragging, setDragging] = useState(false);\n\n /*\n * `onUploaded`/`onError` đi qua ref: chỗ gọi thường truyền hàm mới ở mỗi lần render, và để chúng\n * trong mảng phụ thuộc là dựng lại Uppy sau mỗi phím gõ vào biểu mẫu bên cạnh.\n */\n const handlers = useRef({ onUploaded, onError });\n handlers.current = { onUploaded, onError };\n\n const uppyRef = useRef<UppyLike | null>(null);\n useEffect(() => {\n return () => {\n uppyRef.current?.destroy();\n uppyRef.current = null;\n };\n }, []);\n\n const start = useCallback(\n async (files: FileList | File[]) => {\n const list = Array.from(files).slice(0, maxNumberOfFiles);\n if (list.length === 0) return;\n\n setBusy(true);\n setPercent(0);\n try {\n const mod = await loadUppy();\n if (!mod) {\n handlers.current.onError?.({ message: labels.missingDependency });\n return;\n }\n\n /*\n * Dựng MỘT Uppy cho MỘT lượt tải rồi huỷ. Giữ lại một instance dài hạn nghe hấp dẫn hơn,\n * nhưng Uppy nhớ cả những tệp đã hỏng ở lượt trước — chọn lại đúng tệp đó sẽ bị chặn vì\n * \"trùng\", và triệu chứng là một nút bấm không làm gì.\n */\n uppyRef.current?.destroy();\n const uppy = new mod.Uppy({\n autoProceed: false,\n restrictions: { maxNumberOfFiles, maxFileSize, allowedFileTypes }\n });\n uppyRef.current = uppy;\n\n /*\n * Chỗ giữ lỗi của lượt gọi gần nhất. `upload-error` của Uppy KHÔNG mang thân phản hồi —\n * thứ nó ném là `new NetworkError(xhr.statusText, xhr)`, mà trên HTTP/2 `statusText` là\n * chuỗi RỖNG. Nên `code` phải được nhặt ở `onAfterResponse`, nơi còn nhìn thấy `xhr`.\n */\n const lastError: { code?: string; status?: number; message?: string } = {};\n\n uppy.use(mod.XHRUpload, {\n endpoint,\n fieldName,\n method: \"POST\",\n // Cookie phiên là cách Comitor xác thực mọi route tự viết — thiếu dòng này là 401.\n withCredentials: true,\n\n /*\n * ⚠ CHỈ THỬ LẠI LỖI 5xx.\n *\n * Mặc định của Uppy là `shouldRetry = () => true` với `retries = 3` (đọc\n * `@uppy/core/lib/utils/fetcher.js`), tức MỌI phản hồi không-2xx bị gửi lại ba lần. Hậu\n * quả đo được bằng chính hợp đồng của Comitor:\n * · một ảnh sai định dạng 2 MB → BỐN lượt POST 2 MB, tất cả đều biết chắc sẽ hỏng;\n * · một **429** của `lib/api/rate-limit.ts` cũng bị thử lại, mỗi lần tiêu thêm một đơn\n * vị hạn mức và bỏ qua `Retry-After` — client tự đào sâu cái hố nó vừa rơi vào.\n * 4xx là \"yêu cầu sai, gửi lại cũng thế\"; chỉ 5xx mới đáng thử lại.\n */\n shouldRetry: (xhr: XMLHttpRequest) => xhr.status >= 500,\n\n /*\n * ⚠ `getResponseError` KHÔNG TỒN TẠI — nó chỉ còn trong một dòng comment cũ ở\n * `@uppy/xhr-upload/lib/index.js`, không có trong `XhrUploadOpts`, và không được đọc ở\n * đâu cả. Truyền nó vào là viết một callback không bao giờ chạy. Đường thật là\n * `onAfterResponse`, thứ XHRUpload có forward xuống fetcher.\n */\n onAfterResponse: (xhr: XMLHttpRequest) => {\n if (xhr.status >= 200 && xhr.status < 300) return;\n lastError.status = xhr.status;\n try {\n const parsed = JSON.parse(xhr.responseText) as { error?: { code?: string; message?: string } };\n lastError.code = parsed.error?.code;\n lastError.message = parsed.error?.message;\n } catch {\n // Phản hồi không phải JSON (proxy trả HTML, 413 của tầng mạng…). Giữ `status` là đủ.\n }\n },\n\n /*\n * ⚠ KHÔNG gửi meta kèm tệp.\n *\n * Mặc định `allowedMetaFields: true` ghi MỌI meta vào cùng `FormData`, và nó ghi TRƯỚC\n * khi append tệp. Route của Comitor đọc `form.get(\"file\")` — hàm đó trả phần tử ĐẦU TIÊN\n * cùng tên. Nên chỉ cần một khoá meta tên `file` là route nhận về một chuỗi,\n * `file instanceof File` thành false, và nó trả 400 \"Thiếu tệp ảnh\" trong khi tệp vẫn\n * nằm nguyên trong request. Mảng rỗng đóng hẳn đường đó.\n */\n allowedMetaFields: []\n });\n\n uppy.on(\"progress\", ((value: number) => setPercent(value)) as never);\n uppy.on(\"upload-success\", ((file: { name?: string } | undefined, response: { body?: T }) => {\n handlers.current.onUploaded({ body: response?.body as T, fileName: file?.name ?? \"\" });\n }) as never);\n uppy.on(\"upload-error\", ((_file: unknown, error: Error) => {\n // `lastError` là nguồn duy nhất có `code` — xem `onAfterResponse` ở trên.\n handlers.current.onError?.({\n code: lastError.code,\n status: lastError.status,\n message: lastError.message ?? error?.message ?? labels.uploadFailed\n });\n }) as never);\n /*\n * `restriction-failed` là đường RIÊNG, không đi qua `upload-error`. Bỏ sót nó thì một tệp\n * quá lớn hay sai định dạng bị Uppy chặn trong im lặng — người dùng bấm rồi không thấy gì.\n */\n uppy.on(\"restriction-failed\", ((_file: unknown, error: Error) => {\n handlers.current.onError?.({ message: error?.message ?? labels.uploadFailed });\n }) as never);\n\n /*\n * ⚠ `addFile` BÁO LỖI HẠN CHẾ HAI LẦN, và lần thứ hai là một cú ném.\n *\n * Đọc `@uppy/core@6.0.0` (`Uppy.js:614-619`): nó `#informAndEmit(restrictionErrors)` —\n * tức bắn `restriction-failed` mà ta đã bắt ở trên — RỒI `throw errors[0]`. Vì `start`\n * được gọi bằng `void start(...)` ở `inputProps.onChange` và `dropProps.onDrop`, cú ném\n * ấy thành **unhandled promise rejection**: chọn nhầm định dạng tệp — một thao tác hoàn\n * toàn bình thường — in một lỗi đỏ ra console mỗi lần.\n *\n * Đó không phải chuyện thẩm mỹ. Một kênh cảnh báo lúc nào cũng kêu là kênh sẽ bị bỏ qua,\n * kể cả hôm nó kêu vì một lỗi thật. Nuốt ĐÚNG lỗi hạn chế (`isRestriction`) vì nó đã được\n * báo qua đường sự kiện; mọi lỗi khác vẫn ném tiếp để `catch` bên ngoài xử lý.\n */\n for (const file of list) {\n try {\n uppy.addFile({ name: file.name, type: file.type, data: file });\n } catch (error) {\n if (!(error as { isRestriction?: boolean })?.isRestriction) throw error;\n }\n }\n await uppy.upload();\n } finally {\n setBusy(false);\n setPercent(0);\n /*\n * Xoá giá trị input: chọn LẠI cùng một tệp sau một lần lỗi sẽ KHÔNG bắn `change` nếu giá\n * trị không đổi — và triệu chứng là thử lại im lặng không làm gì.\n */\n if (inputRef.current) inputRef.current.value = \"\";\n }\n },\n [\n endpoint,\n fieldName,\n maxFileSize,\n allowedFileTypes,\n maxNumberOfFiles,\n labels.missingDependency,\n labels.uploadFailed\n ]\n );\n\n const cancel = useCallback(() => {\n uppyRef.current?.cancelAll();\n }, []);\n\n return {\n open: () => inputRef.current?.click(),\n start,\n cancel,\n inputProps: {\n ref: inputRef,\n type: \"file\",\n accept: allowedFileTypes.join(\",\"),\n multiple: maxNumberOfFiles > 1,\n disabled: disabled || busy,\n onChange: (event) => {\n if (event.target.files) void start(event.target.files);\n }\n },\n dropProps: {\n onDragOver: (event) => {\n // `preventDefault` là BẮT BUỘC — thiếu nó trình duyệt mở tệp thay vì bắn `onDrop`.\n event.preventDefault();\n if (!disabled && !busy) setDragging(true);\n },\n onDragLeave: () => setDragging(false),\n onDrop: (event) => {\n event.preventDefault();\n setDragging(false);\n if (!disabled && !busy && event.dataTransfer.files.length > 0) void start(event.dataTransfer.files);\n }\n },\n dragging,\n busy,\n percent\n };\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED