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

# Using npm
npm install react-files-preview

# Using yarn
yarn add react-files-preview

🚀 Basic Usage

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;

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

How to Contribute

• 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

Reporting Issues

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.