const [selectedFiles, setselectedFiles] = useState([]);

  function handleAcceptedFiles(files: any) {
    files.map(file: any =>
      Object.assign(file, {
        preview: URL.createObjectURL(file),
        formattedSize: formatBytes(file.size),
      })
    );
    setselectedFiles(files);
  }

  /**
   * Formats the size
   */
  function formatBytes(bytes, decimals = 2) {
    if (bytes === 0) return "0 Bytes";
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
  }
  <Dropzone
onDrop={acceptedFiles => {
handleAcceptedFiles(acceptedFiles);
}}
>
{({ getRootProps, getInputProps }) => (
<div className="dropzone dz-clickable">
<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.</h4>
</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">
            <img
                data-dz-thumbnail=""
                height="80"
                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>
    );
})}