react-files-preview Tailwind Templates

React Files Preview

A file view component for React apps with image editor, and a sleek design powered by Tailwind CSS. Easily integrate this component into your React applications to display files in a visually appealing manner.

#file-viewer #reactjs #react-file-view #file-view #photo-editor #thumbnail
Demo Download

react-files-preview

react-files-preview

NPM Version NPM Downloads License CodeQL

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

📋 Table of Contents

✨ 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

  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.

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes