@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/es/components/uploadDrawer/fileUploadDrawerListProgressButton.js

@@ -0,0 +1,54 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { CheckOutlined, LoadingOutlined, CloseOutlined, PauseOutlined } from '@ant-design/icons';
+import { Button, Progress } from 'antd';
+import { useState } from 'react';
+import { FILE_UPLOAD_STATUS } from './utils/constant.js';
+import 'tslib';
+import { useProgressButtonRef } from './hooks/useProgressButtonRef.js';
+
+// 进度条样式属性
+const progressStyleProps = {
+    size: 32,
+    strokeWidth: 12,
+    type: 'circle',
+    strokeLinecap: 'butt',
+};
+function FileUploadDrawerListProgressButton({ percent, status, onClick, }) {
+    // 使用自定义 hook 获取按钮引用和悬停状态
+    const { progressButtonRef, buttonInHover } = useProgressButtonRef();
+    // 状态用于跟踪是否正在取消上传
+    const [isCanceling, setIsCanceling] = useState(false);
+    // 根据不同的上传状态渲染不同的组件
+    if (status === FILE_UPLOAD_STATUS.FINISHED) {
+        // 上传完成时显示绿色对勾
+        return jsx(CheckOutlined, { className: "text-green-600 text-2xl h-8" });
+    }
+    if (status === FILE_UPLOAD_STATUS.FAILED) {
+        // 上传失败时显示红色叉号或加载图标
+        return (jsx(Fragment, { children: isCanceling ? (jsx(LoadingOutlined, { className: "text-red-600 text-2xl h-8" })) : (jsx(CloseOutlined, { className: "text-red-600 text-2xl h-8", onClick: () => {
+                    onClick();
+                    setIsCanceling(true);
+                } })) }));
+    }
+    // 默认情况下显示进度按钮
+    return (jsx(Button, { type: "text", shape: "circle", disabled: isCanceling, ref: progressButtonRef, title: status === FILE_UPLOAD_STATUS.PAUSED ? '继续下载' : '取消下载', onClick: () => {
+            onClick();
+            if (status === FILE_UPLOAD_STATUS.UPLOADING) {
+                setIsCanceling(true);
+            }
+        }, children: jsx(Progress, Object.assign({ percent: percent }, progressStyleProps, { strokeColor: isCanceling ? '#f0a020' : '#19a1fe', format: progressInner })) }));
+    // 根据不同状态渲染进度条内部的图标
+    function progressInner() {
+        if (status === FILE_UPLOAD_STATUS.PAUSED) {
+            return jsx(PauseOutlined, {});
+        }
+        if (isCanceling) {
+            return jsx(LoadingOutlined, { className: "text-yellow-500" });
+        }
+        if (buttonInHover) {
+            return jsx(CloseOutlined, {});
+        }
+    }
+}
+
+export { FileUploadDrawerListProgressButton as default };

package/es/components/uploadDrawer/hooks/useCancelUpload.js

@@ -0,0 +1,37 @@
+import { __awaiter } from 'tslib';
+import { FILE_UPLOAD_STATUS } from '../utils/constant.js';
+import { deleteFileInStore } from '../utils/fileDB/deleteFileInStore.js';
+import { useContext } from 'react';
+import { UploadStoreDispatchContext } from '../UploadStoreProvider.js';
+import { App } from 'antd';
+import { FileUploadDrawerContext } from '../index.js';
+
+function useCancelUpload() {
+    const { message } = App.useApp();
+    const { identifier, onCancelUpload } = useContext(FileUploadDrawerContext);
+    const uploadsDispatch = useContext(UploadStoreDispatchContext);
+    return function cancelUpload(file) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { fileName, uploadId } = file;
+            if (!uploadId) {
+                deleteFile(file);
+                return;
+            }
+            const result = yield onCancelUpload(fileName, uploadId);
+            if (result.status) {
+                deleteFile(file);
+            }
+            else {
+                message.error(result.reason || '取消失败');
+            }
+        });
+    };
+    function deleteFile(file) {
+        file.fileStatus = FILE_UPLOAD_STATUS.CANCELED;
+        deleteFileInStore(String(identifier), file.fileName);
+        Object.values(file.cancelControllers).forEach((cc) => cc.abort());
+        uploadsDispatch({ type: 'remove_file', identifier, file });
+    }
+}
+
+export { useCancelUpload };

