feat(web): add FileDropZone component with upload progress
New files: - web/src/hooks/useFileUpload.ts: presigned upload hook that gets a presigned PUT URL from POST /api/uploads/presign then uploads via XMLHttpRequest for progress tracking - web/src/components/items/FileDropZone.tsx: drag-and-drop file upload zone with file list, type-colored badges (CAD/PDF/IMG), progress bars, and remove buttons Features: - Dashed border drop zone with drag-over visual feedback - Click to browse or drag files to add - File type detection by extension with colored badges - Upload progress bar (2px mauve) during active uploads - Error state display per file - Configurable accepted file types via accept prop Closes #14
This commit is contained in:
Forbes
246
web/src/components/items/FileDropZone.tsx
Normal file
246
web/src/components/items/FileDropZone.tsx
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
import { useState, useRef, useCallback } from "react";
|
||||||
|
import type { PendingAttachment } from "../../hooks/useFileUpload";
|
||||||
|
|
||||||
|
interface FileDropZoneProps {
|
||||||
|
files: PendingAttachment[];
|
||||||
|
onFilesAdded: (files: PendingAttachment[]) => void;
|
||||||
|
onFileRemoved: (index: number) => void;
|
||||||
|
accept?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatSize(bytes: number): string {
|
||||||
|
if (bytes < 1024) return `${bytes} B`;
|
||||||
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||||
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fileTypeInfo(name: string): { label: string; color: string } {
|
||||||
|
const ext = name.split(".").pop()?.toLowerCase() ?? "";
|
||||||
|
if (["fcstd", "step", "stp", "stl", "iges", "igs"].includes(ext))
|
||||||
|
return { label: "CAD", color: "var(--ctp-blue)" };
|
||||||
|
if (ext === "pdf") return { label: "PDF", color: "var(--ctp-red)" };
|
||||||
|
if (["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext))
|
||||||
|
return { label: "IMG", color: "var(--ctp-green)" };
|
||||||
|
return { label: "FILE", color: "var(--ctp-overlay1)" };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FileDropZone({
|
||||||
|
files,
|
||||||
|
onFilesAdded,
|
||||||
|
onFileRemoved,
|
||||||
|
accept,
|
||||||
|
}: FileDropZoneProps) {
|
||||||
|
const [dragOver, setDragOver] = useState(false);
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
const handleFiles = useCallback(
|
||||||
|
(fileList: FileList) => {
|
||||||
|
const pending: PendingAttachment[] = Array.from(fileList).map((f) => ({
|
||||||
|
file: f,
|
||||||
|
objectKey: "",
|
||||||
|
uploadProgress: 0,
|
||||||
|
uploadStatus: "pending" as const,
|
||||||
|
}));
|
||||||
|
onFilesAdded(pending);
|
||||||
|
},
|
||||||
|
[onFilesAdded],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleDrop = useCallback(
|
||||||
|
(e: React.DragEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setDragOver(false);
|
||||||
|
if (e.dataTransfer.files.length > 0) handleFiles(e.dataTransfer.files);
|
||||||
|
},
|
||||||
|
[handleFiles],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* Drop zone */}
|
||||||
|
<div
|
||||||
|
onDragOver={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setDragOver(true);
|
||||||
|
}}
|
||||||
|
onDragLeave={() => setDragOver(false)}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
onClick={() => inputRef.current?.click()}
|
||||||
|
style={{
|
||||||
|
border: `2px dashed ${dragOver ? "var(--ctp-mauve)" : "var(--ctp-surface1)"}`,
|
||||||
|
borderRadius: "0.5rem",
|
||||||
|
padding: "1.25rem",
|
||||||
|
textAlign: "center",
|
||||||
|
cursor: "pointer",
|
||||||
|
backgroundColor: dragOver
|
||||||
|
? "rgba(203,166,247,0.05)"
|
||||||
|
: "transparent",
|
||||||
|
transition: "border-color 0.15s, background-color 0.15s",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ fontSize: "0.85rem", color: "var(--ctp-subtext1)" }}>
|
||||||
|
Drop files here or{" "}
|
||||||
|
<span style={{ color: "var(--ctp-mauve)", fontWeight: 600 }}>
|
||||||
|
browse
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{accept && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: "0.7rem",
|
||||||
|
color: "var(--ctp-overlay0)",
|
||||||
|
marginTop: "0.25rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{accept}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
accept={accept}
|
||||||
|
onChange={(e) => {
|
||||||
|
if (e.target.files && e.target.files.length > 0)
|
||||||
|
handleFiles(e.target.files);
|
||||||
|
e.target.value = "";
|
||||||
|
}}
|
||||||
|
style={{ display: "none" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* File list */}
|
||||||
|
{files.length > 0 && (
|
||||||
|
<div style={{ marginTop: "0.5rem" }}>
|
||||||
|
{files.map((att, i) => (
|
||||||
|
<FileRow key={i} attachment={att} onRemove={() => onFileRemoved(i)} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FileRow({
|
||||||
|
attachment,
|
||||||
|
onRemove,
|
||||||
|
}: {
|
||||||
|
attachment: PendingAttachment;
|
||||||
|
onRemove: () => void;
|
||||||
|
}) {
|
||||||
|
const [hovered, setHovered] = useState(false);
|
||||||
|
const { label, color } = fileTypeInfo(attachment.file.name);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onMouseEnter={() => setHovered(true)}
|
||||||
|
onMouseLeave={() => setHovered(false)}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.5rem",
|
||||||
|
padding: "0.3rem 0.4rem",
|
||||||
|
borderRadius: "0.3rem",
|
||||||
|
position: "relative",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Type badge */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 28,
|
||||||
|
height: 28,
|
||||||
|
borderRadius: "0.3rem",
|
||||||
|
backgroundColor: color,
|
||||||
|
opacity: 0.8,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
fontSize: "0.6rem",
|
||||||
|
fontWeight: 700,
|
||||||
|
color: "var(--ctp-crust)",
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Name + size */}
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: "0.8rem",
|
||||||
|
color: "var(--ctp-text)",
|
||||||
|
overflow: "hidden",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{attachment.file.name}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: "0.7rem", color: "var(--ctp-overlay0)" }}>
|
||||||
|
{formatSize(attachment.file.size)}
|
||||||
|
{attachment.uploadStatus === "error" && (
|
||||||
|
<span style={{ color: "var(--ctp-red)", marginLeft: "0.5rem" }}>
|
||||||
|
{attachment.error ?? "Upload failed"}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress bar */}
|
||||||
|
{attachment.uploadStatus === "uploading" && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: 2,
|
||||||
|
backgroundColor: "var(--ctp-surface1)",
|
||||||
|
borderRadius: 1,
|
||||||
|
marginTop: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: "100%",
|
||||||
|
width: `${attachment.uploadProgress}%`,
|
||||||
|
backgroundColor: "var(--ctp-mauve)",
|
||||||
|
borderRadius: 1,
|
||||||
|
transition: "width 0.15s",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status / remove */}
|
||||||
|
{attachment.uploadStatus === "complete" ? (
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontSize: "0.7rem",
|
||||||
|
color: "var(--ctp-green)",
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Done
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onRemove();
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
background: "none",
|
||||||
|
border: "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
fontSize: "0.8rem",
|
||||||
|
color: hovered ? "var(--ctp-red)" : "var(--ctp-overlay0)",
|
||||||
|
padding: "0 0.2rem",
|
||||||
|
flexShrink: 0,
|
||||||
|
transition: "color 0.15s",
|
||||||
|
}}
|
||||||
|
title="Remove"
|
||||||
|
>
|
||||||
|
x
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
87
web/src/hooks/useFileUpload.ts
Normal file
87
web/src/hooks/useFileUpload.ts
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
import { useState, useCallback } from "react";
|
||||||
|
import { post } from "../api/client";
|
||||||
|
|
||||||
|
export interface PendingAttachment {
|
||||||
|
file: File;
|
||||||
|
objectKey: string;
|
||||||
|
uploadProgress: number;
|
||||||
|
uploadStatus: "pending" | "uploading" | "complete" | "error";
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PresignResponse {
|
||||||
|
object_key: string;
|
||||||
|
upload_url: string;
|
||||||
|
expires_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useFileUpload() {
|
||||||
|
const [uploading, setUploading] = useState(false);
|
||||||
|
|
||||||
|
const upload = useCallback(
|
||||||
|
(
|
||||||
|
file: File,
|
||||||
|
onProgress?: (progress: number) => void,
|
||||||
|
): Promise<PendingAttachment> => {
|
||||||
|
setUploading(true);
|
||||||
|
|
||||||
|
return (async () => {
|
||||||
|
try {
|
||||||
|
// Get presigned URL.
|
||||||
|
const presign = await post<PresignResponse>(
|
||||||
|
"/api/uploads/presign",
|
||||||
|
{
|
||||||
|
filename: file.name,
|
||||||
|
content_type: file.type || "application/octet-stream",
|
||||||
|
size: file.size,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// Upload via XMLHttpRequest for progress events.
|
||||||
|
await new Promise<void>((resolve, reject) => {
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
xhr.open("PUT", presign.upload_url);
|
||||||
|
xhr.setRequestHeader(
|
||||||
|
"Content-Type",
|
||||||
|
file.type || "application/octet-stream",
|
||||||
|
);
|
||||||
|
|
||||||
|
xhr.upload.onprogress = (e) => {
|
||||||
|
if (e.lengthComputable) {
|
||||||
|
onProgress?.(Math.round((e.loaded / e.total) * 100));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.onload = () => {
|
||||||
|
if (xhr.status >= 200 && xhr.status < 300) resolve();
|
||||||
|
else reject(new Error(`Upload failed: HTTP ${xhr.status}`));
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.onerror = () => reject(new Error("Upload failed"));
|
||||||
|
xhr.send(file);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
file,
|
||||||
|
objectKey: presign.object_key,
|
||||||
|
uploadProgress: 100,
|
||||||
|
uploadStatus: "complete" as const,
|
||||||
|
};
|
||||||
|
} catch (e) {
|
||||||
|
return {
|
||||||
|
file,
|
||||||
|
objectKey: "",
|
||||||
|
uploadProgress: 0,
|
||||||
|
uploadStatus: "error" as const,
|
||||||
|
error: e instanceof Error ? e.message : "Upload failed",
|
||||||
|
};
|
||||||
|
} finally {
|
||||||
|
setUploading(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
return { upload, uploading };
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user