Question

19

React axios multiple files upload

rated 0 times [ 25] [ 6] / answers: 1 / hits: 39179 / 5 Years ago, mon, october 14, 2019, 12:00:00

I'm trying upload multiple images with axios in React but i cannot figure out what is wrong. First I tried to upload single image and that work just fine. But with multiple images I'm out of options.

I'm creating FormData like so:

for (let i = 0; i < images.length; i++) {

    formData.append('productPhotos[' + i + ']', images[i]);

}

The axios request looking like this

    const config = { headers: { 'Content-Type': 'multipart/form-data' } };



    axios

        .post(endPoints.createProduct, formData, config)

        .then(res => console.log(res))

        .catch(err => console.log(err));

My back-end is written is node/express and I'm using multer for uploading. The signature is look like this:

app.post(/product, upload.array(productPhotos), (req, res) => {

I tried this back-end end point in PostMan and uploading works for just fine, so the error must be on front-end. Thanks for help.

UPDATE
Right way to pass multiple files in formData:

images.forEach(img => {

    formData.append(productPhotos, img)

})

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

natalyah

Add To Favorites

Follow

Total Points: 371

Total Questions: 90

Total Answers: 105

Location: The Bahamas

Member since Wed, Apr 12, 2023

1 Year ago

natalyah questions

1 How to decode base64-encoded json object string in node js

Sat, Jun 5, 21, 00:00, 3 Years ago

1 How to reference and load Javascript file(s) inside a React Component using a React Hook

Wed, Jul 29, 20, 00:00, 4 Years ago

1 Download file from server with Flask and JS

Fri, Jun 19, 20, 00:00, 4 Years ago

1 ant design v4 breaks react testing library tests for Select and Autocomplete

Tue, Apr 7, 20, 00:00, 4 Years ago

1 How to run JavaScript code in VSCode's terminal?

Tue, Feb 25, 20, 00:00, 4 Years ago

View All

answered 5 Years ago diane · Accepted Answer

Here is a full working set up (expanded version of the answer above)

Client side:

// silly note but make sure you're constructing files for these (if you're recording audio or video yourself)

// if you send it something other than file it will fail silently with this set-up 

let arrayOfYourFiles=[image, audio, video]

// create formData object

const formData = new FormData();

arrayOfYourFiles.forEach(file=>{

  formData.append("arrayOfFilesName", file);

});



axios({

  method: "POST",

  url: serverUrl + "/multiplefiles",

  data: formData,

  headers: {

    "Content-Type": "multipart/form-data"

  }

})

//some error handling

Server side (express, node - mutler)

const UPLOAD_FILES_DIR = "./uploads";

const storage = multer.diskStorage({

  destination(req, file, cb) {

    cb(null, UPLOAD_FILES_DIR);

  },

// in case you want to change the names of your files)

  filename(req, file = {}, cb) {

    file.mimetype = "audio/webm";

    // console.log(req)

    const {originalname} = file;

    const fileExtension = (originalname.match(/.+[S]+$/) || [])[0];

    cb(null, `${file.fieldname}${Date.now()}${fileExtension}`);

  }

});

const upload = multer({storage});



// post route that will be hit by your client (the name of the array has to match)

app.post("/multiplefiles", upload.array('arrayOfFilesName', 5), function (req, res) {

  console.log(req.files, 'files')

  //logs 3 files that have been sent from the client

}