multer.array returns [] when uploading multiple files

[thammarith]

Hi, I'm having troubles with uploading multiple files (axios + multer + multerS3)

I tried using multer.single and it works but multer.array('images') always return [] when console.log(req.files)

Client side

<!-- Vue -->
<input
  id="media-upload_file-input"
  ref="proofImages"
  type="file"
  multiple
/>

and the upload logic is

const { files } = this.$refs.proofImages; // same as document.getElementById
const formData = new FormData();

formData.append('images[]', files); // also tried images without []

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
});

Server side

function getMulterS3Config(bucketName) {
  return multerS3({
    s3,
    bucket: bucketName,
    acl: 'public-read',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    key: (req, file, callback) => {
      callback(null, Date.now().toString());
    },
  });
}

const multer = multer({
  storage: getMulterS3Config(bucket),
});

router.post('/campaign/upload', [ensureAuthenticated, multer.array('images[]')], (req, res) => {
  console.log(req.files); // always []
});

POST body

-----------------------------3519451464120194962483436149
Content-Disposition: form-data; name="images[]"

[object FileList]
-----------------------------3519451464120194962483436149--

[thealek0]

for (const file of files) {
   formData.append('images[]', file)
}

[jonchurch]

Did the above suggestion help you?

This falls under issues with your clientside, which we see lots of on the repo (without searching myself, I know support has been provided for this question here in the past).

Recently someone PR'd in an example to the Readme about using Multer with an HTML form, and I think we should add an example using FormData like you are here.

Any feedback on what documentation would have helped you avoid this issue, @thammarith, would be well received 🙏

[jonchurch]

Closing as no response