react-file-uploadify

A flexible and customizable reactjs file library with the ability to drag and drop files. Users can drag and drop files and delete selected files. You can easily customize the component by adding your own classes to props, limit the number of accepted files to their minimum and maximum number, the total size of all selected files in bytes, MB and file types. Via props, you can select the language, by default "en", "ru" is still available

Install

npm install --save react-file-uploadify

Usage

import {FileDropZone} from 'react-file-uploadify'
import 'react-file-uploadify/dist/index.css'
import React,{useState} from "react";
import myClassNames from './myClassNames.module.css'
const App = () => {
  const [files,setFiles] = useState([])
  const updateFiles = (incommingFiles) => {
    setFiles(incommingFiles);
  };
  return <div style={{width:"600px",height:"300px",margin:"32px"}}>
    <FileDropZone
      onChange={updateFiles}
      maxFilesSizeInMb={2}
      acceptTypes={[".docx",".pdf",".jpg"]}
      haveFileList={true}
      multiple={true}
      minFiles={2}
      maxFiles={5}
      lang={"en"}
      classNames={{
        fileIcon: myClassNames.myFileIconClass,
        fileBox: myClassNames.myFileBoxClass,
        fileBoxButton: myClassNames.myFileButton,
        dropZoneBox: myClassNames.myFileDropZoneBoxClass,
        button: myClassNames.myButtonClass,
      }}
    />
  </div>

}

export default App

Properties

| Prop | Default | Type | Description | |------------------------|-----------|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------| | multiple | false | Boolean | The ability to select multiple files | | acceptTypes | undefined | Array | File types that can be selected | | maxFiles | undefined | Number | Maximum number of accepted files | | maxFilesSizeInMb | undefined | Number | The maximum number of mb of all selected files | | maxFilesSizeInBytes | undefined | Number | The maximum number of bytes of all selected files | | haveFileList | true | Boolean | Show a list of selected files | | classNames | undefined | Object |all classes {dropZoneBox: myClassNames.myFileDropZoneBoxClass, button: myClassNames.myButtonClass, fileIcon: myClassNames.myFileIconClass, fileBox: myClassNames.myFileBoxClass,fileBoxButton: myClassNames.myFileButton,fileName: myClassNames.myFileName} | lang | en | String | The interface language is en and ru | | onChange | undefined | ChangeEventHandler | The selected files are in the function argument |

License

MIT © temaweb10