Multer: How to upload multiple files?

Created on 23 Jun 2016  路  4Comments  路  Source: expressjs/multer

My client js:

function uploadFiles(files, url, callback) {
    var data = new FormData();
    $.each(files, function(key, value) {
        data.append('image-' + key, value);
    });
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function(data, textStatus, jqXHR)  {
            callback(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            callback({ errors: [textStatus] })
        }
    });
}

Server part:

router.post('/posts/attachments', authorizedToAddPosts, function(req, res) {
    upload.array('image')(req, res, function (err) {
        if (err) {
            res.sendError(err);
            return;
        }

        // ...
    });
});

...and I always getting an error 芦Unexpected field禄
What field is expected by the script?

Most helpful comment

@tonghae I was having the same issue. After digging into the code a bit, I figured it out. You'll want to first update your code to append all of your images to the same key:

data.append('images', value)

Then, on the server when you call the array method, you need to use the same key, or it will throw an error:
upload.array('images')

I figured it out by looking at the tests: https://github.com/expressjs/multer/blob/79e2c479f23d2128618aac3dd6b33a805fa84409/test/expected-files.js#L30

All 4 comments

@tonghae I was having the same issue. After digging into the code a bit, I figured it out. You'll want to first update your code to append all of your images to the same key:

data.append('images', value)

Then, on the server when you call the array method, you need to use the same key, or it will throw an error:
upload.array('images')

I figured it out by looking at the tests: https://github.com/expressjs/multer/blob/79e2c479f23d2128618aac3dd6b33a805fa84409/test/expected-files.js#L30

Thanks, it works! My mistake was at "image-...", with just common name for appended files I needed.

@tonghae would you be so kind to share the form implementation and the model of your data base to store the array of images? ;)

Closing as resolved

Was this page helpful?
0 / 5 - 0 ratings

Related issues

BlueOctober picture BlueOctober  路  3Comments

tjabdoullah picture tjabdoullah  路  4Comments

nickretallack picture nickretallack  路  4Comments

bpetty-formfast picture bpetty-formfast  路  3Comments

samipjain picture samipjain  路  4Comments