mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-08 00:45:41 +00:00
style: update the multi file document ui
This commit is contained in:
Nathnael
@@ -153,6 +153,76 @@ function ExistingFileLink({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A file the user just picked (in memory, not yet persisted). Rendered with a
|
||||||
|
* subtle "just added" entrance + an emerald accent so a fresh upload reads as
|
||||||
|
* distinct from the neutral surrounding surface.
|
||||||
|
*/
|
||||||
|
function NewFileCard({
|
||||||
|
file: fileObj,
|
||||||
|
onRemove,
|
||||||
|
disabled,
|
||||||
|
hasError,
|
||||||
|
inputName,
|
||||||
|
}: {
|
||||||
|
file: File;
|
||||||
|
onRemove: () => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
hasError?: boolean;
|
||||||
|
inputName: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"relative z-10 flex items-center justify-between gap-3 rounded-lg border bg-card p-3 shadow-2xs transition",
|
||||||
|
"animate-in fade-in slide-in-from-top-1 duration-300 hover:shadow-xs",
|
||||||
|
hasError
|
||||||
|
? "border-destructive/30"
|
||||||
|
: "border-emerald-300/60 dark:border-emerald-500/25",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex min-w-0 items-center gap-3">
|
||||||
|
<div className="flex items-center justify-center rounded-md bg-muted p-2">
|
||||||
|
<FileIcon name={fileObj.name} className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="min-w-0">
|
||||||
|
<p
|
||||||
|
className="truncate max-w-[200px] text-sm font-medium text-foreground md:max-w-md"
|
||||||
|
title={fileObj.name}
|
||||||
|
>
|
||||||
|
{fileObj.name}
|
||||||
|
</p>
|
||||||
|
<div className="mt-0.5 flex items-center gap-2">
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{formatBytes(fileObj.size)}
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
|
||||||
|
<CheckCircle2 className="h-3 w-3" /> Ready to upload
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={onRemove}
|
||||||
|
className={cn(
|
||||||
|
"relative z-10 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
|
||||||
|
disabled && "pointer-events-none opacity-50",
|
||||||
|
)}
|
||||||
|
aria-label={`Remove file ${fileObj.name}`}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Hidden input to represent file details in traditional form submissions */}
|
||||||
|
<input type="hidden" name={inputName} value={fileObj.name} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function SmartFileInput({
|
export function SmartFileInput({
|
||||||
file,
|
file,
|
||||||
value,
|
value,
|
||||||
@@ -407,228 +477,352 @@ export function SmartFileInput({
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Selected Files List */}
|
{/*
|
||||||
{currentFiles.length > 0 && (
|
Multiple-file fields (default variant) render as ONE integrated
|
||||||
<div className="flex flex-col gap-2">
|
drag-and-drop surface. Uploaded files live INSIDE the dropzone as
|
||||||
{currentFiles.map((fileObj, idx) => (
|
lightweight rows — part of the surface, not separate cards — with
|
||||||
<div
|
the "add more" prompt on the same surface below them. A full-cover
|
||||||
key={`${fileObj.name}-${idx}`}
|
transparent input makes clicking anywhere (outside a file row)
|
||||||
className={cn(
|
open the picker; the prompt is pointer-transparent so clicks fall
|
||||||
"flex items-center justify-between p-3 rounded-lg border bg-card transition shadow-2xs hover:shadow-xs",
|
through to it, while file rows and their controls sit above it.
|
||||||
fieldError ? "border-destructive/30" : "border-border",
|
*/}
|
||||||
)}
|
{variant === "default" && field.isMultiple ? (
|
||||||
>
|
<div
|
||||||
<div className="flex items-center gap-3 min-w-0">
|
onDragOver={(e) => handleDrag(e, field.fileKey, true)}
|
||||||
<div className="p-2 bg-muted rounded-md flex items-center justify-center">
|
onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
|
||||||
<FileIcon name={fileObj.name} className="h-5 w-5" />
|
onDrop={(e) => handleDrop(e, field)}
|
||||||
</div>
|
className={cn(
|
||||||
|
"relative flex flex-col gap-2.5 rounded-xl border-2 border-dashed p-4 transition-all",
|
||||||
<div className="min-w-0">
|
isDragOver
|
||||||
<p
|
? "border-primary bg-primary/5 dark:bg-primary/10"
|
||||||
className="text-sm font-medium text-foreground truncate max-w-[200px] md:max-w-md"
|
: fieldError
|
||||||
title={fileObj.name}
|
? "border-destructive/70"
|
||||||
>
|
: "border-border bg-card/40 hover:border-primary/40",
|
||||||
{fileObj.name}
|
disabled && "pointer-events-none opacity-50",
|
||||||
</p>
|
)}
|
||||||
<div className="flex items-center gap-2 mt-0.5">
|
>
|
||||||
<span className="text-xs text-muted-foreground">
|
{/* Click anywhere on the surface (except a file row) to browse */}
|
||||||
{formatBytes(fileObj.size)}
|
{!reachedLimit && (
|
||||||
</span>
|
|
||||||
<span className="flex items-center gap-0.5 text-xs text-primary font-medium">
|
|
||||||
<CheckCircle2 className="h-3 w-3" /> Ready
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
disabled={disabled}
|
|
||||||
onClick={() => removeFile(field.fileKey, idx)}
|
|
||||||
className={cn(
|
|
||||||
"p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors",
|
|
||||||
disabled && "opacity-50 pointer-events-none",
|
|
||||||
)}
|
|
||||||
aria-label={`Remove file ${fileObj.name}`}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Hidden inputs to represent file details in traditional form submissions */}
|
|
||||||
<input
|
|
||||||
type="hidden"
|
|
||||||
name={
|
|
||||||
field.isMultiple
|
|
||||||
? `${field.fileKey}[]`
|
|
||||||
: field.fileKey
|
|
||||||
}
|
|
||||||
value={fileObj.name}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Dropzone area */}
|
|
||||||
{!reachedLimit &&
|
|
||||||
(variant === "minimal" ? (
|
|
||||||
<div className="flex flex-wrap items-center gap-3">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
disabled={disabled}
|
|
||||||
onClick={() =>
|
|
||||||
fileInputRefs.current[field.fileKey]?.click()
|
|
||||||
}
|
|
||||||
className="gap-1.5 cursor-pointer"
|
|
||||||
>
|
|
||||||
<UploadCloud className="h-4 w-4 text-muted-foreground" />
|
|
||||||
<span>{isUploaded ? "Replace File" : "Upload File"}</span>
|
|
||||||
</Button>
|
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
ref={(el) => {
|
multiple
|
||||||
if (fileInputRefs.current) {
|
|
||||||
fileInputRefs.current[field.fileKey] = el;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
multiple={field.isMultiple}
|
|
||||||
accept={acceptString}
|
accept={acceptString}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={(e) => handleFileSelect(e, field)}
|
onChange={(e) => handleFileSelect(e, field)}
|
||||||
className="hidden"
|
className="absolute inset-0 z-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
|
||||||
/>
|
aria-label={`Add files to ${field.fileLabel}`}
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
Accepts:{" "}
|
|
||||||
{field.allowedExtensions.join(", ").toUpperCase() ||
|
|
||||||
"All"}
|
|
||||||
</span>
|
|
||||||
{existingForField.length > 0 && (
|
|
||||||
<div className="flex flex-col gap-1 basis-full">
|
|
||||||
{existingForField.map((f, idx) => (
|
|
||||||
<ExistingFileLink
|
|
||||||
key={`${f.url}-${idx}`}
|
|
||||||
file={f}
|
|
||||||
onViewFile={onViewFile}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : isUploaded ? (
|
|
||||||
// Uploaded state: a solid success panel that still doubles as a
|
|
||||||
// replace target (click anywhere or drag a new file onto it).
|
|
||||||
<div
|
|
||||||
onDragOver={(e) => handleDrag(e, field.fileKey, true)}
|
|
||||||
onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
|
|
||||||
onDrop={(e) => handleDrop(e, field)}
|
|
||||||
className={cn(
|
|
||||||
"group relative flex items-center gap-4 rounded-lg border p-4 transition-all",
|
|
||||||
isDragOver
|
|
||||||
? "border-2 border-dashed border-primary bg-primary/5 dark:bg-primary/10"
|
|
||||||
: "border-emerald-300/70 bg-emerald-50/60 dark:border-emerald-500/30 dark:bg-emerald-500/10",
|
|
||||||
disabled &&
|
|
||||||
"opacity-50 pointer-events-none cursor-not-allowed",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
multiple={field.isMultiple}
|
|
||||||
accept={acceptString}
|
|
||||||
disabled={disabled}
|
|
||||||
onChange={(e) => handleFileSelect(e, field)}
|
|
||||||
id={`file-input-${field.fileKey}`}
|
|
||||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
|
||||||
aria-label={`Replace ${field.fileLabel}`}
|
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400">
|
{(existingForField.length > 0 || currentFiles.length > 0) && (
|
||||||
{isDragOver ? (
|
<div className="relative z-10 flex flex-col gap-1.5">
|
||||||
<UploadCloud className="h-5 w-5 animate-bounce" />
|
{/* Already-saved (server) files — view/download only */}
|
||||||
) : (
|
{existingForField.map((f, idx) => (
|
||||||
<CheckCircle2 className="h-5 w-5" />
|
<div
|
||||||
)}
|
key={`${f.url}-${idx}`}
|
||||||
</div>
|
className="flex items-center gap-2.5 rounded-lg bg-background/70 px-3 py-2 ring-1 ring-inset ring-border/60"
|
||||||
|
>
|
||||||
<div className="min-w-0 flex-1">
|
<FileIcon name={f.name} className="h-4 w-4 shrink-0" />
|
||||||
<p className="text-sm font-semibold text-foreground">
|
<div className="min-w-0 flex-1">
|
||||||
{isDragOver ? "Drop to replace" : "Document uploaded"}
|
|
||||||
</p>
|
|
||||||
{existingForField.length > 0 ? (
|
|
||||||
<div className="mt-0.5 flex flex-col gap-0.5">
|
|
||||||
{existingForField.map((f, idx) => (
|
|
||||||
<ExistingFileLink
|
<ExistingFileLink
|
||||||
key={`${f.url}-${idx}`}
|
|
||||||
file={f}
|
file={f}
|
||||||
onViewFile={onViewFile}
|
onViewFile={onViewFile}
|
||||||
|
className="max-w-none font-medium text-foreground hover:text-primary"
|
||||||
showSize
|
showSize
|
||||||
/>
|
/>
|
||||||
))}
|
</div>
|
||||||
|
<span className="shrink-0 text-[11px] text-muted-foreground">
|
||||||
|
Saved
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
))}
|
||||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
|
||||||
{isDragOver
|
{/* Just-added (in-memory) files */}
|
||||||
? "Release to replace the document on file."
|
{currentFiles.map((fileObj, idx) => (
|
||||||
: "Saved to your application. Drag a new file here or click to replace it."}
|
<div
|
||||||
</p>
|
key={`${fileObj.name}-${idx}`}
|
||||||
|
className="flex items-center gap-2.5 rounded-lg bg-background/70 px-3 py-2 ring-1 ring-inset ring-emerald-300/50 dark:ring-emerald-500/25 animate-in fade-in slide-in-from-top-1 duration-300"
|
||||||
|
>
|
||||||
|
<FileIcon
|
||||||
|
name={fileObj.name}
|
||||||
|
className="h-4 w-4 shrink-0"
|
||||||
|
/>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p
|
||||||
|
className="truncate text-xs font-medium text-foreground"
|
||||||
|
title={fileObj.name}
|
||||||
|
>
|
||||||
|
{fileObj.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-[11px] text-muted-foreground">
|
||||||
|
{formatBytes(fileObj.size)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span className="flex shrink-0 items-center gap-0.5 text-[11px] font-medium text-emerald-600 dark:text-emerald-400">
|
||||||
|
<CheckCircle2 className="h-3 w-3" /> Ready
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={() => removeFile(field.fileKey, idx)}
|
||||||
|
className={cn(
|
||||||
|
"rounded-md p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
|
||||||
|
disabled && "pointer-events-none opacity-50",
|
||||||
|
)}
|
||||||
|
aria-label={`Remove file ${fileObj.name}`}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name={`${field.fileKey}[]`}
|
||||||
|
value={fileObj.name}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{reachedLimit ? (
|
||||||
|
<div className="relative z-10 flex items-center justify-center gap-1.5 py-2 text-xs font-medium text-muted-foreground">
|
||||||
|
<CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
|
||||||
|
Maximum of {maxFiles} files reached
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"pointer-events-none relative z-10 flex flex-col items-center justify-center gap-1 text-center",
|
||||||
|
existingForField.length > 0 || currentFiles.length > 0
|
||||||
|
? "py-1"
|
||||||
|
: "py-6",
|
||||||
)}
|
)}
|
||||||
</div>
|
>
|
||||||
|
<div
|
||||||
<span className="hidden shrink-0 items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-xs font-medium text-foreground shadow-2xs transition group-hover:border-primary/50 group-hover:text-primary sm:inline-flex">
|
|
||||||
<UploadCloud className="h-3.5 w-3.5" />
|
|
||||||
Replace
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
onDragOver={(e) => handleDrag(e, field.fileKey, true)}
|
|
||||||
onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
|
|
||||||
onDrop={(e) => handleDrop(e, field)}
|
|
||||||
className={cn(
|
|
||||||
"relative border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center transition-all bg-card/50",
|
|
||||||
isDragOver
|
|
||||||
? "border-primary bg-primary/5 dark:bg-primary/10"
|
|
||||||
: "border-border hover:border-primary/50 hover:bg-muted/10",
|
|
||||||
fieldError &&
|
|
||||||
"border-destructive hover:border-destructive/80",
|
|
||||||
disabled &&
|
|
||||||
"opacity-50 pointer-events-none cursor-not-allowed",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
multiple={field.isMultiple}
|
|
||||||
accept={acceptString}
|
|
||||||
disabled={disabled}
|
|
||||||
onChange={(e) => handleFileSelect(e, field)}
|
|
||||||
id={`file-input-${field.fileKey}`}
|
|
||||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="p-3 bg-muted rounded-full mb-3 text-muted-foreground transition group-hover:scale-110">
|
|
||||||
<UploadCloud
|
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-6 w-6 text-muted-foreground",
|
"rounded-full bg-muted text-muted-foreground",
|
||||||
isDragOver && "text-primary animate-bounce",
|
existingForField.length > 0 || currentFiles.length > 0
|
||||||
|
? "p-1.5"
|
||||||
|
: "p-3",
|
||||||
)}
|
)}
|
||||||
/>
|
>
|
||||||
|
<UploadCloud
|
||||||
|
className={cn(
|
||||||
|
existingForField.length > 0 ||
|
||||||
|
currentFiles.length > 0
|
||||||
|
? "h-4 w-4"
|
||||||
|
: "h-6 w-6",
|
||||||
|
isDragOver && "animate-bounce text-primary",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-semibold text-foreground">
|
||||||
|
{isDragOver
|
||||||
|
? "Drop your files here"
|
||||||
|
: existingForField.length > 0 ||
|
||||||
|
currentFiles.length > 0
|
||||||
|
? "Add more files, or "
|
||||||
|
: "Drag & drop your files here, or "}
|
||||||
|
{!isDragOver && (
|
||||||
|
<span className="text-primary font-bold">browse</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{field.allowedExtensions.join(", ").toUpperCase() ||
|
||||||
|
"All formats"}
|
||||||
|
{" • "}
|
||||||
|
{currentFiles.length}/{maxFiles} added
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* Selected Files List */}
|
||||||
|
{currentFiles.length > 0 && (
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{currentFiles.map((fileObj, idx) => (
|
||||||
|
<NewFileCard
|
||||||
|
key={`${fileObj.name}-${idx}`}
|
||||||
|
file={fileObj}
|
||||||
|
disabled={disabled}
|
||||||
|
hasError={!!fieldError}
|
||||||
|
inputName={
|
||||||
|
field.isMultiple
|
||||||
|
? `${field.fileKey}[]`
|
||||||
|
: field.fileKey
|
||||||
|
}
|
||||||
|
onRemove={() => removeFile(field.fileKey, idx)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<p className="text-sm font-semibold text-foreground">
|
{/* Dropzone area */}
|
||||||
Drag & drop your file here, or{" "}
|
{!reachedLimit &&
|
||||||
<span className="text-primary font-bold hover:underline">
|
(variant === "minimal" ? (
|
||||||
browse
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
</span>
|
<Button
|
||||||
</p>
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={() =>
|
||||||
|
fileInputRefs.current[field.fileKey]?.click()
|
||||||
|
}
|
||||||
|
className="gap-1.5 cursor-pointer"
|
||||||
|
>
|
||||||
|
<UploadCloud className="h-4 w-4 text-muted-foreground" />
|
||||||
|
<span>
|
||||||
|
{isUploaded ? "Replace File" : "Upload File"}
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
ref={(el) => {
|
||||||
|
if (fileInputRefs.current) {
|
||||||
|
fileInputRefs.current[field.fileKey] = el;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
multiple={field.isMultiple}
|
||||||
|
accept={acceptString}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={(e) => handleFileSelect(e, field)}
|
||||||
|
className="hidden"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
Accepts:{" "}
|
||||||
|
{field.allowedExtensions.join(", ").toUpperCase() ||
|
||||||
|
"All"}
|
||||||
|
</span>
|
||||||
|
{existingForField.length > 0 && (
|
||||||
|
<div className="flex flex-col gap-1 basis-full">
|
||||||
|
{existingForField.map((f, idx) => (
|
||||||
|
<ExistingFileLink
|
||||||
|
key={`${f.url}-${idx}`}
|
||||||
|
file={f}
|
||||||
|
onViewFile={onViewFile}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : isUploaded ? (
|
||||||
|
// Uploaded state: a solid success panel that still doubles as a
|
||||||
|
// replace target (click anywhere or drag a new file onto it).
|
||||||
|
<div
|
||||||
|
onDragOver={(e) => handleDrag(e, field.fileKey, true)}
|
||||||
|
onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
|
||||||
|
onDrop={(e) => handleDrop(e, field)}
|
||||||
|
className={cn(
|
||||||
|
"group relative flex items-center gap-4 rounded-lg border p-4 transition-all",
|
||||||
|
isDragOver
|
||||||
|
? "border-2 border-dashed border-primary bg-primary/5 dark:bg-primary/10"
|
||||||
|
: "border-emerald-300/70 bg-emerald-50/60 dark:border-emerald-500/30 dark:bg-emerald-500/10",
|
||||||
|
disabled &&
|
||||||
|
"opacity-50 pointer-events-none cursor-not-allowed",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
multiple={field.isMultiple}
|
||||||
|
accept={acceptString}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={(e) => handleFileSelect(e, field)}
|
||||||
|
id={`file-input-${field.fileKey}`}
|
||||||
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
||||||
|
aria-label={`Replace ${field.fileLabel}`}
|
||||||
|
/>
|
||||||
|
|
||||||
<p className="text-xs text-muted-foreground mt-1">
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400">
|
||||||
Supported formats:{" "}
|
{isDragOver ? (
|
||||||
{field.allowedExtensions.join(", ").toUpperCase() ||
|
<UploadCloud className="h-5 w-5 animate-bounce" />
|
||||||
"All"}
|
) : (
|
||||||
</p>
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
</div>
|
)}
|
||||||
))}
|
</div>
|
||||||
|
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-sm font-semibold text-foreground">
|
||||||
|
{isDragOver
|
||||||
|
? "Drop to replace"
|
||||||
|
: "Document uploaded"}
|
||||||
|
</p>
|
||||||
|
{existingForField.length > 0 ? (
|
||||||
|
<div className="mt-0.5 flex flex-col gap-0.5">
|
||||||
|
{existingForField.map((f, idx) => (
|
||||||
|
<ExistingFileLink
|
||||||
|
key={`${f.url}-${idx}`}
|
||||||
|
file={f}
|
||||||
|
onViewFile={onViewFile}
|
||||||
|
showSize
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||||
|
{isDragOver
|
||||||
|
? "Release to replace the document on file."
|
||||||
|
: "Saved to your application. Drag a new file here or click to replace it."}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className="hidden shrink-0 items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-xs font-medium text-foreground shadow-2xs transition group-hover:border-primary/50 group-hover:text-primary sm:inline-flex">
|
||||||
|
<UploadCloud className="h-3.5 w-3.5" />
|
||||||
|
Replace
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
onDragOver={(e) => handleDrag(e, field.fileKey, true)}
|
||||||
|
onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
|
||||||
|
onDrop={(e) => handleDrop(e, field)}
|
||||||
|
className={cn(
|
||||||
|
"relative border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center transition-all bg-card/50",
|
||||||
|
isDragOver
|
||||||
|
? "border-primary bg-primary/5 dark:bg-primary/10"
|
||||||
|
: "border-border hover:border-primary/50 hover:bg-muted/10",
|
||||||
|
fieldError &&
|
||||||
|
"border-destructive hover:border-destructive/80",
|
||||||
|
disabled &&
|
||||||
|
"opacity-50 pointer-events-none cursor-not-allowed",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
multiple={field.isMultiple}
|
||||||
|
accept={acceptString}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={(e) => handleFileSelect(e, field)}
|
||||||
|
id={`file-input-${field.fileKey}`}
|
||||||
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="p-3 bg-muted rounded-full mb-3 text-muted-foreground transition group-hover:scale-110">
|
||||||
|
<UploadCloud
|
||||||
|
className={cn(
|
||||||
|
"h-6 w-6 text-muted-foreground",
|
||||||
|
isDragOver && "text-primary animate-bounce",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm font-semibold text-foreground">
|
||||||
|
Drag & drop your file here, or{" "}
|
||||||
|
<span className="text-primary font-bold hover:underline">
|
||||||
|
browse
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Supported formats:{" "}
|
||||||
|
{field.allowedExtensions.join(", ").toUpperCase() ||
|
||||||
|
"All"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Validation Error Message */}
|
{/* Validation Error Message */}
|
||||||
{fieldError && (
|
{fieldError && (
|
||||||
|
|||||||
Reference in New Issue
Block a user