2019-09-09 13:53:06 +02:00
|
|
|
import React, { useCallback } from 'react'
|
|
|
|
import { useDropzone } from 'react-dropzone'
|
|
|
|
import styles from './Dropzone.module.scss'
|
2019-09-18 12:52:42 +02:00
|
|
|
import { formatBytes } from '../../utils/utils'
|
2019-09-09 13:53:06 +02:00
|
|
|
|
|
|
|
export default function Dropzone({
|
|
|
|
handleOnDrop,
|
2019-09-18 12:52:42 +02:00
|
|
|
disabled,
|
|
|
|
multiple
|
2019-09-09 13:53:06 +02:00
|
|
|
}: {
|
2019-09-09 15:13:44 +02:00
|
|
|
handleOnDrop(files: File[]): void
|
2019-09-09 13:53:06 +02:00
|
|
|
disabled?: boolean
|
2019-09-18 12:52:42 +02:00
|
|
|
multiple?: boolean
|
2019-09-09 13:53:06 +02:00
|
|
|
}) {
|
2020-05-19 10:36:18 +02:00
|
|
|
const onDrop = useCallback((acceptedFiles) => handleOnDrop(acceptedFiles), [
|
2019-09-09 13:53:06 +02:00
|
|
|
handleOnDrop
|
|
|
|
])
|
|
|
|
|
2019-09-18 12:52:42 +02:00
|
|
|
const {
|
|
|
|
acceptedFiles,
|
|
|
|
getRootProps,
|
|
|
|
getInputProps,
|
|
|
|
isDragActive,
|
|
|
|
isDragReject
|
|
|
|
} = useDropzone({ onDrop })
|
|
|
|
|
|
|
|
const files = acceptedFiles.map((file: any) => (
|
|
|
|
<li key={file.path}>
|
|
|
|
{file.path} - {formatBytes(file.size, 0)}
|
|
|
|
</li>
|
|
|
|
))
|
2019-09-09 13:53:06 +02:00
|
|
|
|
|
|
|
return (
|
2019-09-18 12:52:42 +02:00
|
|
|
<>
|
|
|
|
{acceptedFiles.length > 0 ? (
|
|
|
|
<aside className={styles.dropzoneFiles}>
|
|
|
|
<ul>{files}</ul>
|
|
|
|
</aside>
|
|
|
|
) : (
|
|
|
|
<div
|
|
|
|
{...getRootProps({
|
|
|
|
className: isDragActive
|
|
|
|
? styles.dragover
|
|
|
|
: disabled
|
|
|
|
? styles.disabled
|
|
|
|
: styles.dropzone
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<input {...getInputProps({ multiple })} />
|
|
|
|
<p>
|
|
|
|
{isDragActive && !isDragReject
|
|
|
|
? `Drop it like it's hot!`
|
|
|
|
: multiple
|
|
|
|
? `Drag 'n' drop some files here, or click to select files`
|
|
|
|
: `Drag 'n' drop a file here, or click to select a file`}
|
|
|
|
{}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</>
|
2019-09-09 13:53:06 +02:00
|
|
|
)
|
|
|
|
}
|