88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import Dropzone from "../../";
|
|
|
|
export default class Accept extends React.Component {
|
|
state = {
|
|
accepted: [],
|
|
rejected: []
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<section>
|
|
<div className="dropzone">
|
|
<Dropzone
|
|
accept="image/jpeg, image/png"
|
|
onDrop={(accepted, rejected) => {
|
|
this.setState({ accepted, rejected });
|
|
}}
|
|
>
|
|
{({getRootProps}) => (
|
|
<div {...getRootProps()}>
|
|
<p>
|
|
Try dropping some files here, or click to select files to upload.
|
|
</p>
|
|
<p>Only *.jpeg and *.png images will be accepted</p>
|
|
</div>
|
|
)}
|
|
</Dropzone>
|
|
</div>
|
|
<aside>
|
|
<h2>Accepted files</h2>
|
|
<ul>
|
|
{this.state.accepted.map(f => (
|
|
<li key={f.name}>
|
|
{f.name} - {f.size} bytes
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<h2>Rejected files</h2>
|
|
<ul>
|
|
{this.state.rejected.map(f => (
|
|
<li key={f.name}>
|
|
{f.name} - {f.size} bytes
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</aside>
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
export const acceptExt = (
|
|
<Dropzone accept=".jpeg,.png">
|
|
{({getRootProps, isDragActive, isDragAccept, isDragReject}) => (
|
|
<div {...getRootProps()}>
|
|
{isDragAccept && "All files will be accepted"}
|
|
{isDragReject && "Some files will be rejected"}
|
|
{isDragActive && "Drop some files here ..."}
|
|
</div>
|
|
)}
|
|
</Dropzone>
|
|
);
|
|
|
|
export const acceptMime = (
|
|
<Dropzone accept="image/jpeg, image/png">
|
|
{({getRootProps, isDragActive, isDragAccept, isDragReject}) => (
|
|
<div {...getRootProps()}>
|
|
{isDragAccept && "All files will be accepted"}
|
|
{isDragReject && "Some files will be rejected"}
|
|
{isDragActive && "Drop some files here ..."}
|
|
</div>
|
|
)}
|
|
</Dropzone>
|
|
);
|
|
|
|
export const acceptArray = (
|
|
<Dropzone accept={['image/jpeg', 'image/png']}>
|
|
{({getRootProps, isDragActive, isDragAccept, isDragReject}) => (
|
|
<div {...getRootProps()}>
|
|
{isDragAccept && "All files will be accepted"}
|
|
{isDragReject && "Some files will be rejected"}
|
|
{isDragActive && "Drop some files here ..."}
|
|
</div>
|
|
)}
|
|
</Dropzone>
|
|
);
|