package/es/components/uploadDrawer/hooks/useFilterFiles.js

@@ -0,0 +1,107 @@
+import { __awaiter } from 'tslib';
+import { App } from 'antd';
+import { useContext } from 'react';
+import { GB } from '../utils/constant.js';
+import { calcDisplaySize } from '../utils/calcDisplaySize.js';
+import { UploadStoreContext } from '../UploadStoreProvider.js';
+import { FileUploadDrawerContext } from '../index.js';
+
+/**
+ * useFilterFiles hook用于过滤上传文件
+ * 主要功能:
+ * 1. 检查文件大小是否超过限制
+ * 2. 检查是否有重复文件名
+ */
+function useFilterFiles() {
+    const { message, modal } = App.useApp();
+    const uploadStore = useContext(UploadStoreContext);
+    const { identifier, maxSizePerFile = 10 * GB, uploadHistory = [], root, } = useContext(FileUploadDrawerContext);
+    return function filterFiles(files) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // 获取超过大小限制的文件
+            const oversizedFiles = getOversizedFiles(files);
+            // 检查重复文件并询问用户是否覆盖
+            const [shouldOverwrite, duplicateFiles] = yield checkForDuplicates(files);
+            // 添加注释说明函数的返回值
+            // 返回值是一个元组，包含两个 Set:
+            // 1. 第一个 Set 包含需要移除的文件名（超大文件或用户选择不覆盖的重复文件）
+            // 2. 第二个 Set 包含用户选择覆盖的重复文件名
+            return shouldOverwrite
+                ? [new Set(oversizedFiles), new Set(duplicateFiles)]
+                : [new Set([...oversizedFiles, ...duplicateFiles]), new Set()];
+        });
+    };
+    /**
+     * 检查文件大小并返回超过限制的文件名列表
+     */
+    function getOversizedFiles(files) {
+        const oversizedFiles = files.filter((file) => file.size > maxSizePerFile).map((file) => file.name);
+        if (oversizedFiles.length) {
+            const maxSizeDisplay = calcDisplaySize(maxSizePerFile);
+            message.warning(`以下文件大小超过${maxSizeDisplay}：${oversizedFiles.join(', ')}`);
+        }
+        return oversizedFiles;
+    }
+    /**
+     * 检查重复文件并询问用户是否覆盖
+     * @returns [是否覆盖, 重复文件名列表]
+     */
+    function checkForDuplicates(files) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const duplicateFiles = [
+                ...checkForDuplicatesInUploads(files, uploadStore[identifier], root),
+                ...checkForDuplicatesInUploadHistory(files, uploadHistory),
+            ];
+            // duplicateFiles 现在包含了所有重复的文件或文件夹的名称
+            if (duplicateFiles.length) {
+                const userChoice = yield modal.confirm({
+                    title: '发现同名文件，是否覆盖？',
+                    okText: '覆盖',
+                    cancelText: '取消',
+                });
+                return [userChoice, duplicateFiles];
+            }
+            return [true, []];
+        });
+    }
+}
+function checkForDuplicatesInUploads(files, uploads, root) {
+    // 获取已存在的文件名集合
+    const existingFiles = new Set(uploads.map((f) => f.fileName));
+    // 检查新上传的文件是否与现有文件重名
+    const duplicateFiles = files
+        .filter((file) => {
+        const fileName = root ? `${root}${file.name}` : file.name;
+        return existingFiles.has(fileName);
+    })
+        .map((file) => file.name); // 最后，我们只保留重复文件的名称
+    return duplicateFiles;
+}
+function checkForDuplicatesInUploadHistory(files, uploadHistory) {
+    // const existingFiles = new Map<string, boolean>(uploadHistory.map(f => ([f.fileName, f.isFolder || false] as const)));
+    // 检查新上传的文件是否与现有文件重名
+    const duplicateFiles = files
+        .filter((file) => {
+        var _a;
+        // 判断当前文件是否为文件夹
+        // 如果文件名中包含 '/', 则认为它是一个文件夹
+        const isNewFileFolder = file.name.includes('/');
+        // 获取文件或文件夹的第一级名称
+        // 例如，对于 "folder/file.txt"，我们只取 "folder"
+        const topLevelName = file.name.split('/')[0];
+        // 检查这个名称在已存在的文件列表中是否为文件夹
+        // existingFiles 是一个 Map，键是文件名，值是布尔值（true 表示文件夹，false 表示文件）
+        const isExistingFileFolder = (_a = uploadHistory.find((v) => v.fileName === topLevelName)) === null || _a === void 0 ? void 0 : _a.isFolder;
+        // 比较新文件和已存在文件的类型（文件夹或非文件夹）是否相同
+        if (isNewFileFolder === isExistingFileFolder) {
+            // 如果类型相同（都是文件夹或都不是文件夹），则认为是重复的
+            return true;
+        }
+        // 如果类型不同，则不是重复的
+        return false;
+    })
+        .map((file) => file.name); // 最后，我们只保留重复文件的名称
+    return duplicateFiles;
+}
+
+export { useFilterFiles };

