{
role="button"
onClick={() => onObjectClick(object)}
>
-
+
- {filename}
- {ext && {ext}}
+
+ {filename}
+
+ {ext && (
+ {ext}
+ )}
diff --git a/src/pages/buckets/manage/browse/types.ts b/src/pages/buckets/manage/browse/types.ts
index 272ce8c..3a84375 100644
--- a/src/pages/buckets/manage/browse/types.ts
+++ b/src/pages/buckets/manage/browse/types.ts
@@ -18,7 +18,27 @@ export type Object = {
url: string;
};
+export type UploadRowPhase = "uploading" | "finishing" | "paused";
+
+export type UploadRowStatus =
+ | "uploading"
+ | "paused"
+ | "finishing"
+ | "error";
+
+export type UploadRowItem = {
+ id: string;
+ bucket: string;
+ prefix: string;
+ key: string;
+ fileName: string;
+ size: number;
+ percent: number;
+ phase: UploadRowPhase;
+ status: UploadRowStatus;
+ errorMessage?: string;
+};
+
export type PutObjectPayload = {
key: string;
- file: File | null;
};
diff --git a/src/pages/buckets/manage/browse/upload-queue.tsx b/src/pages/buckets/manage/browse/upload-queue.tsx
new file mode 100644
index 0000000..39e187d
--- /dev/null
+++ b/src/pages/buckets/manage/browse/upload-queue.tsx
@@ -0,0 +1,234 @@
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useMemo,
+ useRef,
+ useState,
+ type ReactNode,
+} from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { API_URL } from "@/lib/api";
+import { startPausableUpload } from "@/lib/pausable-upload";
+import { url } from "@/lib/utils";
+import { toUploadErrorMessage } from "./upload-status";
+import {
+ UploadRowItem,
+ UploadRowPhase,
+ UploadRowStatus,
+} from "./types";
+
+type ActiveUpload = {
+ pause: () => void;
+ resume: () => void;
+ abort: () => void;
+};
+
+type UploadQueueContextValue = {
+ items: UploadRowItem[];
+ enqueueFiles: (bucket: string, prefix: string, files: File[]) => void;
+ pauseUpload: (id: string) => void;
+ resumeUpload: (id: string) => void;
+ cancelUpload: (id: string) => void;
+ getItemsForLocation: (bucket: string, prefix: string) => UploadRowItem[];
+};
+
+const UploadQueueContext = createContext(null);
+
+const createUploadId = () =>
+ typeof crypto !== "undefined" && crypto.randomUUID
+ ? crypto.randomUUID()
+ : `upload-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+const progressToStatus = (phase: UploadRowPhase): UploadRowStatus =>
+ phase === "finishing" ? "finishing" : "uploading";
+
+const createUploadItem = (
+ id: string,
+ bucket: string,
+ prefix: string,
+ file: File
+): UploadRowItem => ({
+ id,
+ bucket,
+ prefix,
+ key: prefix + file.name,
+ fileName: file.name,
+ size: file.size,
+ percent: 0,
+ phase: "uploading",
+ status: "uploading",
+});
+
+export const UploadQueueProvider = ({ children }: { children: ReactNode }) => {
+ const queryClient = useQueryClient();
+ const [items, setItems] = useState([]);
+ const activeRef = useRef>(new Map());
+ const cancelledRef = useRef>(new Set());
+
+ const patchItem = useCallback(
+ (id: string, patch: Partial) => {
+ setItems((prev) =>
+ prev.map((item) => (item.id === id ? { ...item, ...patch } : item))
+ );
+ },
+ []
+ );
+
+ const removeItem = useCallback((id: string) => {
+ setItems((prev) => prev.filter((item) => item.id !== id));
+ activeRef.current.delete(id);
+ cancelledRef.current.delete(id);
+ }, []);
+
+ const runUpload = useCallback(
+ (id: string, bucket: string, key: string, file: File) => {
+ let lastEventKey = "";
+
+ const handle = startPausableUpload(
+ `${API_URL}/browse/${bucket}/${key}`,
+ file,
+ {
+ onUnauthorized: () => {
+ window.location.href = url("/auth/login");
+ },
+ onProgress: (event) => {
+ const eventKey = `${event.phase}:${event.percent}`;
+ if (eventKey === lastEventKey) return;
+ lastEventKey = eventKey;
+
+ patchItem(id, {
+ percent: event.percent,
+ phase: event.phase as UploadRowPhase,
+ status: progressToStatus(event.phase as UploadRowPhase),
+ });
+ },
+ }
+ );
+
+ activeRef.current.set(id, {
+ pause: handle.pause,
+ resume: handle.resume,
+ abort: handle.abort,
+ });
+
+ handle.promise
+ .then(() => {
+ removeItem(id);
+ queryClient.invalidateQueries({ queryKey: ["browse", bucket] });
+ })
+ .catch((error) => {
+ activeRef.current.delete(id);
+
+ if (cancelledRef.current.has(id)) {
+ removeItem(id);
+ return;
+ }
+
+ const message = toUploadErrorMessage(error);
+ if (!message) return;
+
+ patchItem(id, { status: "error", errorMessage: message });
+ });
+ },
+ [patchItem, queryClient, removeItem]
+ );
+
+ const enqueueFiles = useCallback(
+ (bucket: string, prefix: string, files: File[]) => {
+ for (const file of files) {
+ const id = createUploadId();
+ setItems((prev) => [...prev, createUploadItem(id, bucket, prefix, file)]);
+ runUpload(id, bucket, prefix + file.name, file);
+ }
+ },
+ [runUpload]
+ );
+
+ const pauseUpload = useCallback(
+ (id: string) => {
+ const active = activeRef.current.get(id);
+ if (!active) return;
+
+ active.pause();
+ patchItem(id, { status: "paused", phase: "paused" });
+ },
+ [patchItem]
+ );
+
+ const resumeUpload = useCallback(
+ (id: string) => {
+ const active = activeRef.current.get(id);
+ const item = items.find((entry) => entry.id === id);
+ if (!active || !item || item.status !== "paused") return;
+
+ patchItem(id, {
+ status: "uploading",
+ phase: "uploading",
+ errorMessage: undefined,
+ });
+ active.resume();
+ },
+ [items, patchItem]
+ );
+
+ const cancelUpload = useCallback(
+ (id: string) => {
+ const item = items.find((entry) => entry.id === id);
+ if (!item) return;
+
+ if (
+ !window.confirm(
+ `Cancel upload and remove "${item.fileName}" from the list?`
+ )
+ ) {
+ return;
+ }
+
+ cancelledRef.current.add(id);
+ const active = activeRef.current.get(id);
+ if (active) active.abort();
+ else removeItem(id);
+ },
+ [items, removeItem]
+ );
+
+ const getItemsForLocation = useCallback(
+ (bucket: string, prefix: string) =>
+ items.filter((item) => item.bucket === bucket && item.prefix === prefix),
+ [items]
+ );
+
+ const value = useMemo(
+ () => ({
+ items,
+ enqueueFiles,
+ pauseUpload,
+ resumeUpload,
+ cancelUpload,
+ getItemsForLocation,
+ }),
+ [
+ items,
+ enqueueFiles,
+ pauseUpload,
+ resumeUpload,
+ cancelUpload,
+ getItemsForLocation,
+ ]
+ );
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useUploadQueue = () => {
+ const ctx = useContext(UploadQueueContext);
+ if (!ctx) {
+ throw new Error("useUploadQueue must be used within UploadQueueProvider");
+ }
+ return ctx;
+};
diff --git a/src/pages/buckets/manage/browse/upload-row-actions.tsx b/src/pages/buckets/manage/browse/upload-row-actions.tsx
new file mode 100644
index 0000000..f524f7c
--- /dev/null
+++ b/src/pages/buckets/manage/browse/upload-row-actions.tsx
@@ -0,0 +1,41 @@
+import Button from "@/components/ui/button";
+import { PauseIcon, PlayIcon, XCircle } from "lucide-react";
+import { UploadRowItem } from "./types";
+import { useUploadQueue } from "./upload-queue";
+
+type Props = {
+ item: UploadRowItem;
+};
+
+const UploadRowActions = ({ item }: Props) => {
+ const { pauseUpload, resumeUpload, cancelUpload } = useUploadQueue();
+ const isPaused = item.status === "paused";
+ const isActive = item.status === "uploading" || item.status === "finishing";
+
+ return (
+ |
+
+ {(isActive || isPaused) && (
+
+ |
+ );
+};
+
+export default UploadRowActions;
diff --git a/src/pages/buckets/manage/browse/upload-row.tsx b/src/pages/buckets/manage/browse/upload-row.tsx
new file mode 100644
index 0000000..cc3549f
--- /dev/null
+++ b/src/pages/buckets/manage/browse/upload-row.tsx
@@ -0,0 +1,55 @@
+import { AlertCircle } from "lucide-react";
+import { readableBytes } from "@/lib/utils";
+import BrowseFileTypeIcon from "./file-type-icon";
+import { getUploadStatusLabel } from "./upload-status";
+import { UploadRowItem } from "./types";
+import UploadRowActions from "./upload-row-actions";
+
+type Props = {
+ item: UploadRowItem;
+};
+
+const fileExtension = (fileName: string) => {
+ const dotIndex = fileName.lastIndexOf(".");
+ return dotIndex >= 0 ? fileName.substring(dotIndex + 1) : null;
+};
+
+const UploadRow = ({ item }: Props) => {
+ const status = getUploadStatusLabel(item);
+ const isError = item.status === "error";
+
+ return (
+
+ |
+
+ {isError ? (
+
+ ) : (
+
+ )}
+ {item.fileName}
+
+ |
+
+ {readableBytes(item.size)} |
+
+
+ {status}
+ |
+
+
+
+ );
+};
+
+export default UploadRow;
diff --git a/src/pages/buckets/manage/browse/upload-status.ts b/src/pages/buckets/manage/browse/upload-status.ts
new file mode 100644
index 0000000..7b6b42b
--- /dev/null
+++ b/src/pages/buckets/manage/browse/upload-status.ts
@@ -0,0 +1,25 @@
+import { APIError } from "@/lib/api";
+import { UploadRowItem } from "./types";
+
+export const getUploadStatusLabel = (item: UploadRowItem) => {
+ if (item.status === "error") return item.errorMessage ?? "Upload failed";
+ if (item.status === "paused") return `Paused at ${item.percent}%`;
+ if (item.status === "finishing") return "Saving to storage…";
+ return `Uploading — ${item.percent}%`;
+};
+
+export const toUploadErrorMessage = (error: unknown) => {
+ if (error instanceof DOMException && error.name === "AbortError") return null;
+
+ if (error instanceof APIError) {
+ if (error.status === 0) return "Network error. Check your connection.";
+ if (error.status === 413) return "File exceeds the server upload size limit.";
+ if (error.status === 502 || error.status === 504) {
+ return "Server timed out while saving. Retry or use the S3 API for large files.";
+ }
+ if (error.message) return error.message;
+ }
+
+ if (error instanceof Error && error.message) return error.message;
+ return "Upload failed.";
+};
diff --git a/src/pages/buckets/manage/page.tsx b/src/pages/buckets/manage/page.tsx
index ec2081f..9607ecf 100644
--- a/src/pages/buckets/manage/page.tsx
+++ b/src/pages/buckets/manage/page.tsx
@@ -13,6 +13,7 @@ import PermissionsTab from "./permissions/permissions-tab";
import MenuButton from "./components/menu-button";
import BrowseTab from "./browse/browse-tab";
import { BucketContext } from "./context";
+import { UploadQueueProvider } from "./browse/upload-queue";
import { Alert, Loading } from "react-daisyui";
const tabs: Tab[] = [
@@ -67,7 +68,9 @@ const ManageBucketPage = () => {
-
+
+
+
)}
|