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

🤝 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

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

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.