Drag And Drop File Uploader In React JS

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

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories