DropZone acceptedFiles type filter

Question

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/*\"<

Answer 1

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.

Answer 2

<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>

Answer 3

I think you should validate it from the controller as well.

$this->validate($request, [

        'file' => 'required|mimes:jpg,jpeg,png,bmp']

    );