Error: Unexpected field. using uploadMultiple from dropzone.js

Question

I wanted to have a way so users can choose images to send with a review.

so I use dropzone.js . It seems like having problems sending multiple images in one request. I thought that req.files would contain an array of files but that didn't happen. right now I see a problem because dropzone adds [] with the indexes inside for the name param.

when adding to images to dropzone I see something like this in request payload:

------WebKitFormBoundaryJOpGX6kWaoknKhIN
Content-Disposition: form-data; name="images[0]"; filename="data.png"
Content-Type: image/png


------WebKitFormBoundaryJOpGX6kWaoknKhIN
Content-Disposition: form-data; name="images[1]"; filename="loginButton.png"
Content-Type: image/png


------WebKitFormBoundaryJOpGX6kWaoknKhIN--

I feel like [0] and [1] is causing me problems

server:

app.post("/files" , upload.array("images"), (req, res) =>{
    console.log("hit here")
    console.log("req.file :", req.file)
    // console.log(req.body)
    console.log(req.files)
    res.send("ok")
})

simple multer: I had more complicated one before

var upload = multer({ dest: "./uploads" })

frontend:

<script src = "/dropzone.js"></script>
<script>
    $(function(){
        Dropzone.autoDiscover = false;
        var myDropZone = new Dropzone(".dropzone", {
            url : "/files",
            // uploadMultiple : true,

            autoProcessQueue : false,
             parallelUploads: 5,
            paramName: "images",
            uploadMultiple: true,
            init : function(){
                this.on("success", function(){
                    // alert("success")
                })
                this.on("sendingmultiple", function(){
                    console.log("SENDING MULTIPLE");
                })
                this.on("errormultiple", function(files, response){
                    console.log("ERROR");
                    console.log(response);
                    console.log(files);
                })
            } 
        })
            $("#skip, #login").on("click", function(e){
                myDropZone.processQueue();
            })
    })

</script>
<div class = "dropzone"></div>
   <div id = "skip"> skip </div>
   <div id = "login">login</div>

when I get rid of uploadMultiple: true, I get the images in the FS but it looks like multiple post request were made there is no req.files array with multiple images. I thought there would be

Answer 1

You should be able to force the name by specifying a function for paramName instead of a string:

paramName: function() { return 'images'; },

which will prevent any suffixes from being added to the form fields.