Upload multiple images to server with part params using axio react native

Question

I am trying to upload multiple images to server using axio with multiple params as request body. Basically below is the request in native android which am trying to do it in react native.

@Headers(HTTPService.NEEDS_AUTH_HEADER)
        @Multipart
        @POST("/api/post")
        Call<Post> create(
                @Part("title") RequestBody title,
                @Part("content") RequestBody content,
                @Part("location") RequestBody location,
                @Part("category") RequestBody category,
                @Part("captions") List<RequestBody> captions,
                @Part List<MultipartBody.Part> parts
        );

and this is how am trying to do in react :

const config = {
      method: 'post',
      headers: {
        'NEEDS_AUTH': true,
        Accept: 'application/json',
        'Content-type': undefined

      },
      formDataArray,
      url: PATH_API_CREATE_POST,
      data: {
        title: postTitle,
        content: postContent,
        location: locationId,
        category: categoryId,

      }
    }

    axios(config).then(res => console.log('create post ', res)).catch(err => console.log('create post err', err.response))

Here it's formDataArray :

photos.forEach(element => { let formdata = new FormData(); formdata.append("upload", { uri: element, name: 'image.jpg', type: 'image/jpg' }) formDataArray.push(formdata) });

Unfortunately no images are uploaded to server.

Change your axios config 'Content-type': undefined to 'Content-Type': 'multipart/form-data'. — Justinus Hermawan
– Justinus Hermawan, Commented Jun 26, 2018 at 15:52
photos.forEach(element => { formdata.append("parts[]", { uri: element, name: 'image.jpg', type: 'image/jpg' }) }); formdata.append('title', postTitle); formdata.append('content', postContent); formdata.append('location', locationId); formdata.append('category', categoryId); and then do axios post with formdata, not formDataArray anymore. — Justinus Hermawan
– Justinus Hermawan, Commented Jun 26, 2018 at 16:55

mxdi9i7 · Accepted Answer · 2018-09-27 20:59:06Z

7

Assuming your photos array contains an array of file system paths of the uploaded photos, Your FormData should be looped through like this:

const data = new FormData()

photos.forEach((element, i) => {
  const newFile = {
    uri: element, type: 'image/jpg'
  }
  data.append('files', newFile)
});

Then you can attach this variable data to your post request to upload the array of files to server.

edited Sep 27, 2018 at 20:59

answered Jun 26, 2018 at 16:46

mxdi9i7

6974 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vivek_Neel Over a year ago

only one file is getting uploaded though photos are 2.

Vivek_Neel Over a year ago

it worked. had to use different key when appending new file

mxdi9i7 Over a year ago

It shouldn't need to use different keys, it should work if you append multiple files to a same FormData key

ALSP Over a year ago

@Vivek_Neel how did you solve this? my data has 2 arrays but when i try to echo in backend php it only shows 1 object

mxdi9i7 Over a year ago

@Vivek_Neel In that case you need to have 2 instances of FormData for 2 arrays of images

LeonHeart · Accepted Answer · 2018-10-04 03:06:32Z

2

const data = new FormData()

photos.forEach((element, i) => {
  const newFile = {
    uri: element, type: 'image/jpg'
  }
  data.append('files[]', newFile)
});

docs say https://developer.mozilla.org/en-US/docs/Web/API/FormData/append#Example

answered Oct 4, 2018 at 3:06

LeonHeart

5618 silver badges11 bronze badges

Collectives™ on Stack Overflow

Upload multiple images to server with part params using axio react native

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related