package/es/components/uploadDrawer/hooks/useFinishUpload.js

@@ -0,0 +1,33 @@
+import { __awaiter } from 'tslib';
+import { useContext, useCallback } from 'react';
+import { FILE_UPLOAD_STATUS } from '../utils/constant.js';
+import { UploadStoreDispatchContext } from '../UploadStoreProvider.js';
+import { FileUploadDrawerContext } from '../index.js';
+
+function useFinishUpload() {
+    const { identifier, onAllPartDone } = useContext(FileUploadDrawerContext);
+    const uploadsDispatch = useContext(UploadStoreDispatchContext);
+    return useCallback((file) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const { fileName, uploadId } = file;
+            if (file.failSeq.length === 0) {
+                const result = yield onAllPartDone(fileName, uploadId);
+                if (!result.status) {
+                    throw new Error(result.reason);
+                }
+                file.fileStatus = FILE_UPLOAD_STATUS.FINISHED;
+            }
+            else {
+                throw new Error('partial failed');
+            }
+        }
+        catch (e) {
+            file.fileStatus = FILE_UPLOAD_STATUS.FAILED;
+        }
+        finally {
+            uploadsDispatch({ type: 'edit_file', identifier, file });
+        }
+    }), [identifier, onAllPartDone, uploadsDispatch]);
+}
+
+export { useFinishUpload };

package/es/components/uploadDrawer/hooks/useFormatFiles.js

@@ -0,0 +1,54 @@
+import { __awaiter } from 'tslib';
+import { App } from 'antd';
+import { useContext } from 'react';
+import '../utils/constant.js';
+import { createFileToUpload } from '../utils/createFileToUpload.js';
+import { handleAddFilesToDB } from '../utils/fileDB/handleAddFilesToDB.js';
+import { useFilterFiles } from './useFilterFiles.js';
+import { useRemoveFilesInUploadQueue } from './useRemoveFilesInUploadQueue.js';
+import { UploadStoreDispatchContext } from '../UploadStoreProvider.js';
+import { FileUploadDrawerContext } from '../index.js';
+
+function useFormatFiles() {
+    const { message } = App.useApp();
+    const { identifier, root, getUploadUrls } = useContext(FileUploadDrawerContext);
+    const uploadsDispatch = useContext(UploadStoreDispatchContext);
+    const filterFiles = useFilterFiles();
+    const removeFilesInUploadQueue = useRemoveFilesInUploadQueue();
+    return function formatFiles(allFiles) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const filesToUpload = yield processFiles(allFiles);
+            const uploadableFiles = yield createUploadableFiles(filesToUpload);
+            updateUploadQueue(uploadableFiles);
+            handleAddFilesToDB(identifier, uploadableFiles);
+            if (uploadableFiles.length < filesToUpload.length) {
+                message.info('部分文件获取上传地址失败');
+            }
+        });
+    };
+    function processFiles(files) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const fileMap = new Map(files.map((f) => [f.name, f]));
+            const [filesToRemove, duplicateFiles] = yield filterFiles(files);
+            filesToRemove.forEach((name) => fileMap.delete(name));
+            removeFilesInUploadQueue(duplicateFiles);
+            return Array.from(fileMap.values());
+        });
+    }
+    function createUploadableFiles(files) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const promises = files.map((file) => createFileToUpload(file, root, getUploadUrls));
+            const results = yield Promise.allSettled(promises);
+            return results
+                .filter((r) => r.status === 'fulfilled')
+                .map((f) => f.value);
+        });
+    }
+    function updateUploadQueue(files) {
+        files.forEach((file) => {
+            uploadsDispatch({ type: 'add_file', identifier, file });
+        });
+    }
+}
+
+export { useFormatFiles };

