Build a File Manager in React: Multi Uploads, Progress Bars, and Smooth Animations!
In this tutorial, you'll learn how to build a file manager in React where users can drag and drop multiple files with smooth animations and real-time upload progress. These files will be uploaded in parallel to a Node.js server running on your localhost. If an upload is interrupted, the progress indicator will turn red.
Once uploaded, the files will be displayed in a paginated Data Grid fetched from the server. Users can sort by columns, manage, download, or perform bulk actions on multiple files.
We’ll primarily focus on state management throughout the app, including handling user input for file selection (with type and quantity validation), uploading files in parallel, updating progress, and managing data on the client with caching, mutation, and invalidation.
#file_upload #react #upload_progress #multer #file_manager
🔗 Links:
Frontend Project Github Repository (Don't forget to leave a star⭐) :
https://github.com/codegenixdev/file-...
Backend Project Github Repository:
https://github.com/codegenixdev/file-...
• Zustand Tutorial for Beginners - The ...
• React Hook Form Tutorial (Zod + MUI) ...
Commands and Code Snippets:
https://gist.github.com/codegenixdev/...
React Drop Zone
Material UI
Zustand
React Query
⭐️ Contents ⭐
00:00:00 Intro
00:01:28 Project Setup
00:07:22 Create upload drop zone
00:15:14 Instantiate zustand store
00:30:20 Setup nodejs express multer upload serv
00:33:00 Upload mutations and server requests with react query and axios
00:36:30 Upload progress with axios
00:43:40 Data grid with sorting for file manager with pagination
00:46:00 Data grid queries to api with react query
01:07:00 Bulk actions for files data grid
