Dropzone Upload When Submit Button Is Clicked

In this React tutorial, we'll larn how to upload single or multiple files by only dragging and dropping on the uploader zone using the react-dropzone package library. We tin display a preview of files and percentage progress bar of files being uploaded.

To brand file uploader easy and quick for users, we tin add a drop zone where users but demand to select, drag, and drop files that demand to be uploaded.

We can display important information meanwhile they are uploading like a preview of files, percentage of upload progress.

The files can be hands converted into an encoded base64 format to upload on the server. Using the react-dropzone we can add together a number of configuration and customization to both functionality and style.

Let'southward start with the implementation and endeavour it with examples using dissimilar configurations available.

Create a React Application

First, we'll create a new React application using npx create-react-app command

            $ npx create-react-app react-dropzone-file-uploader-app          

Move inside the react app

            $ cd react-dropzone-file-uploader-app          

Run awarding

            $ npm start          

Install react-dropzone Package

Subsequently creating the React application ready, install the react-dropzone parcel by running below npm command

            $ npm install --save react-dropzone-uploader          

Adding React Dropzone Uploader

React Dropzone Uploader is created by importing the Dropzone and also CSS way to apply the basic layout provided by default.

            import Dropzone from 'react-dropzone-uploader' import 'react-dropzone-uploader/dist/styles.css'          

The Drop zone is created past adding <Dropzone/> component to create a simple and nigh basic grade of upload container.

            <Dropzone     getUploadParams={getUploadParams}     onChangeStatus={handleChangeStatus}     onSubmit={handleSubmit}     accept="image/*,audio/*,video/*" />          

Above component is having following method and options properties:

• getUploadParams:Define a function triggered when the Submit button is clicked to send payload information with the postal service URL.
• onChangeStatus: Render the current status of files beingness uploaded.
• onSubmit: Triggered when the submit push button is clicked to return uploaded files array.
• accept: This property is used to limit the type of file that can be uploaded using a Dropzone uploader.

Create a new component file '~src/components/elementary-dropzone.component.js' and update information technology with below code

            // components/elementary-dropzone.component.js import React from "react";  import Dropzone from 'react-dropzone-uploader' import 'react-dropzone-uploader/dist/styles.css'  const SimpleDropZone = () => {      // Payload information and url to upload files     const getUploadParams = ({ meta }) => { render { url: 'https://httpbin.org/mail service' } }      // Render the electric current status of files being uploaded     const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) }      // Return array of uploaded files after submit button is clicked     const handleSubmit = (files, allFiles) => {         console.log(files.map(f => f.meta))         allFiles.forEach(f => f.remove())     }      render (         <Dropzone             getUploadParams={getUploadParams}             onChangeStatus={handleChangeStatus}             onSubmit={handleSubmit}             take="paradigm/*,sound/*,video/*"         />     ); };  export default SimpleDropZone;          

Render Driblet Zone Uploader in App

To render the Dropzone, open the App.js file to import the SimpleDropZone component. And so add together within the return cake

            import React from 'react'; import './App.css';  import SimpleDropZone from './components/simple-dropzone.component';  function App() {   return (     <div className="App">       <SimpleDropZone />     </div>   ); }  export default App;          

At present run the React application by executing $ npm beginning to come across information technology working:

Show Warning Message for Un-Accepted Files

The inputContent and styles holding can be used to evidence a custom style message to the user if un-accepted files are drib to upload.

            <Dropzone             getUploadParams={getUploadParams}             onChangeStatus={handleChangeStatus}             onSubmit={handleSubmit}             accept="image/*,audio/*,video/*"                          inputContent={(files, actress) => (extra.reject ? 'Merely Prototype, audio and video files allowed!' : 'Select and Drop Files')}             styles={{                 dropzoneReject: { borderColor: '#F19373', backgroundColor: '#F1BDAB' },                 inputLabel: (files, extra) => (extra.reject ? { colour: '#A02800' } : {}),             }}  />          

Validation for Minimum and Maximum Files

