mirror of https://github.com/kremalicious/ipfs.git
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import React, { useCallback, ReactElement } from 'react'
|
|
import { FileWithPath, useDropzone } from 'react-dropzone'
|
|
import styles from './Dropzone.module.css'
|
|
|
|
export default function Dropzone({
|
|
handleOnDrop,
|
|
disabled,
|
|
multiple,
|
|
error
|
|
}: {
|
|
handleOnDrop(files: FileWithPath[]): void
|
|
disabled?: boolean
|
|
multiple?: boolean
|
|
error?: string
|
|
}): ReactElement {
|
|
const onDrop = useCallback(
|
|
(acceptedFiles) => handleOnDrop(acceptedFiles),
|
|
[handleOnDrop]
|
|
)
|
|
|
|
const { getRootProps, getInputProps, isDragActive, isDragReject } =
|
|
useDropzone({ onDrop })
|
|
|
|
return (
|
|
<div
|
|
{...getRootProps({
|
|
className: isDragActive
|
|
? styles.dragover
|
|
: disabled
|
|
? styles.disabled
|
|
: styles.dropzone
|
|
})}
|
|
>
|
|
<input {...getInputProps({ multiple })} />
|
|
{isDragActive && !isDragReject ? (
|
|
`Drop it like it's hot!`
|
|
) : multiple === false ? (
|
|
`Drag 'n' drop a file here, or click to select a file.`
|
|
) : error !== undefined ? (
|
|
<div className={styles.error}>{error}</div>
|
|
) : (
|
|
`Drag 'n' drop some files here, or click to select files.`
|
|
)}
|
|
</div>
|
|
)
|
|
}
|