Users on your site agree that drag and drop is really cool. They’ve probably become accustomed to expecting it.
Would you like to transfer a file using WeTransfer? To upload it, just drag and drop the file. Is a YouTube video upload required? Drag and drop can be used to upload it.
it has two effects.
- gives consumers the option to drag and drop a file.
- allows users to select a file by clicking in a conventional manner
First, we need to install npm in your application.
npm i react-drag-drop-files
The lightweight and adaptable reactjs drag and drop files library allow you to add whatever design you like to your drop area.
The file can be selected, or users can drag and drop it anywhere in the window.
You can see below code how we can use react–drag-drop-files npm
import React, { useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
export default function EmojiCom() {
const onDrop = useCallback(acceptedFiles => {
console.log(acceptedFiles, "uploaded files")
}, [])
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
{
isDragActive ?
<p>Drop the files here ...</p> :
<p>Drag 'n' drop some files here, or click to select files</p>
}
</div>
)
}
you can see below output
Options
multiple – a boolean to indicate whether or not the multiple files are enabled
disabled – use for disable the input
fileOrFiles – Creating this was motivated mostly by the ability to erase any uploaded files by specifying null or another file as the initial
children – If you wish to alter the drop zone’s interior box design. (It will eliminate the built-in default style)
maxSize – you can give max size of the file
minSize – you can give min size of the file
onDraggingStateChange – a callback function that will be made while dragging
