mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 00:52:50 +00:00
843 lines
33 KiB
TypeScript
843 lines
33 KiB
TypeScript
import React, { useState, useMemo, useRef } from "react";
|
|
import { IFileUploadSetting, IFileUploadField } from "@edr/types/freight";
|
|
import {
|
|
UploadCloud,
|
|
FileText,
|
|
Image as ImageIcon,
|
|
File,
|
|
Trash2,
|
|
AlertCircle,
|
|
CheckCircle2,
|
|
} from "lucide-react";
|
|
import { cn } from "../../lib/utils";
|
|
import { Button } from "../button";
|
|
import type { ViewableFile } from "../FileViewer";
|
|
|
|
export interface SmartFileInputProps {
|
|
/** The settings object containing features and their upload fields config. */
|
|
file: IFileUploadSetting;
|
|
/** Controlled value: maps each fileKey to the selected File or File[]. */
|
|
value?: Record<string, File | File[] | null>;
|
|
/** Callback triggered when any field's files change. */
|
|
onChange?: (value: Record<string, File | File[] | null>) => void;
|
|
/** External form errors mapped by fileKey. */
|
|
errors?: Record<string, string>;
|
|
/**
|
|
* fileKeys whose document is already uploaded on the server. Such fields show
|
|
* an "Already uploaded" badge and a replace-oriented dropzone hint, even when
|
|
* no in-memory File is currently selected for them.
|
|
*/
|
|
uploadedKeys?: string[];
|
|
/**
|
|
* Metadata for already-uploaded files, keyed by fileKey. When a field has
|
|
* entries here, they're listed with view/download links (instead of the
|
|
* generic placeholder text) and the field counts as uploaded even if it's
|
|
* not also listed in `uploadedKeys`.
|
|
*/
|
|
existingFiles?: Record<
|
|
string,
|
|
{ name: string; url: string; size?: number; mimeType?: string | null }[]
|
|
>;
|
|
/**
|
|
* When provided, already-uploaded files render as buttons that call this with
|
|
* the file instead of opening a new browser tab. Wire it to `useFileViewer`'s
|
|
* `view` to preview documents inline:
|
|
*
|
|
* const { view, viewer } = useFileViewer();
|
|
* <SmartFileInput ... onViewFile={view} />
|
|
* {viewer}
|
|
*/
|
|
onViewFile?: (file: ViewableFile) => void;
|
|
/** Disabled state for the entire file input group. */
|
|
disabled?: boolean;
|
|
/** Display variant style. Default is "default" (large dropzone). Minimal renders a compact upload button. */
|
|
variant?: "default" | "minimal";
|
|
/** Optional custom container CSS classes. */
|
|
className?: string;
|
|
|
|
containerClassName?: string;
|
|
}
|
|
|
|
/** Helper to format file sizes in bytes to a human-readable string. */
|
|
function formatBytes(bytes: number, decimals = 2) {
|
|
if (bytes === 0) return "0 Bytes";
|
|
const k = 1024;
|
|
const dm = decimals < 0 ? 0 : decimals;
|
|
const sizes = ["Bytes", "KB", "MB", "GB"];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
|
|
}
|
|
|
|
/** Render a suitable icon based on file extension. */
|
|
function FileIcon({ name, className }: { name: string; className?: string }) {
|
|
const ext = name.split(".").pop()?.toLowerCase() || "";
|
|
|
|
if (ext === "pdf") {
|
|
return <FileText className={cn("text-red-500", className)} />;
|
|
}
|
|
|
|
if (["png", "jpg", "jpeg", "webp", "svg", "gif"].includes(ext)) {
|
|
return <ImageIcon className={cn("text-blue-500", className)} />;
|
|
}
|
|
|
|
if (["csv", "xls", "xlsx"].includes(ext)) {
|
|
return <FileText className={cn("text-emerald-500", className)} />;
|
|
}
|
|
|
|
if (["zip", "rar", "tar", "gz", "7z"].includes(ext)) {
|
|
return <File className={cn("text-amber-500", className)} />;
|
|
}
|
|
|
|
return <File className={cn("text-slate-400", className)} />;
|
|
}
|
|
|
|
type ExistingFile = {
|
|
name: string;
|
|
url: string;
|
|
size?: number;
|
|
mimeType?: string | null;
|
|
};
|
|
|
|
/**
|
|
* A single already-uploaded file. Renders a click-to-view button when
|
|
* `onViewFile` is set (inline preview via the FileViewer), otherwise a plain
|
|
* new-tab anchor.
|
|
*/
|
|
function ExistingFileLink({
|
|
file: f,
|
|
onViewFile,
|
|
className,
|
|
showSize = false,
|
|
}: {
|
|
file: ExistingFile;
|
|
onViewFile?: (file: ViewableFile) => void;
|
|
className?: string;
|
|
showSize?: boolean;
|
|
}) {
|
|
const label =
|
|
showSize && typeof f.size === "number"
|
|
? `${f.name} (${formatBytes(f.size)})`
|
|
: f.name;
|
|
|
|
if (onViewFile) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onViewFile({ name: f.name, url: f.url, mimeType: f.mimeType });
|
|
}}
|
|
className={cn(
|
|
"relative z-10 text-left text-xs text-primary hover:underline truncate max-w-xs",
|
|
className,
|
|
)}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<a
|
|
href={f.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={(e) => e.stopPropagation()}
|
|
className={cn(
|
|
"relative z-10 text-xs text-primary hover:underline truncate max-w-xs",
|
|
className,
|
|
)}
|
|
>
|
|
{label}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 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({
|
|
file,
|
|
value,
|
|
onChange,
|
|
errors,
|
|
uploadedKeys,
|
|
existingFiles,
|
|
onViewFile,
|
|
disabled = false,
|
|
variant = "default",
|
|
className,
|
|
containerClassName,
|
|
}: SmartFileInputProps) {
|
|
// Local state to manage files when the component is used in an uncontrolled manner
|
|
const [internalFiles, setInternalFiles] = useState<Record<string, File[]>>(
|
|
{},
|
|
);
|
|
|
|
// Local validation errors
|
|
const [localErrors, setLocalErrors] = useState<Record<string, string>>({});
|
|
|
|
// Drag-and-drop state active per field
|
|
const [dragActive, setDragActive] = useState<Record<string, boolean>>({});
|
|
|
|
// File input refs for programmatic clicks in minimal variant
|
|
const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
|
|
|
|
// Memoize fields sorted by the order property (ascending)
|
|
const sortedFields = useMemo(() => {
|
|
return [...file.fields].sort((a, b) => a.order - b.order);
|
|
}, [file.fields]);
|
|
|
|
// Create a map of fields for quick lookup
|
|
const fieldsMap = useMemo(() => {
|
|
return file.fields.reduce(
|
|
(acc, currentField) => {
|
|
acc[currentField.fileKey] = currentField;
|
|
return acc;
|
|
},
|
|
{} as Record<string, IFileUploadField>,
|
|
);
|
|
}, [file.fields]);
|
|
|
|
// Resolve current files list for a field
|
|
const getFilesForField = (fieldKey: string): File[] => {
|
|
const val = value ? value[fieldKey] : internalFiles[fieldKey];
|
|
if (!val) return [];
|
|
return Array.isArray(val) ? val : [val];
|
|
};
|
|
|
|
const handleFilesChange = (fieldKey: string, newFiles: File[]) => {
|
|
const field = fieldsMap[fieldKey];
|
|
if (!field) return;
|
|
|
|
const newValue = field.isMultiple ? newFiles : newFiles[0] || null;
|
|
|
|
if (onChange) {
|
|
const updatedValues = {
|
|
...(value || {}),
|
|
[fieldKey]: newValue,
|
|
};
|
|
onChange(updatedValues);
|
|
} else {
|
|
setInternalFiles((prev) => ({
|
|
...prev,
|
|
[fieldKey]: newFiles,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const processFiles = (field: IFileUploadField, incomingFiles: File[]) => {
|
|
const currentFiles = getFilesForField(field.fileKey);
|
|
const maxAllowed = field.isMultiple ? Math.max(1, field.maxFiles) : 1;
|
|
|
|
// Clean up extensions (e.g. '.pdf' or 'pdf' -> 'pdf')
|
|
const allowedExts = field.allowedExtensions.map((ext) =>
|
|
ext.toLowerCase().replace(/^\./, ""),
|
|
);
|
|
|
|
let validIncoming: File[] = [];
|
|
let errorMsg = "";
|
|
|
|
for (const fileObj of incomingFiles) {
|
|
const ext = fileObj.name.split(".").pop()?.toLowerCase() || "";
|
|
const isExtValid = allowedExts.length === 0 || allowedExts.includes(ext);
|
|
const isSizeValid = fileObj.size <= field.maxSizeMb * 1024 * 1024;
|
|
|
|
if (!isExtValid) {
|
|
errorMsg = `Invalid file extension. Allowed: ${field.allowedExtensions.join(
|
|
", ",
|
|
)}`;
|
|
break;
|
|
}
|
|
|
|
if (!isSizeValid) {
|
|
errorMsg = `File size exceeds the limit of ${field.maxSizeMb}MB`;
|
|
break;
|
|
}
|
|
|
|
validIncoming.push(fileObj);
|
|
}
|
|
|
|
if (errorMsg) {
|
|
setLocalErrors((prev) => ({ ...prev, [field.fileKey]: errorMsg }));
|
|
return;
|
|
}
|
|
|
|
// Clear local error on successful file addition
|
|
setLocalErrors((prev) => {
|
|
const updated = { ...prev };
|
|
delete updated[field.fileKey];
|
|
return updated;
|
|
});
|
|
|
|
let newFilesList: File[] = [];
|
|
if (field.isMultiple) {
|
|
newFilesList = [...currentFiles, ...validIncoming].slice(0, maxAllowed);
|
|
if (currentFiles.length + validIncoming.length > maxAllowed) {
|
|
setLocalErrors((prev) => ({
|
|
...prev,
|
|
[field.fileKey]: `Only up to ${maxAllowed} files are allowed for this field. Excess files were ignored.`,
|
|
}));
|
|
}
|
|
} else {
|
|
newFilesList = validIncoming.slice(0, 1);
|
|
}
|
|
|
|
handleFilesChange(field.fileKey, newFilesList);
|
|
};
|
|
|
|
const handleDrag = (
|
|
e: React.DragEvent,
|
|
fieldKey: string,
|
|
active: boolean,
|
|
) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (disabled) return;
|
|
setDragActive((prev) => ({ ...prev, [fieldKey]: active }));
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent, field: IFileUploadField) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (disabled) return;
|
|
setDragActive((prev) => ({ ...prev, [field.fileKey]: false }));
|
|
|
|
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
|
const filesArray = Array.from(e.dataTransfer.files);
|
|
processFiles(field, filesArray);
|
|
}
|
|
};
|
|
|
|
const handleFileSelect = (
|
|
e: React.ChangeEvent<HTMLInputElement>,
|
|
field: IFileUploadField,
|
|
) => {
|
|
if (e.target.files && e.target.files.length > 0) {
|
|
const filesArray = Array.from(e.target.files);
|
|
processFiles(field, filesArray);
|
|
e.target.value = ""; // reset so same file can be selected again
|
|
}
|
|
};
|
|
|
|
const removeFile = (fieldKey: string, indexToRemove: number) => {
|
|
if (disabled) return;
|
|
const currentFiles = getFilesForField(fieldKey);
|
|
const updatedFiles = currentFiles.filter((_, idx) => idx !== indexToRemove);
|
|
|
|
const field = fieldsMap[fieldKey];
|
|
if (field && field.isRequired && updatedFiles.length === 0) {
|
|
setLocalErrors((prev) => ({
|
|
...prev,
|
|
[fieldKey]: "This file is required",
|
|
}));
|
|
} else {
|
|
setLocalErrors((prev) => {
|
|
const updated = { ...prev };
|
|
delete updated[fieldKey];
|
|
return updated;
|
|
});
|
|
}
|
|
|
|
handleFilesChange(fieldKey, updatedFiles);
|
|
};
|
|
|
|
return (
|
|
<div className={cn("flex flex-col gap-6", className)}>
|
|
{file.description && (
|
|
<div className="text-sm text-muted-foreground border-b border-border pb-3">
|
|
{file.description}
|
|
</div>
|
|
)}
|
|
|
|
<div className={cn("flex flex-col gap-6", containerClassName)}>
|
|
{sortedFields.map((field) => {
|
|
const currentFiles = getFilesForField(field.fileKey);
|
|
const maxFiles = field.isMultiple ? Math.max(1, field.maxFiles) : 1;
|
|
const reachedLimit = currentFiles.length >= maxFiles;
|
|
const fieldError =
|
|
errors?.[field.fileKey] || localErrors[field.fileKey];
|
|
const isDragOver = dragActive[field.fileKey];
|
|
const existingForField = existingFiles?.[field.fileKey] ?? [];
|
|
// Already uploaded server-side and nothing newly picked to replace it.
|
|
const isUploaded =
|
|
((uploadedKeys?.includes(field.fileKey) ?? false) ||
|
|
existingForField.length > 0) &&
|
|
currentFiles.length === 0;
|
|
|
|
// Format accepted files for the HTML input element
|
|
const acceptString = field.allowedExtensions
|
|
.map((ext) => (ext.startsWith(".") ? ext : `.${ext}`))
|
|
.join(",");
|
|
|
|
return (
|
|
<div
|
|
key={field.id || field.fileKey}
|
|
className="flex flex-col gap-2"
|
|
>
|
|
{/* Field Header */}
|
|
<div className="flex flex-col md:flex-row md:items-baseline justify-between gap-1">
|
|
<label className="text-sm font-semibold text-foreground flex items-center gap-1.5">
|
|
<span className="flex items-center gap-1">
|
|
{field.fileLabel}
|
|
{field.isRequired && (
|
|
<span
|
|
className="text-destructive font-bold"
|
|
aria-hidden="true"
|
|
>
|
|
*
|
|
</span>
|
|
)}
|
|
</span>
|
|
{isUploaded && (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400">
|
|
<CheckCircle2 className="h-3 w-3" /> Already uploaded
|
|
</span>
|
|
)}
|
|
</label>
|
|
|
|
<span className="text-xs text-muted-foreground">
|
|
Max size: {field.maxSizeMb}MB
|
|
{field.isMultiple &&
|
|
` • Files: ${currentFiles.length}/${maxFiles}`}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Help / Description Text */}
|
|
{field.helpText && (
|
|
<p className="text-xs text-muted-foreground">
|
|
{field.helpText}
|
|
</p>
|
|
)}
|
|
|
|
{/*
|
|
Multiple-file fields (default variant) render as ONE integrated
|
|
drag-and-drop surface. Uploaded files live INSIDE the dropzone as
|
|
lightweight rows — part of the surface, not separate cards — with
|
|
the "add more" prompt on the same surface below them. A full-cover
|
|
transparent input makes clicking anywhere (outside a file row)
|
|
open the picker; the prompt is pointer-transparent so clicks fall
|
|
through to it, while file rows and their controls sit above it.
|
|
*/}
|
|
{variant === "default" && field.isMultiple ? (
|
|
<div
|
|
onDragOver={(e) => handleDrag(e, field.fileKey, true)}
|
|
onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
|
|
onDrop={(e) => handleDrop(e, field)}
|
|
className={cn(
|
|
"relative flex flex-col gap-2.5 rounded-xl border-2 border-dashed p-4 transition-all",
|
|
isDragOver
|
|
? "border-primary bg-primary/5 dark:bg-primary/10"
|
|
: fieldError
|
|
? "border-destructive/70"
|
|
: "border-border bg-card/40 hover:border-primary/40",
|
|
disabled && "pointer-events-none opacity-50",
|
|
)}
|
|
>
|
|
{/* Click anywhere on the surface (except a file row) to browse */}
|
|
{!reachedLimit && (
|
|
<input
|
|
type="file"
|
|
multiple
|
|
accept={acceptString}
|
|
disabled={disabled}
|
|
onChange={(e) => handleFileSelect(e, field)}
|
|
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}`}
|
|
/>
|
|
)}
|
|
|
|
{(existingForField.length > 0 || currentFiles.length > 0) && (
|
|
<div className="relative z-10 flex flex-col gap-1.5">
|
|
{/* Already-saved (server) files — view/download only */}
|
|
{existingForField.map((f, idx) => (
|
|
<div
|
|
key={`${f.url}-${idx}`}
|
|
className="flex items-center gap-2.5 rounded-lg bg-background/70 px-3 py-2 ring-1 ring-inset ring-border/60"
|
|
>
|
|
<FileIcon name={f.name} className="h-4 w-4 shrink-0" />
|
|
<div className="min-w-0 flex-1">
|
|
<ExistingFileLink
|
|
file={f}
|
|
onViewFile={onViewFile}
|
|
className="max-w-none font-medium text-foreground hover:text-primary"
|
|
showSize
|
|
/>
|
|
</div>
|
|
<span className="shrink-0 text-[11px] text-muted-foreground">
|
|
Saved
|
|
</span>
|
|
</div>
|
|
))}
|
|
|
|
{/* Just-added (in-memory) files */}
|
|
{currentFiles.map((fileObj, idx) => (
|
|
<div
|
|
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
|
|
className={cn(
|
|
"rounded-full bg-muted text-muted-foreground",
|
|
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>
|
|
) : (
|
|
<>
|
|
{/* 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>
|
|
)}
|
|
|
|
{/* 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
|
|
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}`}
|
|
/>
|
|
|
|
<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">
|
|
{isDragOver ? (
|
|
<UploadCloud className="h-5 w-5 animate-bounce" />
|
|
) : (
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
)}
|
|
</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="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-primary/40 bg-card px-3 py-1.5 text-xs font-semibold text-primary shadow-2xs transition group-hover:border-primary group-hover:bg-primary/5">
|
|
<UploadCloud className="h-3.5 w-3.5" />
|
|
Replace file
|
|
</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 */}
|
|
{fieldError && (
|
|
<div className="flex items-center gap-1.5 mt-1 text-xs text-destructive animate-in fade-in slide-in-from-top-1 duration-200">
|
|
<AlertCircle className="h-3.5 w-3.5" />
|
|
<span>{fieldError}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SmartFileInput;
|