package/es/components/uploadDrawer/hooks/useProgressButtonRef.js

@@ -0,0 +1,22 @@
+import { useRef, useState, useEffect } from 'react';
+
+function useProgressButtonRef() {
+    const progressButtonRef = useRef(null);
+    const [buttonInHover, setButtonInHover] = useState(false);
+    useEffect(() => {
+        const button = progressButtonRef.current;
+        if (!button)
+            return;
+        const inHover = () => setButtonInHover(true);
+        const outHover = () => setButtonInHover(false);
+        button.addEventListener('mouseenter', inHover);
+        button.addEventListener('mouseleave', outHover);
+        return () => {
+            button.removeEventListener('mouseenter', inHover);
+            button.removeEventListener('mouseleave', outHover);
+        };
+    }, []);
+    return { progressButtonRef, buttonInHover };
+}
+
+export { useProgressButtonRef };

package/es/components/uploadDrawer/hooks/useRemoveFilesInUploadQueue.js

@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+import { UploadStoreContext } from '../UploadStoreProvider.js';
+import { useCancelUpload } from './useCancelUpload.js';
+import { FileUploadDrawerContext } from '../index.js';
+
+function useRemoveFilesInUploadQueue() {
+    const uploadStore = useContext(UploadStoreContext);
+    const { identifier } = useContext(FileUploadDrawerContext);
+    const cancelUpload = useCancelUpload();
+    return function removeFilesInUploadQueue(duplicationOfName) {
+        const fileList = uploadStore[identifier];
+        for (const fileName of duplicationOfName) {
+            const upload = fileList.find((f) => f.fileName === fileName);
+            if (upload) {
+                cancelUpload(upload);
+            }
+        }
+    };
+}
+
+export { useRemoveFilesInUploadQueue };

package/es/components/uploadDrawer/hooks/useResumeUnfinishedUploads.js

@@ -0,0 +1,52 @@
+import { __awaiter } from 'tslib';
+import { useContext, useCallback } from 'react';
+import { App } from 'antd';
+import { UploadStoreDispatchContext } from '../UploadStoreProvider.js';
+import { FILE_UPLOAD_STATUS } from '../utils/constant.js';
+import { openDB } from '../utils/fileDB/openDB.js';
+import { useRetryUpload } from './useRetryUpload.js';
+
+function useResumeUnfinishedUploads(identifier) {
+    const { message, modal } = App.useApp();
+    const setUploadStore = useContext(UploadStoreDispatchContext);
+    const retryUpload = useRetryUpload();
+    return useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        // 重新加载未完成的上传文件
+        const unfinishedFiles = yield reloadSaveData(identifier);
+        // 将未完成的文件添加到上传状态中
+        setUploadStore({ type: 'add_files', identifier, files: unfinishedFiles });
+        if (unfinishedFiles.length) {
+            // 如果有未完成的文件,显示确认对话框
+            modal.confirm({
+                title: '提示',
+                content: '检测到未完成上传任务，是否继续上传？',
+                onOk() {
+                    // 用户确认继续上传,重试每个未完成的文件
+                    unfinishedFiles.forEach(retryUpload);
+                },
+                onCancel() {
+                    // 用户取消,显示提示信息
+                    message.info('点击上传按钮手动继续');
+                },
+            });
+        }
+    }), [identifier, setUploadStore, retryUpload, modal, message]);
+    function reloadSaveData(identifier) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // 从数据库获取文件信息
+            const filesFromDB = yield openDB(identifier);
+            // 从本地存储获取上传进度信息
+            const uploadsProgress = JSON.parse(localStorage.getItem(identifier) || '[]');
+            // 合并数据库文件信息和上传进度信息
+            const mergedSaveData = uploadsProgress.map((progressItem) => {
+                const matchingFile = filesFromDB.find((file) => file.fileName === progressItem.fileName);
+                return Object.assign(Object.assign(Object.assign({}, matchingFile), progressItem), { fileStatus: FILE_UPLOAD_STATUS.PAUSED });
+            });
+            // 清除本地存储中的数据
+            localStorage.removeItem(identifier);
+            return mergedSaveData;
+        });
+    }
+}
+
+export { useResumeUnfinishedUploads };

package/es/components/uploadDrawer/hooks/useRetryUpload.js

