easy-react-dropzone

Easy Dropzone React

Component for ReactJS using React Dropzone and Material UI

Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm install --save easy-react-dropzone

or

yarn add easy-react-dropzone

Usage

Simple

import React, {useState} from 'react'
import { Dropzone } from 'easy-react-dropzone'

const MyDropzonePage = () => {
  const [files, setFiles] = useState([])
  
  return (
  <div>
    <h1>My Dropzone</h1>
    <Dropzone
      allFiles={files}
      onChange={(selectedFiles) => setFiles(selectedFiles)}
    />
  </div>
  )
}

export default MyDropzonePage

With Custom Text & Files Extensions

import React, {useState} from 'react'
import { Dropzone } from 'easy-react-dropzone'

const MyDropzonePage = () => {
  const [files, setFiles] = useState([])
  // Escolhendo as extensões
  const extensionsAccepted = ['png','jpg','jpeg','gif']
  
  return (
  <div>
    <h1>My Custom Dropzone</h1>
    <Dropzone
      textDropzone="Clique aqui ou arraste as imagens"
      fileExtensions={extensionsAccepted}
      allFiles={files}
      onChange={(selectedFiles) => setFiles(selectedFiles)}
    />
  </div>
  )
}

export default MyDropzonePage

With Custom Text & Files Extensions & Loader Progress Bar Colors

import React, {useState} from 'react'
import { Dropzone } from 'easy-react-dropzone'

const MyDropzonePage = () => {
  const [files, setFiles] = useState([])
  // Escolhendo as extensões
  const extensionsAccepted = ['png','jpg','jpeg','gif']
  
  return (
  <div>
    <h1>My Custom Dropzone With Colors in Loader Progress Bar</h1>
    <Dropzone
      textDropzone="Clique aqui ou arraste as imagens"
      progressBarColor="#91c5e3" // Bar Color Background - light blue
      progressColor="#0c81c4" // Progress Color - blue
      fileExtensions={extensionsAccepted}
      allFiles={files}
      onChange={(selectedFiles) => setFiles(selectedFiles)}
    />
  </div>
  )
}

export default MyDropzonePage

Full Example

import React, {useState} from 'react'
import { Dropzone } from 'easy-react-dropzone'

const MyDropzonePage = () => {
  const [files, setFiles] = useState([])
  // Escolhendo as extensões
  const extensionsAccepted = ['png','jpg','jpeg','gif']
  // Choose Message's Text
  const texts = {
    removedFile: "U have changed files",
    manyFilesSelecteds: "Successful to load files!",
    oneFileSelected: "Successful to load the file!",
    someFilesDontHaveEnabledExtension: "Some files don't have one of the enabled extensions...",
    someFilesCannotToBeSended: "No uploaded files have an extension enabled"
  }
  return (
  <div>
    <h1>My Custom Full Dropzone Version</h1>
    <Dropzone
      textDropzone="Clique aqui ou arraste as imagens"
      titleLoadedFiles="Os arquivos carregados são:"
      progressBarColor="#91c5e3" // Bar Color Background - light blue
      progressColor="#0c81c4" // Progress Color - blue
      fileExtensions={extensionsAccepted}
      allFiles={files}
      messages={texts}
      onChange={(selectedFiles) => setFiles(selectedFiles)}
    />
  </div>
  )
}

export default MyDropzonePage