Upload View Files
This React-based file uploader allows users to upload, preview, and manage multiple files, including images, videos, and PDFs. It features a clean Tailwind CSS UI, dynamic previews using URL.createObjectURL, and options to view, close, or delete files. Built with React Hooks (useState, useRef) for a smooth and interactive experience.
File Uploader & Viewer
This is a React-based file uploader and previewer that allows users to upload, view, and manage multiple files including images, videos, and PDFs. The project leverages React Hooks (useState, useRef) and Tailwind CSS for a seamless UI experience.
Features
- Multiple File Uploads – Users can select and upload multiple files at once.
- Preview Support – Images, videos, and PDFs can be previewed directly in the app.
- File Management – Users can delete or close the preview of selected files.
- Dynamic Object URLs – Utilizes
URL.createObjectURL
for real-time previews.
- Modern UI – Built using Tailwind CSS for a clean and responsive design.
Installation
- Clone this repository:
git clone https://github.com/your-username/your-repository.git
- Navigate to the project directory:
cd your-repository
- Install dependencies:
npm install
- Start the development server:
npm start
Usage
- Click on the upload box to select files.
- Uploaded files appear in a list with preview, close, and delete options.
- Click on "View" to see a larger preview of the selected file.
- Click on "Close" to remove the preview.
- Click on the delete icon to remove a file from the list.
Technologies Used
- React (useState, useRef for state and file references)
- Tailwind CSS (for responsive UI styling)
- Lucide React Icons (for UI elements like upload and delete icons)
Contributing
Feel free to contribute by submitting a pull request or reporting any issues.
License
This project is licensed under the MIT License.