@@ -0,0 +1,35 @@
+import { __awaiter } from 'tslib';
+import { checkExpiryTime } from '../utils/shouldCreateNewFile.js';
+import { NEW, FILE_UPLOAD_STATUS } from '../utils/constant.js';
+import { createFileToUpload } from '../utils/createFileToUpload.js';
+import { useContext, useCallback } from 'react';
+import { UploadStoreDispatchContext } from '../UploadStoreProvider.js';
+import { FileUploadDrawerContext } from '../index.js';
+
+/**
+ * 自定义钩子函数,用于重试文件上传
+ */
+function useRetryUpload() {
+    // 从上下文中获取必要的值和函数
+    const { identifier, root, getUploadUrls } = useContext(FileUploadDrawerContext);
+    const uploadsDispatch = useContext(UploadStoreDispatchContext);
+    // 使用 useCallback 优化性能
+    return useCallback((file) => __awaiter(this, void 0, void 0, function* () {
+        // 检查上传时间是否过期，决定是重新上传还是继续上传
+        const isUploadExpired = checkExpiryTime(file) === NEW;
+        if (isUploadExpired) {
+            // 如果上传时间已过期，创建新的文件上传对象
+            const newFile = yield createFileToUpload(file.raw, root, getUploadUrls);
+            // 更新上传状态
+            uploadsDispatch({ type: 'edit_file', identifier, file: newFile });
+        }
+        else {
+            // 如果上传时间未过期，更新现有文件的状态以继续上传
+            const updatedFile = Object.assign(Object.assign({}, file), { fileStatus: FILE_UPLOAD_STATUS.INIT, uploadUrls: [...file.failSeq, ...file.uploadUrls], failSeq: [], cancelControllers: {} });
+            // 更新上传状态
+            uploadsDispatch({ type: 'edit_file', identifier, file: updatedFile });
+        }
+    }), [identifier, root, getUploadUrls, uploadsDispatch]); // 依赖数组
+}
+
+export { useRetryUpload };

package/es/components/uploadDrawer/hooks/useSaveUnfinishedUploads.js

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { FILE_UPLOAD_STATUS } from '../utils/constant.js';
+import 'tslib';
+import { deleteObjectStore } from '../utils/fileDB/deleteObjectStore.js';
+
+function useSaveUnfinishedUploads(uploadStore) {
+    useEffect(() => {
+        window.addEventListener('beforeunload', saveUnfinishedUploads);
+        return () => {
+            window.removeEventListener('beforeunload', saveUnfinishedUploads);
+        };
+        function saveUnfinishedUploads() {
+            const emptyUploadKeys = [];
+            for (const [key, uploads] of Object.entries(uploadStore)) {
+                const unfinishedUploads = uploads.filter((upload) => upload.fileStatus !== FILE_UPLOAD_STATUS.FINISHED);
+                if (unfinishedUploads.length) {
+                    localStorage.setItem(key, JSON.stringify(formatUnfinishedUploads(unfinishedUploads)));
+                }
+                else {
+                    emptyUploadKeys.push(key);
+                }
+            }
+            if (emptyUploadKeys.length) {
+                deleteObjectStore(emptyUploadKeys);
+            }
+        }
+    }, [uploadStore]);
+}
+function formatUnfinishedUploads(uploads) {
+    return uploads.map(({ completeSeq, uploadId, uploadStatus, uploadUrls, percentage, fileName, failSeq }) => {
+        return {
+            fileName,
+            uploadId,
+            completeSeq,
+            uploadStatus,
+            percentage,
+            uploadUrls: [...uploadUrls, ...failSeq],
+        };
+    });
+}
+
+export { useSaveUnfinishedUploads };

package/es/components/uploadDrawer/hooks/useSetupUpload.js

