Upload File
A powerful, interactive file uploader with drag-and-drop support, real-time progress simulation, and smooth sliding animations.Copy Markdown
Preview
The Upload File component provides a sleek, modern interface for handling file selections with simulated upload progress and professional aesthetics.
Usage
Getting Files
To access the files selected or uploaded by the user, pass an onFilesChange callback. This callback is triggered whenever the file list changes (adding, completing, or removing).
const handleFiles = (files: File[]) => {
// Array of raw File objects
files.forEach(file => {
console.log(`File: ${file.name}, Size: ${file.size}`);
});
};
<UploadFile onFilesChange={handleFiles} />Features
Drag & Drop
Seamlessly drop files from your desktop directly into the browser. The component provides instant visual feedback with an interactive drag-over state.
Real-time Simulation
Features a robust upload simulation logic that tracks progress, calculates loaded vs. total file size, and provides a visual progress bar with glow effects.
Smart Formatting
Automatically formats file sizes into human-readable units (Bytes, KB, MB, GB) with high precision to prevent rounding glitches.
Smooth Animations
Powered by motion/react for fluid sliding transitions when files enter or exit the lists. Uses AnimatePresence for professional-grade layout animations.
Installation
Automatic (CLI)
npx shadcn@latest add https://nurav-ui.vercel.app/r/upload-file.json