A versatile React component to display and manage file previews, supporting various customization options.
- 🖼️ Visual File Representation: Displays previews for various image file types.
- ✏️ Integrated Image Editing: Allows users to edit images using the features of
react-photo-editor(brightness, contrast, rotate, flip, draw, etc.). - 📤 Drag and Drop Support: Allows users to easily add files by dragging and dropping.
- 🖱️ Click to Browse: Enables file selection through a standard file input dialog.
- 🗑️ Remove Files: Option to display a remove icon for individual files.
- ⬇️ Download Files: Functionality to enable downloading of displayed files.
- 🔢 Slider Count: Shows the current slide number and total count for image sliders.
- 📏 File Size Display: Option to show the size of each file.
- ⚙️ Customizable Styling: Offers props for adjusting width, height, and rounded corners using Tailwind CSS classes.
- 🚫 Disable Input: Option to disable file selection.
- 📄 Accept Specific Types: Control which file types are accepted.
- 🔢 Maximum File Limits: Set constraints on the number and size of files.
- 🔄 Controlled Component: Accepts an array of
filesas a prop for controlled behavior. - 👂 Event Callbacks: Provides callbacks for
onChange,onRemove,onError,onClick, andonDrop.
# Using npm npm install react-files-preview # Using yarn yarn add react-files-preview import React, { useState } from "react"; import { ReactFilesPreview } from "./components/ReactFilesPreview"; function App() { const [files, setFiles] = useState<File[]>([]); const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { const newFiles = Array.from(event.target.files || []); setFiles((prevFiles) => [...prevFiles, ...newFiles]); console.log("Selected files:", newFiles); console.log("All files:", [...files, ...newFiles]); }; const handleFileRemove = (removedFile: File) => { setFiles((prevFiles) => prevFiles.filter((file) => file !== removedFile)); console.log("Removed file:", removedFile); }; return ( <div> <ReactFilesPreview files={files} onChange={handleFileChange} onRemove={handleFileRemove} allowEditing multiple /> </div> ); } export default App;See it in action on Stackblitz
| Name | Type | Default | Description |
|---|---|---|---|
files | File[] | [] | Pass array of file objects for default files |
url | string | null | Set image by passing image URL |
downloadFile | boolean | true | Enables file download |
removeFile | boolean | true | Show file remove icon on file hover |
showFileSize | boolean | true | Show file size under files |
showSliderCount | boolean | true | Show slides count under file slider |
disabled | boolean | false | If true, prevents user to add files by disabling the component |
multiple | boolean | true | Accepts one or more files |
accept | string | Comma-separated lists of file types. See MIME Types | |
maxFileSize | number | Maximum allowed file size in bytes e.g. 1024 x 1024 x 5 == 5MB | |
maxFiles | number | Maximum files allowed to be added | |
width | string | rfp-basis-11/12 | Tailwind CSS flex-basis class https://tailwindcss.com/docs/flex-basis |
height | string | Tailwind CSS height class https://tailwindcss.com/docs/height | |
fileWidth | string | rfp-w-44 | Tailwind CSS width class https://tailwindcss.com/docs/width |
fileHeight | string | rfp-h-32 | Tailwind CSS height class https://tailwindcss.com/docs/height |
getFile | func | Returns all current files | |
onChange | func | Returns selected file(s) | |
onRemove | func | Returns the removed file | |
onError | func | Returns error message as string | |
onClick | func | Returns file on click |
Contributions to react-files-preview are welcome! If you have any issues, feature requests, or improvements, please open an issue or submit a pull request on the GitHub repository.
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a pull request
When reporting issues, please provide:
- A clear description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Screenshots if applicable
- Environment details (browser, OS, etc.)
This project is licensed under the MIT License - see the LICENSE file for details.