@@ -0,0 +1,80 @@
+import { __awaiter } from 'tslib';
+import { useContext, useCallback } from 'react';
+import axios from 'axios';
+import { FILE_UPLOAD_STATUS } from '../utils/constant.js';
+import { splitFileIntoChunk } from '../utils/splitFileIntoChunk.js';
+import { UploadStoreDispatchContext } from '../UploadStoreProvider.js';
+import { FileUploadDrawerContext } from '../index.js';
+
+function useSetupUpload() {
+    const { identifier, onOnePartDone } = useContext(FileUploadDrawerContext);
+    const uploadsDispatch = useContext(UploadStoreDispatchContext);
+    const handleUploadProgress = useCallback((e, file, partNum) => {
+        if (file.fileStatus === FILE_UPLOAD_STATUS.UPLOADING) {
+            file.uploadStatus[partNum] = Number(e.progress);
+            file.percentage = file.uploadStatus.reduce((acc, curr) => acc + curr) * (100 / file.partCount);
+            uploadsDispatch({ type: 'edit_file', identifier, file });
+        }
+    }, [identifier, uploadsDispatch]);
+    const uploadChunk = useCallback((urlInfo, chunk, file) => __awaiter(this, void 0, void 0, function* () {
+        const axiosInstance = axios.create({});
+        yield axiosInstance.put(urlInfo.uploadUrl, chunk, {
+            signal: file.cancelControllers[urlInfo.partNum].signal,
+            withCredentials: false,
+            timeout: 60 * 10 * 3 * 1000,
+            headers: { 'Content-Type': 'application/octet-stream' },
+            onUploadProgress: throttled((e) => handleUploadProgress(e, file, urlInfo.partNum)),
+        });
+    }), [handleUploadProgress]);
+    const handlePartCompletion = useCallback((file, urlInfo) => __awaiter(this, void 0, void 0, function* () {
+        const { fileName, uploadId } = file;
+        const result = yield onOnePartDone(fileName, uploadId, urlInfo.partNum);
+        if (!result.status) {
+            throw new Error(result.reason);
+        }
+        updateFileStatus(file, urlInfo, 'complete');
+    }), [onOnePartDone]);
+    const putFile = useCallback((urlInfo, chunk, file) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            yield uploadChunk(urlInfo, chunk, file);
+            yield handlePartCompletion(file, urlInfo);
+            return file.fileStatus;
+        }
+        catch (e) {
+            updateFileStatus(file, urlInfo, 'fail');
+            return file.fileStatus;
+        }
+    }), [uploadChunk, handlePartCompletion]);
+    const setupUpload = useCallback((file) => __awaiter(this, void 0, void 0, function* () {
+        file.fileStatus = FILE_UPLOAD_STATUS.UPLOADING;
+        uploadsDispatch({ type: 'edit_file', identifier, file });
+        const chunks = splitFileIntoChunk(file);
+        for (const { url, chunk } of chunks) {
+            file.cancelControllers[url.partNum] = new AbortController();
+            const newFileStatus = yield putFile(url, chunk, file);
+            if (newFileStatus === FILE_UPLOAD_STATUS.CANCELED) {
+                return false;
+            }
+            uploadsDispatch({ type: 'edit_file', identifier, file });
+        }
+    }), [identifier, uploadsDispatch, putFile]);
+    return setupUpload;
+}
+function throttled(fn, delay = 1000) {
+    let timer = null;
+    return function (arg) {
+        if (!timer) {
+            timer = setTimeout(() => {
+                fn(arg);
+                timer = null;
+            }, delay);
+        }
+    };
+}
+function updateFileStatus(file, urlInfo, status) {
+    const urlIndex = file.uploadUrls.findIndex((u) => u === urlInfo);
+    file.uploadUrls.splice(urlIndex, 1);
+    file[status === 'complete' ? 'completeSeq' : 'failSeq'].push(urlInfo);
+}
+
+export { useSetupUpload };

package/es/components/uploadDrawer/hooks/useUploadFileToOSS.js

@@ -0,0 +1,23 @@
+import { __awaiter } from 'tslib';
+import { useCallback } from 'react';
+import { FILE_UPLOAD_STATUS } from '../utils/constant.js';
+import { useSetupUpload } from './useSetupUpload.js';
+import { useFinishUpload } from './useFinishUpload.js';
+
+function useUploadFileToOSS() {
+    const setupUpload = useSetupUpload();
+    const finishUpload = useFinishUpload();
+    const uploadFileToOSS = useCallback((file, onSuccess) => __awaiter(this, void 0, void 0, function* () {
+        yield setupUpload(file);
+        if (file.fileStatus === FILE_UPLOAD_STATUS.CANCELED) {
+            return;
+        }
+        yield finishUpload(file);
+        if (file.fileStatus === FILE_UPLOAD_STATUS.FINISHED) {
+            onSuccess && onSuccess(file);
+        }
+    }), [setupUpload, finishUpload]);
+    return uploadFileToOSS;
+}
+
+export { useUploadFileToOSS };