Initial commit
This commit is contained in:
twotalesanimation
@@ -0,0 +1,71 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { shareVersionWithClient } from "@/actions/versions";
|
||||
import { Send, CheckCircle2 } from "lucide-react";
|
||||
|
||||
interface ShareWithClientButtonProps {
|
||||
versionId: string;
|
||||
isAlreadyShared?: boolean;
|
||||
onShared?: () => void;
|
||||
size?: "sm" | "default";
|
||||
}
|
||||
|
||||
export function ShareWithClientButton({
|
||||
versionId,
|
||||
isAlreadyShared = false,
|
||||
onShared,
|
||||
size = "sm",
|
||||
}: ShareWithClientButtonProps) {
|
||||
const [shared, setShared] = useState(isAlreadyShared);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
const handleShare = async () => {
|
||||
if (shared) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
await shareVersionWithClient(versionId);
|
||||
setShared(true);
|
||||
toast({ title: "Version shared with client" });
|
||||
onShared?.();
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "Failed to share version",
|
||||
description: (err as Error).message,
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (shared) {
|
||||
return (
|
||||
<Button
|
||||
size={size}
|
||||
variant="outline"
|
||||
disabled
|
||||
className="h-7 text-xs gap-1 text-amber-400 border-amber-500/30"
|
||||
>
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
<span className="hidden sm:inline">Shared with Client</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
size={size}
|
||||
variant="outline"
|
||||
disabled={loading}
|
||||
onClick={handleShare}
|
||||
className="h-7 text-xs gap-1 text-amber-400 border-amber-500/30 hover:bg-amber-500/10"
|
||||
>
|
||||
<Send className="h-3 w-3" />
|
||||
<span className="hidden sm:inline">{loading ? "Sharing…" : "Share with Client"}</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,295 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { formatRelativeDate, formatFileSize } from "@/lib/utils";
|
||||
import {
|
||||
Film,
|
||||
Clock,
|
||||
MoreHorizontal,
|
||||
ExternalLink,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
AlertCircle,
|
||||
Star,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
MessageSquare,
|
||||
} from "lucide-react";
|
||||
import type { VersionWithDetails } from "@/types";
|
||||
import { submitApproval } from "@/actions/approvals";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
|
||||
interface VersionListProps {
|
||||
shotId: string;
|
||||
versions: VersionWithDetails[];
|
||||
currentVersionId?: string;
|
||||
onVersionSelect?: (versionId: string) => void;
|
||||
canApprove?: boolean;
|
||||
}
|
||||
|
||||
const APPROVAL_STATUS_STYLES: Record<string, string> = {
|
||||
PENDING_REVIEW: "bg-amber-500/10 text-amber-400 border-amber-500/20",
|
||||
APPROVED: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
|
||||
REJECTED: "bg-red-500/10 text-red-400 border-red-500/20",
|
||||
NEEDS_CHANGES: "bg-orange-500/10 text-orange-400 border-orange-500/20",
|
||||
};
|
||||
|
||||
const APPROVAL_ICONS: Record<string, React.ElementType> = {
|
||||
PENDING_REVIEW: Clock,
|
||||
APPROVED: CheckCircle2,
|
||||
REJECTED: XCircle,
|
||||
NEEDS_CHANGES: AlertCircle,
|
||||
};
|
||||
|
||||
function getApprovalLabel(status: string) {
|
||||
switch (status) {
|
||||
case "PENDING_REVIEW": return "Pending";
|
||||
case "APPROVED": return "Approved";
|
||||
case "REJECTED": return "Rejected";
|
||||
case "NEEDS_CHANGES": return "Needs Changes";
|
||||
default: return status;
|
||||
}
|
||||
}
|
||||
|
||||
export function VersionList({
|
||||
shotId,
|
||||
versions,
|
||||
currentVersionId,
|
||||
onVersionSelect,
|
||||
canApprove = false,
|
||||
}: VersionListProps) {
|
||||
const [expanded, setExpanded] = useState<string | null>(currentVersionId ?? null);
|
||||
const { toast } = useToast();
|
||||
const router = useRouter();
|
||||
|
||||
if (versions.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-muted-foreground">
|
||||
<Film className="h-8 w-8 mb-3 opacity-30" />
|
||||
<p className="text-sm">No versions uploaded yet</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleApprove = async (versionId: string) => {
|
||||
try {
|
||||
await submitApproval({ versionId, status: "APPROVED", notes: "" });
|
||||
toast({ title: "Version approved" });
|
||||
router.refresh();
|
||||
} catch {
|
||||
toast({ title: "Failed to approve", variant: "destructive" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleReject = async (versionId: string) => {
|
||||
try {
|
||||
await submitApproval({ versionId, status: "REJECTED", notes: "Rejected from version list" });
|
||||
toast({ title: "Version rejected", variant: "destructive" });
|
||||
router.refresh();
|
||||
} catch {
|
||||
toast({ title: "Failed to reject", variant: "destructive" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{versions.map((version) => {
|
||||
const isActive = version.id === currentVersionId;
|
||||
const isExpanded = expanded === version.id;
|
||||
const StatusIcon = APPROVAL_ICONS[version.approvalStatus] ?? Clock;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={version.id}
|
||||
className={cn(
|
||||
"rounded-lg border transition-all",
|
||||
isActive
|
||||
? "border-primary/40 bg-primary/5"
|
||||
: "border-border hover:border-border/80"
|
||||
)}
|
||||
>
|
||||
{/* Row */}
|
||||
<div className="flex items-center gap-3 px-3 py-2.5">
|
||||
{/* Version label + latest badge */}
|
||||
<div className="flex items-center gap-2 min-w-[80px]">
|
||||
<span className="font-mono text-sm font-semibold">
|
||||
v{String(version.versionNumber).padStart(3, "0")}
|
||||
</span>
|
||||
{version.isLatest && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Star className="h-3 w-3 text-amber-400 fill-amber-400" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Latest version</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Approval status */}
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-xs",
|
||||
APPROVAL_STATUS_STYLES[version.approvalStatus] ??
|
||||
"bg-muted/30 text-muted-foreground border-border"
|
||||
)}
|
||||
>
|
||||
<StatusIcon className="h-3 w-3" />
|
||||
{getApprovalLabel(version.approvalStatus)}
|
||||
</span>
|
||||
|
||||
{/* Meta */}
|
||||
<div className="flex-1 min-w-0 text-xs text-muted-foreground hidden sm:flex items-center gap-3">
|
||||
<span>{version.fps} fps</span>
|
||||
{version.duration && (
|
||||
<span className="font-mono">{Math.round(version.duration)}s</span>
|
||||
)}
|
||||
<span>{formatRelativeDate(version.createdAt)}</span>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-1.5 ml-auto">
|
||||
<Button
|
||||
variant={isActive ? "default" : "ghost"}
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => onVersionSelect?.(version.id)}
|
||||
>
|
||||
{isActive ? "Reviewing" : "Review"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="text-muted-foreground"
|
||||
onClick={() => setExpanded(isExpanded ? null : version.id)}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon-sm" className="text-muted-foreground">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/review/${version.id}`} target="_blank">
|
||||
<ExternalLink className="h-3.5 w-3.5 mr-2" />
|
||||
Open review page
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
{canApprove && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-emerald-500"
|
||||
onClick={() => handleApprove(version.id)}
|
||||
>
|
||||
<CheckCircle2 className="h-3.5 w-3.5 mr-2" />
|
||||
Approve
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="text-red-500"
|
||||
onClick={() => handleReject(version.id)}
|
||||
>
|
||||
<XCircle className="h-3.5 w-3.5 mr-2" />
|
||||
Reject
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded detail */}
|
||||
{isExpanded && (
|
||||
<div className="border-t border-border/50 px-3 py-2.5 text-xs text-muted-foreground space-y-2">
|
||||
{version.notes && (
|
||||
<p className="text-foreground/80 italic">“{version.notes}”</p>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-1">
|
||||
<span>
|
||||
<span className="text-foreground">Uploaded by</span>{" "}
|
||||
{version.artist?.name ?? "Unknown"}
|
||||
</span>
|
||||
{version.frameCount && (
|
||||
<span>
|
||||
<span className="text-foreground">{version.frameCount}</span> frames
|
||||
</span>
|
||||
)}
|
||||
{version.fileSize && (
|
||||
<span>{formatFileSize(version.fileSize)}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Approval history */}
|
||||
{version.approvals && version.approvals.length > 0 && (
|
||||
<div className="mt-2 space-y-1.5 pt-2 border-t border-border/40">
|
||||
<p className="text-[10px] uppercase tracking-wider text-muted-foreground/60 font-medium flex items-center gap-1">
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
Review history
|
||||
</p>
|
||||
{version.approvals.map((approval) => {
|
||||
const statusStyles: Record<string, string> = {
|
||||
APPROVED: "text-emerald-400",
|
||||
REJECTED: "text-red-400",
|
||||
NEEDS_CHANGES: "text-orange-400",
|
||||
PENDING_REVIEW: "text-amber-400",
|
||||
};
|
||||
const StatusIcon = APPROVAL_ICONS[approval.status] ?? Clock;
|
||||
return (
|
||||
<div key={approval.id} className="flex gap-2">
|
||||
<StatusIcon
|
||||
className={cn("h-3.5 w-3.5 mt-0.5 shrink-0", statusStyles[approval.status])}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className={cn("font-medium", statusStyles[approval.status])}>
|
||||
{getApprovalLabel(approval.status)}
|
||||
</span>
|
||||
<span className="text-muted-foreground/70"> by </span>
|
||||
<span className="text-foreground/80">
|
||||
{approval.user.name ?? "Reviewer"}
|
||||
</span>
|
||||
{approval.notes && (
|
||||
<p className="mt-0.5 text-foreground/70 italic leading-snug">
|
||||
“{approval.notes}”
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,288 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { createVersion } from "@/actions/versions";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { Upload, Film, X, CheckCircle2 } from "lucide-react";
|
||||
import { formatFileSize } from "@/lib/utils";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface VersionUploadProps {
|
||||
taskId: string;
|
||||
projectId: string;
|
||||
currentVersionNumber: number;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess?: (versionId: string) => void;
|
||||
}
|
||||
|
||||
export function VersionUpload({
|
||||
taskId,
|
||||
projectId,
|
||||
currentVersionNumber,
|
||||
open,
|
||||
onClose,
|
||||
onSuccess,
|
||||
}: VersionUploadProps) {
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [notes, setNotes] = useState("");
|
||||
const [fps, setFps] = useState("24");
|
||||
const [uploadProgress, setUploadProgress] = useState(0);
|
||||
const [uploadState, setUploadState] = useState<
|
||||
"idle" | "uploading" | "processing" | "done" | "error"
|
||||
>("idle");
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
const { toast } = useToast();
|
||||
const router = useRouter();
|
||||
|
||||
const nextVersion = currentVersionNumber + 1;
|
||||
const versionLabel = `v${String(nextVersion).padStart(3, "0")}`;
|
||||
const acceptedTypes = "video/mp4,video/quicktime,video/x-msvideo,.mp4,.mov,.avi,.mxf";
|
||||
|
||||
const handleFileSelect = (selectedFile: File) => {
|
||||
if (!selectedFile.type.match(/video\//)) {
|
||||
toast({ title: "Please select a video file (.mp4, .mov)", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
if (selectedFile.size > 2 * 1024 * 1024 * 1024) {
|
||||
toast({ title: "File too large (max 2GB)", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
setFile(selectedFile);
|
||||
};
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragOver(false);
|
||||
const dropped = e.dataTransfer.files[0];
|
||||
if (dropped) handleFileSelect(dropped);
|
||||
}, []);
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!file) return;
|
||||
setUploadState("uploading");
|
||||
setUploadProgress(0);
|
||||
|
||||
try {
|
||||
// Upload via local API (XHR for progress) or UploadThing
|
||||
const fileUrl = await uploadViaLocal(file, (p) =>
|
||||
setUploadProgress(Math.round(p * 0.85))
|
||||
);
|
||||
|
||||
setUploadProgress(90);
|
||||
setUploadState("processing");
|
||||
|
||||
const result = await createVersion({
|
||||
taskId,
|
||||
fileUrl,
|
||||
fileName: file.name,
|
||||
fileSize: file.size,
|
||||
mimeType: file.type,
|
||||
fps: parseFloat(fps) || 24,
|
||||
notes: notes.trim() || undefined,
|
||||
});
|
||||
|
||||
setUploadProgress(100);
|
||||
setUploadState("done");
|
||||
toast({ title: `${versionLabel} uploaded successfully` });
|
||||
setTimeout(() => {
|
||||
onSuccess?.(result.version.id);
|
||||
router.refresh();
|
||||
onClose();
|
||||
resetState();
|
||||
}, 1000);
|
||||
} catch (err) {
|
||||
setUploadState("error");
|
||||
toast({
|
||||
title: "Upload failed",
|
||||
description: (err as Error).message,
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const resetState = () => {
|
||||
setFile(null);
|
||||
setNotes("");
|
||||
setFps("24");
|
||||
setUploadProgress(0);
|
||||
setUploadState("idle");
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
if (uploadState === "uploading") return;
|
||||
resetState();
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(o) => !o && handleClose()}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Film className="h-5 w-5 text-amber-500" />
|
||||
Upload {versionLabel}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Drop zone */}
|
||||
{!file ? (
|
||||
<div
|
||||
onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
|
||||
onDragLeave={() => setIsDragOver(false)}
|
||||
onDrop={handleDrop}
|
||||
className={cn(
|
||||
"relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-10 transition-colors cursor-pointer",
|
||||
isDragOver
|
||||
? "border-amber-500 bg-amber-500/10"
|
||||
: "border-zinc-700 hover:border-amber-500/50 hover:bg-zinc-800/50"
|
||||
)}
|
||||
onClick={() => document.getElementById("file-input")?.click()}
|
||||
>
|
||||
<input
|
||||
id="file-input"
|
||||
type="file"
|
||||
accept={acceptedTypes}
|
||||
className="hidden"
|
||||
onChange={(e) => e.target.files?.[0] && handleFileSelect(e.target.files[0])}
|
||||
/>
|
||||
<Upload className="h-8 w-8 text-zinc-500 mb-3" />
|
||||
<p className="text-sm font-medium text-white">Drop video here or click to browse</p>
|
||||
<p className="text-xs text-zinc-400 mt-1">MP4, MOV, AVI up to 2 GB</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-3 rounded-lg border border-zinc-700 p-3 bg-zinc-800/50">
|
||||
<Film className="h-8 w-8 text-amber-500 shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate text-white">{file.name}</p>
|
||||
<p className="text-xs text-zinc-400">{formatFileSize(file.size)}</p>
|
||||
</div>
|
||||
{uploadState === "idle" && (
|
||||
<Button variant="ghost" size="icon-sm" onClick={() => setFile(null)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
{uploadState === "done" && (
|
||||
<CheckCircle2 className="h-5 w-5 text-green-400" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
{file && uploadState === "idle" && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="fps" className="text-xs">Frame Rate (FPS)</Label>
|
||||
<Input
|
||||
id="fps"
|
||||
value={fps}
|
||||
onChange={(e) => setFps(e.target.value)}
|
||||
placeholder="24"
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="notes" className="text-xs">Version Notes</Label>
|
||||
<Textarea
|
||||
id="notes"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="What changed in this version?"
|
||||
className="text-sm min-h-[80px]"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Upload progress */}
|
||||
{(uploadState === "uploading" || uploadState === "processing" || uploadState === "done") && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-zinc-400">
|
||||
{uploadState === "uploading" && "Uploading..."}
|
||||
{uploadState === "processing" && "Processing..."}
|
||||
{uploadState === "done" && "Complete!"}
|
||||
</span>
|
||||
<span className="text-amber-400 font-mono">{uploadProgress}%</span>
|
||||
</div>
|
||||
<Progress value={uploadProgress} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleClose} disabled={uploadState === "uploading"}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={!file || uploadState !== "idle"}
|
||||
className="gap-2"
|
||||
>
|
||||
<Upload className="h-4 w-4" />
|
||||
Upload {versionLabel}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
/** Upload a file to /api/upload/local using XHR so we get progress events. */
|
||||
function uploadViaLocal(
|
||||
file: File,
|
||||
onProgress: (fraction: number) => void
|
||||
): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", "/api/upload/local");
|
||||
|
||||
xhr.upload.addEventListener("progress", (e) => {
|
||||
if (e.lengthComputable) onProgress(e.loaded / e.total);
|
||||
});
|
||||
|
||||
xhr.addEventListener("load", () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
try {
|
||||
const json = JSON.parse(xhr.responseText);
|
||||
if (json.url) resolve(json.url);
|
||||
else reject(new Error(json.error ?? "Upload failed"));
|
||||
} catch {
|
||||
reject(new Error("Invalid server response"));
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const json = JSON.parse(xhr.responseText);
|
||||
reject(new Error(json.error ?? `HTTP ${xhr.status}`));
|
||||
} catch {
|
||||
reject(new Error(`HTTP ${xhr.status}`));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener("error", () => reject(new Error("Network error")));
|
||||
xhr.addEventListener("abort", () => reject(new Error("Upload cancelled")));
|
||||
|
||||
xhr.send(formData);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user