react-files-preview

!react-files-preview

A versatile React component to display and manage file previews, supporting various customization options.

📋 Table of Contents

- Features
- Installation
- Basic Usage
- Live Demo
- Configuration Options
- Contributing
- License

✨ Features

- 🖼️ 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 files as a prop for controlled behavior.
- 👂 Event Callbacks: Provides callbacks for onChange, onRemove, onError, onClick, and onDrop.

📦 Installation

``bash

Using npm

npm install react-files-preview

Using yarn

yarn add react-files-preview

`

🚀 Basic Usage

`jsx
import React, { useState } from "react";
import { ReactFilesPreview } from "./components/ReactFilesPreview";

function App() {
const [files, setFiles] = useState([]);

const handleFileChange = (event: React.ChangeEvent) => {
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 (

files={files}
onChange={handleFileChange}
onRemove={handleFileRemove}
allowEditing
multiple
/>

);
}

export default App;
`

📱 Live Demo

See it in action on Stackblitz

Props

| 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 |

🤝 Contributing

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.

$3

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add some amazing feature'
4. Push to the branch: git push origin feature/amazing-feature`
5. Open a pull request

$3

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.)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.