Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DropZone acceptedFiles type filter

Tags:

dropzone.js

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?

like image 673
JAC Avatar asked Mar 03 '15 19:03

JAC


3 Answers

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.

like image 196
JAC Avatar answered Oct 17 '22 21:10

JAC


<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>
like image 1
Neeraj Kr Avatar answered Oct 17 '22 21:10

Neeraj Kr


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',
like image 1
Marshall Fungai Avatar answered Oct 17 '22 22:10

Marshall Fungai