react-files-preview

A file view component for react.

Installation

npm i react-files-preview

🚀 Demo

https://react-files-preview.netlify.app/

Usage

import { ReactFilesPreview } from 'react-files-preview'
import 'react-files-preview/dist/style.css'  /* import css file*/

function App() {
  return (
    <>
      <ReactFilesPreview />
    </>
  )
}

export default App

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 | 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 | w-44 | Tailwind CSS width class https://tailwindcss.com/docs/width | | fileHeight | string | 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 |