+ {files.length === 0 ? (
+
+
+
+ {isLoadingFiles ? (
+
+ ) : (
+
暂无文件
+ )}
+
+ ) : (
+ <>{view === "List" ? renderListView() : renderGridView()}
+ )}
+
+ {pendingUpload &&
{t("Upload List")}
}
+ {pendingUpload &&
+ pendingUpload.map((item) => {
+ const progress =
+ progressList?.find((p) => p.id === item.uploadId)?.progress || 0;
+ return (
+
+ {/* 主进度条背景 */}
+ {item.status === "uploading" && (
+
+ )}
+
+ {/* 内容区域 */}
+
+ {/* 头部信息 */}
+
+
+
+ {item.fileName}
+
+
+ {formatFileSize(item.size)}
+
+
+
+ {/* 状态指示器 */}
+
+ {item.status === "uploading" ? (
+
+
{progress}%
+
+
+
+ ) : item.status === "completed" ? (
+
+ ) : (
+ item.status === "aborted" && (
+
+ )
+ )}
+
+
+
+ {/* 进度条 */}
+ {item.status === "uploading" && (
+
+
+ {/* 进度填充 */}
+
+ {/* 动态光泽效果 */}
+
0 && progress < 100 ? 1 : 0,
+ }}
+ />
+
+
+ )}
+
+
+ );
+ })}
+
+ );
+};
+
+export default UploadPending;
diff --git a/components/file/uploader.tsx b/components/file/uploader.tsx
new file mode 100644
index 0000000..339f3cb
--- /dev/null
+++ b/components/file/uploader.tsx
@@ -0,0 +1,301 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+
+import { BucketInfo } from "@/components/file/file-list";
+
+import { Icons } from "../shared/icons";
+import { Button } from "../ui/button";
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+} from "../ui/drawer";
+import DragAndDrop from "./drag-and-drop";
+import UploadPending from "./upload-pending";
+
+export type UploadPendingItemType = {
+ uploadId: string;
+ fileName: string;
+ size: number;
+ status: "uploading" | "completed" | "aborted";
+ key: string;
+ path?: string;
+};
+
+export type UploadProgressType = {
+ id: string;
+ progress: number;
+};
+
+export default function Uploader({
+ bucketInfo,
+ action,
+}: {
+ bucketInfo: BucketInfo;
+ action: string;
+}) {
+ const t = useTranslations("Components");
+ const [isOpen, setIsOpen] = useState(false);
+ const [selectedFile, setSelectedFile] = useState
(null);
+ const [pendingUpload, setPendingUpload] = useState<
+ UploadPendingItemType[] | null
+ >(null);
+ const [progressList, setProgressList] = useState();
+
+ // Handles the upload process for selected files
+ const handleUpload = useCallback(() => {
+ selectedFile?.forEach((file: File) => {
+ uploadFile(file);
+ setSelectedFile((prev) => (prev ? prev.filter((f) => f !== file) : null));
+ });
+ }, [selectedFile]);
+
+ // Starts the multipart upload process
+ const startUpload = async (
+ file: File,
+ ): Promise<{ uploadId: string; key: string }> => {
+ const formData = new FormData();
+ formData.append("fileName", file.name);
+ formData.append("fileType", file.type);
+ formData.append("bucket", bucketInfo.bucket);
+ formData.append("endPoint", "create-multipart-upload");
+ const response = await fetch(`${action}/r2/uploads`, {
+ method: "POST",
+ body: formData,
+ });
+ const data = await response.json();
+ if (data.error) {
+ throw new Error(data.error);
+ }
+
+ return data; // { uploadId, key }
+ };
+
+ // Uploads file parts in chunks
+ const uploadParts = async (
+ file: File,
+ uploadId: string,
+ key: string,
+ onProgress: (progress: number) => void,
+ ): Promise<{ ETag: string; PartNumber: number }[]> => {
+ const chunkSize = 5 * 1024 * 1024; // 5MB for each chunk
+ const totalChunks = Math.ceil(file.size / chunkSize);
+ const parts: { ETag: string; PartNumber: number }[] = [];
+
+ for (let i = 0; i < totalChunks; i++) {
+ const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
+ const partNumber = i + 1;
+
+ const formData = new FormData();
+ formData.append("chunk", chunk);
+ formData.append("uploadId", uploadId);
+ formData.append("key", key);
+ formData.append("bucket", bucketInfo.bucket);
+ formData.append("partNumber", partNumber.toString());
+ formData.append("endPoint", "upload-part");
+ const uploadResponse = await fetch(`${action}/r2/uploads`, {
+ method: "POST",
+ body: formData,
+ });
+
+ const responseData = await uploadResponse.json();
+
+ if (responseData.error) {
+ throw new Error(responseData.error);
+ }
+
+ if (responseData.etag) {
+ parts.push({ ETag: responseData.etag, PartNumber: partNumber });
+ }
+
+ const progress = Math.round((partNumber / totalChunks) * 100);
+ onProgress(progress);
+ }
+
+ return parts;
+ };
+
+ // Completes the multipart upload process
+ const completeUpload = async (
+ uploadId: string,
+ key: string,
+ parts: { ETag: string; PartNumber: number }[],
+ ): Promise<{ Location: string }> => {
+ const formData = new FormData();
+
+ formData.append("key", key);
+ formData.append("uploadId", uploadId);
+ formData.append("bucket", bucketInfo.bucket);
+ formData.append("parts", JSON.stringify(parts));
+ formData.append("endPoint", "complete-multipart-upload");
+ const response = await fetch(`${action}/r2/uploads`, {
+ method: "POST",
+ body: formData,
+ });
+ const data = await response.json();
+ if (data.error) {
+ throw new Error(data.error);
+ }
+ return data;
+ };
+
+ const abortUpload = async (uploadId: string, key: string) => {
+ const formData = new FormData();
+ formData.append("uploadId", uploadId);
+ formData.append("key", key);
+ formData.append("bucket", bucketInfo.bucket);
+ formData.append("endPoint", "abort-multipart-upload");
+ const response = await fetch(`${action}/r2/uploads`, {
+ method: "POST",
+ body: formData,
+ });
+ const data = await response.json();
+ if (data.error) {
+ throw new Error(data.error);
+ }
+ setPendingUpload(
+ (prev) =>
+ prev?.map((item) =>
+ item.uploadId === uploadId
+ ? { ...item, status: "aborted", path: "" }
+ : item,
+ ) ?? [],
+ );
+ return data;
+ };
+
+ // Manages the entire file upload process
+ const uploadFile = async (file: File): Promise => {
+ try {
+ const { uploadId, key } = await startUpload(file);
+
+ setProgressList((prev) => [
+ ...(prev ?? []),
+ { id: uploadId, progress: 0 },
+ ]);
+
+ setPendingUpload((prev) => [
+ ...(prev ?? []),
+ {
+ uploadId,
+ fileName: file.name,
+ size: file.size,
+ path: "",
+ status: "uploading",
+ key,
+ },
+ ]);
+ const parts = await uploadParts(file, uploadId, key, (progress) => {
+ // console.log(`Upload Progress: ${progress}%`);
+ setProgressList(
+ (prev) =>
+ prev?.map((item) =>
+ item.id === uploadId ? { ...item, progress } : item,
+ ) ?? [],
+ );
+ });
+
+ const result = await completeUpload(uploadId, key, parts);
+
+ setProgressList(
+ (prev) =>
+ prev?.map((item) =>
+ item.id === uploadId ? { ...item, progress: 100 } : item,
+ ) ?? [],
+ );
+
+ setPendingUpload(
+ (prev) =>
+ prev?.map((item) =>
+ item.uploadId === uploadId
+ ? { ...item, status: "completed", path: result.Location }
+ : item,
+ ) ?? [],
+ );
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ // Triggers the upload process when files are selected
+ useEffect(() => {
+ if (selectedFile?.length) {
+ handleUpload();
+ }
+ }, [selectedFile]);
+
+ return (
+ <>
+ {!isOpen && (
+
+ )}
+ {isOpen && (
+
+
+
+
+ {t("Upload Files")}
+
+
+
+
+
+
+
+
{t("Uploud channel")}:
+
{bucketInfo.provider_name}
+
+
+ {bucketInfo.bucket}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/components/forms/domain-form.tsx b/components/forms/domain-form.tsx
index 1123cd4..d3314c3 100644
--- a/components/forms/domain-form.tsx
+++ b/components/forms/domain-form.tsx
@@ -399,7 +399,7 @@ export function DomainForm({
- {t("How to get api token?")}
+ {t("How to get api key?")}
)}
diff --git a/components/shared/file-manager.tsx b/components/shared/file-manager.tsx
deleted file mode 100644
index 09d5290..0000000
--- a/components/shared/file-manager.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-"use client";
-
-import React, {
- ChangeEvent,
- FormEvent,
- useEffect,
- useRef,
- useState,
-} from "react";
-import useSWR from "swr";
-
-import { ClientStorageCredentials, FileObject } from "@/lib/r2";
-import { fetcher } from "@/lib/utils";
-
-export default function FileManager() {
- const [files, setFiles] = useState
([]);
- const [file, setFile] = useState(null);
- const [uploadProgress, setUploadProgress] = useState(0);
- const [isUploading, setIsUploading] = useState(false);
- const abortControllerRef = useRef(null);
- const [currentBucket, setCurrentBucket] = useState("");
-
- const { data: configs, isLoading } = useSWR(
- "/api/s3/r2/configs",
- fetcher,
- );
-
- useEffect(() => {
- if (configs && configs.buckets && configs.buckets.length > 0) {
- setCurrentBucket(configs.buckets[0]);
- }
- if (currentBucket) {
- fetchFiles();
- }
- }, [configs, currentBucket]);
-
- const fetchFiles = async () => {
- try {
- const response = await fetch(`/api/s3/r2/files?bucket=${currentBucket}`);
- const data = await response.json();
- setFiles(Array.isArray(data) ? data : []);
- } catch (error) {
- console.error("Error fetching files:", error);
- setFiles([]);
- }
- };
-
- const handleFileChange = (e: ChangeEvent) => {
- if (e.target.files) {
- setFile(e.target.files[0]);
- }
- };
-
- const handleUpload = async (e: FormEvent) => {
- e.preventDefault();
- if (!file) return;
-
- setIsUploading(true);
- setUploadProgress(0);
- abortControllerRef.current = new AbortController();
-
- try {
- const response = await fetch("/api/s3/r2/upload", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({
- fileName: file.name,
- fileType: file.type,
- bucket: currentBucket,
- }),
- });
- const { signedUrl } = await response.json();
-
- await uploadFileWithProgress(
- file,
- signedUrl,
- abortControllerRef.current.signal,
- );
-
- alert("File uploaded successfully!");
- setFile(null); // Clear the file input
- fetchFiles();
- } catch (error) {
- if (error instanceof Error && error.name === "AbortError") {
- console.log("Upload cancelled");
- } else {
- console.error("Error uploading file:", error);
- alert("Error uploading file");
- }
- } finally {
- setIsUploading(false);
- setUploadProgress(0);
- abortControllerRef.current = null;
- }
- };
-
- const uploadFileWithProgress = (
- file: File,
- signedUrl: string,
- signal: AbortSignal,
- ): Promise => {
- return new Promise((resolve, reject) => {
- const xhr = new XMLHttpRequest();
-
- xhr.open("PUT", signedUrl);
- xhr.setRequestHeader("Content-Type", file.type);
-
- xhr.upload.onprogress = (event) => {
- if (event.lengthComputable) {
- const percentComplete = (event.loaded / event.total) * 100;
- setUploadProgress(percentComplete);
- }
- };
-
- xhr.onload = () => {
- if (xhr.status === 200) {
- resolve();
- } else {
- reject(new Error(`Upload failed with status ${xhr.status}`));
- }
- };
-
- xhr.onerror = () => {
- reject(new Error("Upload failed"));
- };
-
- xhr.send(file);
-
- signal.addEventListener("abort", () => {
- xhr.abort();
- reject(new Error("Upload cancelled"));
- });
- });
- };
-
- const handleCancelUpload = () => {
- if (abortControllerRef.current) {
- abortControllerRef.current.abort();
- }
- };
-
- const handleDownload = async (key: string) => {
- try {
- const response = await fetch("/api/s3/r2/files", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ key, bucket: currentBucket }),
- });
- const { signedUrl } = await response.json();
- window.open(signedUrl, "_blank");
- } catch (error) {
- console.error("Error downloading file:", error);
- alert("Error downloading file");
- }
- };
-
- const handleDelete = async (key: string) => {
- try {
- await fetch("/api/s3/r2/files", {
- method: "DELETE",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ key, bucket: currentBucket }),
- });
- alert("File deleted successfully!");
- fetchFiles();
- } catch (error) {
- console.error("Error deleting file:", error);
- alert("Error deleting file");
- }
- };
-
- return (
-
-
- Cloudflare R2 with Next.js: Upload, Download, Delete
-
-
Upload File
-
-
- {isUploading && (
-
-
-
-
- {uploadProgress.toFixed(2)}% uploaded
-
-
-
-
- )}
-
-
Files
- {files.length === 0 ? (
-
No files found.
- ) : (
-
- )}
-