How to upload multiple files to Node.js Express server using Axios from React/Vue

Photo by Markus Spiske on Unsplash

Some common mistakes I’ve made and somewhat cryptic errors that came along the way 😁

Let’s start by initiating a node.js app

npm init

Then we want to install express for the server, and multer for managing the uploads, body-parser to manipulate request.body, cors to manage the requests that come to the server and dotenv so that we can hide our precious keys and other in environment variables

yarn add express multer body-parser cors dotenv

On the client (React/Vue/Plain JS), you will set up FormData() and append multiple files to it as such:

let img1 = yourFile1
let img2 = yourFile2
const formData = new FormData();
// It is of paramount importance for these to have the same name (the first paramater - here 'images')else multer will give you a very cryptic error
formData.append("images", img1);
formData.append("images", img2);
// you can of course append anything else you'd like
answerFormData.append("joke", "this is a poor mama joke");
axios({
    method: "POST",
    url: serverUrl + "/yourRoute",
    data: formData,
    headers: {
        "Content-Type": "multipart/form-data"…