

Run your application and observe it in a web browser. Src/App.js import DropzoneComponent from './DropzoneComponent' React-dropzone has default settings that allow you to add it with minimal configuration.Īt a minimum, you will need an onDrop property that will handle the dropped files and some call-to-action text to help limit any user confusion: npm install react-dropzone this point, you have a new React project with react-dropzone.npx create-react-app react-dropzone-example.Start with using create-react-app to generate a React App and then install dependecies:

This tutorial was verified with Node v15.3.0, npm v7.4.0, react v17.0.1, and react-dropzone v11.2.4. Follow How to Install Node.js and Create a Local Development Environment.

The handleChange function is invoked once a user selected the file. In the above code, we have used react hooks to manage the state and we have two functions which are handleChange and uploadFile. post ( '/upload', ( req, res ) => export default FileUpload use ( fileUpload ( ) ) // file upload apiĪpp.

use ( cors ( ) ) // it enables all cors requestsĪpp. static ( 'public' ) ) //to access the files in public folderĪpp. Const express = require ( 'express' ) const fileUpload = require ( 'express-fileupload' ) const cors = require ( 'cors' ) const app = express ( ) // middle wareĪpp.
