Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

can not multiple upload using dropzone and multer

From dropzone.js:

If you have the option uploadMultiple set to true, then Dropzone will append [] to the name.

so for multer, array('file') wont work because fieldname: 'file[0]'

And if I upload multiple files, it will be fieldname: 'file[0]' fieldname: 'file[1]' ....

I have to use upload.any(), is there any way to do some post-upload hook in multer?

like image 962
Sato Avatar asked Oct 30 '22 08:10

Sato


1 Answers

Please use below

HTML:

<form action="/uploadImages" id="buldUploadForm" enctype="multipart/form-data" method="post">
    <div class="dropzone dz-clickable" id="uploadDropzone">
       <div class="dz-default dz-message" data-dz-message="">
          <span>Drop files here to upload</span>
       </div>
    </div>
    <br />
    <input type="submit" class="btn btn-primary" id="submitAllProcess" value="Upload Images" name="submit" />
</form>

JAVASCRIPT:

Dropzone.autoDiscover = false;

function paramNameForSend() {
   return "userParamName";
}

$(document).ready(function() {
  var myDropzone = new Dropzone("#uploadDropzone", {
    url: '/uploadImages',
    maxFilesize: 5, // MB
    maxFiles: 10,
    autoProcessQueue: false,
    uploadMultiple: true,
    paramName: paramNameForSend,
    method: 'post',
    parallelUploads: 10,
    init: function() {
        var myDropzone = this;

        $("#buldUploadForm").submit(function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        }); 
      }
    });
});

MULTER:

var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  }
});

var uploadMultiple = multer({ storage : storage}).array('userParamName', 10);
like image 187
bgth Avatar answered Nov 13 '22 01:11

bgth