update upload way

packages/resources/package.json

@@ -20,6 +20,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@kevisual/components": "workspace:*",
+    "@kevisual/query-upload": "workspace:*",
     "@kevisual/router": "^0.0.9",
     "@kevisual/store": "^0.0.2",
     "@mui/material": "^6.4.8",

packages/resources/src/index.ts

@@ -5,3 +5,5 @@ export { iText } from './i-text/index.ts';
 
 export { uploadFiles, uploadFileChunked, getDirectoryAndName, toFile, createDirectory } from './pages/upload/app';
 export { DialogDirectory, DialogDeleteDirectory } from './pages/upload/DialogDirectory';
+
+export { uploadChunkV2 } from './pages/upload/v2/upload-chunk';

packages/resources/src/pages/upload/index.tsx

@@ -5,6 +5,9 @@ import { FileText, CloudUpload as UploadIcon } from 'lucide-react';
 import { uploadFileChunked } from './utils/upload-chunk';
 import { filterFiles } from './utils/filter-files';
 import { IconButton } from '@kevisual/components/button/index.tsx';
+import { uploadChunkV2 } from './v2/upload-chunk';
+import { uploadFilesV2 } from './v2/upload';
+
 type UploadButtonProps = {
   /**
    * 前缀
@@ -51,12 +54,10 @@ export const UploadButton = (props: UploadButtonProps) => {
     console.log(acceptedFiles);
     acceptedFiles = filterFiles(acceptedFiles);
     if (acceptedFiles.length > 1) {
-      const res = await uploadFiles(acceptedFiles, { directory, appKey, version, username });
-      console.log('uploadFiles res', res);
+      const res = await uploadFilesV2(acceptedFiles, { directory, appKey, version, username });
       props.onUpload?.(res);
     } else if (acceptedFiles.length === 1) {
-      const res = await uploadFileChunked(acceptedFiles[0], { directory, appKey, version, username });
-      console.log('uploadFiles res', res);
+      const res = await uploadChunkV2(acceptedFiles[0], { directory, appKey, version, username });
       props.onUpload?.(res);
     }
   };
@@ -83,11 +84,9 @@ export const Upload = ({ uploadDirectory = false }: { uploadDirectory?: boolean
   const onDrop = async (acceptedFiles) => {
     acceptedFiles = filterFiles(acceptedFiles);
     if (acceptedFiles.length > 1) {
-      const res = await uploadFiles(acceptedFiles, {});
-      console.log('uploadFiles res', res);
+      const res = await uploadFilesV2(acceptedFiles, {});
     } else if (acceptedFiles.length === 1) {
-      const res = await uploadFileChunked(acceptedFiles[0], {});
-      console.log('uploadFiles res', res);
+      const res = await uploadChunkV2(acceptedFiles[0], {});
     }
   };
 

packages/resources/src/pages/upload/utils/create-directory.ts

@@ -1,4 +1,4 @@
-import { toTextFile } from '../app';
+import { toTextFile } from '../tools/to-file';
 import { ConvertOpts, uploadFileChunked } from './upload-chunk';
 /**
  * 对创建的directory的路径进行解析，

packages/resources/src/pages/upload/v2/upload-chunk.ts

@@ -0,0 +1,55 @@
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+import { Id, toast } from 'react-toastify';
+import { nanoid } from 'nanoid';
+import { toastLogin } from '@kevisual/resources/pages/message/ToastLogin';
+import { uploadFileChunked, UploadProgress } from '@kevisual/query-upload/query-upload';
+
+export type ConvertOpts = {
+  appKey?: string;
+  version?: string;
+  username?: string;
+  directory?: string;
+  isPublic?: boolean;
+  filename?: string;
+};
+
+export const uploadChunkV2 = async (file: File, opts: ConvertOpts) => {
+  const filename = opts.filename || file.name;
+  const token = localStorage.getItem('token');
+  if (!token) {
+    console.log('uploadChunk token', token);
+    toastLogin();
+    return;
+  }
+  let loaded: Id;
+  const uploadProgress = new UploadProgress({
+    onStart: function () {
+      NProgress.start();
+      loaded = toast.loading(`${filename} 上传中...`);
+    },
+    onDone: () => {
+      NProgress.done();
+      toast.dismiss(loaded);
+    },
+    onProgress: (progress, data) => {
+      NProgress.set(progress);
+      console.log('uploadChunk progress', progress, data);
+      toast.update(loaded, {
+        render: `${filename} 上传中... ${progress.toFixed(2)}%`,
+        isLoading: true,
+        autoClose: false,
+      });
+    },
+  });
+
+  const result = await uploadFileChunked(file, opts, {
+    uploadProgress,
+    token,
+    createEventSource: (url: string, searchParams: URLSearchParams) => {
+      return new EventSource(url + '?' + searchParams.toString());
+    },
+    FormDataFn: FormData,
+  });
+  return result;
+};

packages/resources/src/pages/upload/v2/upload.ts

@@ -0,0 +1,70 @@
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+import { Id, toast } from 'react-toastify';
+import { nanoid } from 'nanoid';
+import { toastLogin } from '@kevisual/resources/pages/message/ToastLogin';
+import { uploadFiles, UploadProgress } from '@kevisual/query-upload/query-upload';
+
+export type ConvertOpts = {
+  appKey?: string;
+  version?: string;
+  username?: string;
+  directory?: string;
+  isPublic?: boolean;
+
+  maxSize?: number;
+  maxCount?: number;
+};
+
+export const uploadFilesV2 = async (files: File[], opts: ConvertOpts) => {
+  const token = localStorage.getItem('token');
+  if (!token) {
+    console.log('uploadChunk token', token);
+    toastLogin();
+    return;
+  }
+  const length = files.length;
+  const maxSize = opts.maxSize || 20 * 1024 * 1024; // 10MB
+  const totalSize = files.reduce((acc, file) => acc + file.size, 0);
+  if (totalSize > maxSize) {
+    toast.error('有文件大小不能超过20MB');
+    return;
+  }
+  const maxCount = opts.maxCount || 10;
+  if (length > maxCount) {
+    toast.error(`最多只能上传${maxCount}个文件`);
+    return;
+  }
+  toast.info(`上传中，共${length}个文件`);
+
+  let loaded: Id;
+  const uploadProgress = new UploadProgress({
+    onStart: function () {
+      NProgress.start();
+      loaded = toast.loading(`上传中...`);
+    },
+    onDone: () => {
+      NProgress.done();
+      toast.dismiss(loaded);
+    },
+    onProgress: (progress, data) => {
+      NProgress.set(progress);
+      console.log('uploadChunk progress', progress, data);
+      toast.update(loaded, {
+        render: `上传中... ${progress.toFixed(2)}%`,
+        isLoading: true,
+        autoClose: false,
+      });
+    },
+  });
+
+  const result = await uploadFiles(files, opts, {
+    uploadProgress,
+    token,
+    createEventSource: (url: string, searchParams: URLSearchParams) => {
+      return new EventSource(url + '?' + searchParams.toString());
+    },
+    FormDataFn: FormData,
+  });
+  return result;
+};