"use client"; import React, { useState } from "react"; // Shared types type ImageFile = { id: string; file: File; preview: string; }; type FileInputProps = { multiple?: boolean; maxSizeMB?: number; onChange?: (files: File[]) => void; acceptedFileTypes?: string; }; // Compact File Input Component const CompactFileInput: React.FC = ({ multiple = false, maxSizeMB = 1, onChange, acceptedFileTypes = "image/*", }) => { const [images, setImages] = useState([]); const [error, setError] = useState(null); const fileInputRef = React.useRef(null); const maxSizeBytes = maxSizeMB * 1024 * 1024; // Convert MB to bytes const handleFileChange = (e: React.ChangeEvent) => { const selectedFiles = Array.from(e.target.files || []); // Reset error setError(null); // Validate file size const oversizedFiles = selectedFiles.filter( (file) => file.size > maxSizeBytes ); if (oversizedFiles.length > 0) { setError(`File(s) exceed the ${maxSizeMB}MB limit`); return; } // Handle single file mode if (!multiple && selectedFiles.length > 0) { // Remove previous image and URL images.forEach((img) => URL.revokeObjectURL(img.preview)); const file = selectedFiles[0]; const newImage = { id: Math.random().toString(36).substr(2, 9), file, preview: URL.createObjectURL(file), }; setImages([newImage]); onChange?.([file]); return; } // Handle multiple files const newImages = selectedFiles.map((file) => ({ id: Math.random().toString(36).substr(2, 9), file, preview: URL.createObjectURL(file), })); setImages((prev) => [...prev, ...newImages]); onChange?.(selectedFiles); }; const removeImage = (id: string) => { setImages((prev) => { const updatedImages = prev.filter((img) => { if (img.id === id) { URL.revokeObjectURL(img.preview); return false; } return true; }); // Notify parent component onChange?.(updatedImages.map((img) => img.file)); return updatedImages; }); }; const handleBrowseClick = () => { fileInputRef.current?.click(); }; return (

{multiple ? "Choose images" : "Choose an image"}

{error &&

{error}

} {images.length > 0 && (

{images.map((img) => (

))}

)}

); }; // Dropzone File Input Component const DropzoneFileInput: React.FC = ({ multiple = false, maxSizeMB = 1, onChange, acceptedFileTypes = "image/*", }) => { const [images, setImages] = useState([]); const [error, setError] = useState(null); const [isDragging, setIsDragging] = useState(false); const fileInputRef = React.useRef(null); const maxSizeBytes = maxSizeMB * 1024 * 1024; // Convert MB to bytes const handleFiles = React.useCallback( (files: File[]) => { // Reset error setError(null); // Validate file size const oversizedFiles = files.filter((file) => file.size > maxSizeBytes); if (oversizedFiles.length > 0) { setError(`File(s) exceed the ${maxSizeMB}MB limit`); return; } // Handle single file mode if (!multiple && files.length > 0) { // Remove previous images and URLs images.forEach((img) => URL.revokeObjectURL(img.preview)); const file = files[0]; const newImage = { id: Math.random().toString(36).substr(2, 9), file, preview: URL.createObjectURL(file), }; setImages([newImage]); onChange?.([file]); return; } // Handle multiple files const newImages = files.map((file) => ({ id: Math.random().toString(36).substr(2, 9), file, preview: URL.createObjectURL(file), })); setImages((prev) => [...prev, ...newImages]); onChange?.(files); }, [images, maxSizeBytes, multiple, onChange] ); const handleFileChange = (e: React.ChangeEvent) => { const selectedFiles = Array.from(e.target.files || []); handleFiles(selectedFiles); }; const removeImage = (id: string) => { setImages((prev) => { const updatedImages = prev.filter((img) => { if (img.id === id) { URL.revokeObjectURL(img.preview); return false; } return true; }); // Notify parent component onChange?.(updatedImages.map((img) => img.file)); return updatedImages; }); }; const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); }; const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); }; const handleDrop = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { const droppedFiles = Array.from(e.dataTransfer.files); const imageFiles = droppedFiles.filter((file) => file.type.startsWith("image/") ); if (imageFiles.length === 0) { setError("Please drop image files only"); return; } handleFiles(imageFiles); } }; const handleBrowseClick = () => { fileInputRef.current?.click(); }; return (

Drag & Drop {multiple ? "Images" : "an Image"} Here

Max size: {maxSizeMB}MB

{error &&

{error}

} {images.length > 0 && (

{images.length} {images.length === 1 ? "Image" : "Images"} Selected

{images.map((img) => (

{img.file.name}

))}

)}

); }; // Demo component const ImageUploadOne = () => { const [files1, setFiles1] = useState([]); const [files2, setFiles2] = useState([]); return (

Image Upload Components

1. Compact File Input

2. Dropzone File Input

); }; export default ImageUploadOne;

Image Upload components(1)

Image Upload UI

Image Upload Components

1. Compact File Input

2. Dropzone File Input