OverviewOfficial Website

Dropzone.js is one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website.

Add Package
yarn add react-dropzone
Import Package
import Dropzone from 'react-dropzone';
Remove Package
yarn remove react-dropzone ( or you can remove package by removing specific package from package.json )
Examples:
Title react
Dropzone 
<Dropzone
    onDrop={acceptedFiles => {
        handleAcceptedFiles(acceptedFiles);
    }}
>
    {({ getRootProps, getInputProps }) => (
        <div className="dropzone dz-clickable text-center ">
            <div className="dz-message needsclick"
                {...getRootProps()}
            >
                <div className="mb-3">
                    <i className="display-4 text-muted ri-upload-cloud-2-fill" />
                </div>
                <h4>Drop files here or click to upload.
            </div>
        </div>
    )}
</Dropzone>

<div className="list-unstyled mb-0" id="file-previews">
    {selectedFiles.map((f: any, i: number) => {
        return (
            <Card
                className="mt-1 mb-0 shadow-none border dz-processing dz-image-preview dz-success dz-complete"
                key={i + "-file"}
            >
                <div className="p-2">
                    <Row className="align-items-center">
                        <Col className="col-auto">
                            <Image
                                height="80"
                                width="100"
                                className="avatar-sm rounded bg-light"
                                alt={f.name}
                                src={f.preview}
                            />
                        </Col>
                        <Col>
                            <Link
                                to="#"
                                className="text-muted font-weight-bold"
                            >
                               {f.name}
                            </Link>
                            <p className="mb-0">
                                <strong>{f.formattedSize}</strong>
                            </p>
                        </Col>
                    </Row>
                </div>
            </Card>
        );
    })}
</div>
© Skote.