I've got a DropZone form working perfectly with one exception, I can't seem to limit the file types as precisely as I need to.
Using acceptedFiles: "image/*"
dims all folders and file types that are not images, as it should. TIFF is included though and I need to reduce it to exclusively JPG and PNG. A lot of trial and error has not gotten me there.
What I tried:
acceptedFiles: "image/jpg"
acceptedFiles: ".jpeg,.jpg,.png"
acceptedFiles: "image/jpg,png"
But they all make everything selectable.
What's the correct format for just JPG and PNG?
More trial and error eventually turned up the solution:
Dropzone.options.dzone = {
acceptedFiles: "image/jpeg,image/png,image/gif"
}
Apparently my error was primarily in using jpg which made it all fail. The above works like a charm.
<Dropzone
onDrop={this.handleFilesUpload}
>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input
{...getInputProps()}
accept=".csv" /*you can use any file type */
/>
<div className="drag-container">
<img
className="drag-img"
src={Drag}
alt="drag-img"
/>
<p className="drag-container-para">Drop files here, or click to select files</p>
</div>
</div>
)}
</Dropzone>
In my case, I wanted to hide unwanted file types from the context box as well. I had to add "acceptedMimeTypes", although in the docs it shows it as depreciated.
acceptFiles: 'image/jpeg,image/png,image/gif,image/jpg',
acceptedMimeTypes: 'image/jpeg,image/png,image/gif,image/jpg',
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With