59 lines
1.4 KiB
Markdown
59 lines
1.4 KiB
Markdown
By providing `maxFiles` prop you can limit how many files the dropzone accepts.
|
|
|
|
**Note** that this prop is enabled when the `multiple` prop is enabled.
|
|
The default value for this prop is 0, which means there's no limitation to how many files are accepted.
|
|
|
|
|
|
```jsx harmony
|
|
import React from 'react';
|
|
import {useDropzone} from 'react-dropzone';
|
|
|
|
function AcceptMaxFiles(props) {
|
|
const {
|
|
acceptedFiles,
|
|
fileRejections,
|
|
getRootProps,
|
|
getInputProps
|
|
} = useDropzone({
|
|
maxFiles:2
|
|
});
|
|
|
|
const acceptedFileItems = acceptedFiles.map(file => (
|
|
<li key={file.path}>
|
|
{file.path} - {file.size} bytes
|
|
</li>
|
|
));
|
|
|
|
const fileRejectionItems = fileRejections.map(({ file, errors }) => {
|
|
return (
|
|
<li key={file.path}>
|
|
{file.path} - {file.size} bytes
|
|
<ul>
|
|
{errors.map(e => <li key={e.code}>{e.message}</li>)}
|
|
</ul>
|
|
|
|
</li>
|
|
)
|
|
});
|
|
|
|
|
|
return (
|
|
<section className="container">
|
|
<div {...getRootProps({ className: 'dropzone' })}>
|
|
<input {...getInputProps()} />
|
|
<p>Drag 'n' drop some files here, or click to select files</p>
|
|
<em>(2 files are the maximum number of files you can drop here)</em>
|
|
</div>
|
|
<aside>
|
|
<h4>Accepted files</h4>
|
|
<ul>{acceptedFileItems}</ul>
|
|
<h4>Rejected files</h4>
|
|
<ul>{fileRejectionItems}</ul>
|
|
</aside>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
<AcceptMaxFiles />
|
|
```
|