The Dropzone can have validation for the minimum and maximum files that tin can be uploaded by using the maxFiles property.

            <Dropzone       onChangeStatus={handleChangeStatus}       onSubmit={handleSubmit}       maxFiles={3}       inputContent="Drop iii Files"       inputWithFilesContent={files => `${iii - files.length} more than`}       submitButtonDisabled={files => files.length < iii}     />          

The Submit button will remain disabled until 3 files are not added.

Customize Mode of Dropzone

The <Dropzone/> component is a group of sections. These sections include the dropzone, preview section, submit button, and input control. These sections can be modified by defining custom JSX layout to the post-obit backdrop:

• LayoutComponent: Customize the complete layout od Dropzone.
• PreviewComponent: Customize the preview section layout.
• InputComponent: Customize the pick to select input control.
• SubmitButtonComponent: Customize the Submit push button layout.

Custom Input Control

Let'due south see how to customize the style of Choose File button and add custom events needed for it to piece of work.

Get-go, nosotros need to install the html5-file-selector npm package to fetch the assortment of files selected past input file command, and then import information technology in the component.

            $ npm install html5-file-selector          

Import the bundle

            import { getDroppedOrSelectedFiles } from 'html5-file-selector'          

Next, define the InputChooseFile JSX component to ascertain in the InputComponent belongings. We also need to add the getFilesFromEvent property to handle the file alter result.

The last component will look like this:

            // components/simple-dropzone.component.js import React from "react";  import Dropzone from 'react-dropzone-uploader' import 'react-dropzone-uploader/dist/styles.css' import { getDroppedOrSelectedFiles } from 'html5-file-selector'   const SimpleDropZone = () => {      const getUploadParams = ({ meta }) => {         console.log(meta);         return { url: 'https://httpbin.org/post' }     }      const handleChangeStatus = ({ meta, file }, status) => { panel.log(condition, meta, file) }      const handleSubmit = (files, allFiles) => {         panel.log(files.map(f => f.meta))         allFiles.forEach(f => f.remove())     }      const getFilesFromEvent = e => {         render new Promise(resolve => {             getDroppedOrSelectedFiles(e).and then(chosenFiles => {                 resolve(chosenFiles.map(f => f.fileObject))             })         })     }      const InputChooseFile = ({ have, onFiles, files, getFilesFromEvent }) => {         const text = files.length > 0 ? 'Add more files' : 'Choose files to upload'          const buttonStyle = {             backgroundColor: '#67b0ff',             color: '#fff',             cursor: 'pointer',             padding: 15,             borderRadius: 30         }          return (             <label style={buttonStyle}>                 {text}                 <input                     way={{ display: 'none' }}                     blazon="file"                     accept={accept}                     multiple                     onChange={eastward => {                         getFilesFromEvent(e).then(chosenFiles => {                             onFiles(chosenFiles)                         })                     }}                 />             </label>         )     }      return (         <Dropzone             getUploadParams={getUploadParams}             onChangeStatus={handleChangeStatus}             onSubmit={handleSubmit}             InputComponent={InputChooseFile}             getFilesFromEvent={getFilesFromEvent}             classNames         />     ); };  export default SimpleDropZone;          

The event will await like this:

Properties of Dropzone

• accept: Type of files that can be uploaded using Dropzone.
• multiple: Boolean value to enable/disable multiple file upload.
• minSizeBytes: The minimum size of files in bytes allowed.
• maxSizeBytes: The maximum size of files in bytes allowed.
• maxFiles: The number of files uploaded in the Dropzone.
• autoUpload: Boolean value to control auto-upload event after files are dropped.
• initialFiles: An array of base64 cord to upload initially.

Conclusion

The React Dropzone Uploaded provides an awesome solution creating fully-features file uploaded component. There are a number of customization backdrop bachelor to change the look co-ordinate to needs. Yous can cheque more examples and features on official documentation here.

biddletwoun1964.blogspot.com

Source: https://www.freakyjolly.com/react-upload-files-using-react-dropzone/

Share this post