1

I am trying to send multipart request using axios on a Expo React Native project but after spend a lot of time looking for the correct approach I cannot make it work in Android neither emulator or real device.

My multipart consists on 3 parts: JSON, image and video.

The problem comes with the JSON since it works just sending image and video alone, without adding JSON part to formData. And it also works if I send JSON as a regular axios post (not multipart), without sending image or video.

Environment:

"expo": "~46.0.16",
"react-native": "0.69.6",
"axios": "^1.1.0",

My source code:

import mime from 'mime'
import * as ImagePicker from 'expo-image-picker'
import { api } from '../../authentication/infrastructure/api'

const newPost = async (props: Props) => {
const url = '/posts'

  const formData = new FormData()

    const info = {
      title: props.title,
      description: props.description,
      stars: props.stars,
    }
  const infoJSON = JSON.stringify(info)
  const infoBlob =  new Blob([infoJSON], {
      type: 'application/json',
    })

  formData.append('info', infoBlob)
  


  const imageUri = 'file:///' + props.image?.uri.split('file:/').join('')

  const imageObject = {
        name: props.image.uri.split('/').pop(),
        height: props.image.height,
        width: props.image.width,
        type: mime.getType(imageUri),
        uri: imageUri,
      }

  const newVideoUri = 'file:///' + props.video?.uri.split('file:/').join('')

  const videoObject = {
        name: props.video.uri.split('/').pop(),
        height: props.video.height,
        width: props.video.width,
        type: mime.getType(newVideoUri),
        uri: newVideoUri,
      }
  
  formData.append('image', imageObject)
  formData.append('video', videoObject)

  const response = await api.post(url, formData, {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data',
    },
    withCredentials: true,
    transformRequest: (data) => data,
  })

  return response
}

What I have tried so far:

  1. Send JSON as a blob with content-type (above code): I get Axios "Network Error" and the only tip is the _response in the request is "Unrecognized FormData part". I added the "transformRequest" to axios function since I saw it in another stackoverflow question due to axios stringifying formData, but this solution doesn't work for me.
  2. Send JSON as a string: many solutions I see in stackoverflow is sending as a string, not a blob, and in spite of I don't get axios error, now I get backend error since I am not sending the content-type 'application-json' and cannot de-serialize it. The error is: content-type octet-stream is not supported due to I don't send content-type: 'application/json' that's why I tried with the blob approach.
  3. Using fetch instead of axios: same problems
  4. Comment FlipperOkhttpInterceptor: I saw it in another stackoverflow question since this could be the reason, but doesn't work.
  5. Use FormData from multipart-form data package: instead of using the native FormData in expo, using the one from package. Doesn't work.

I hope you can help me find a solution that will help all the community since this is a very tricky problem for a lot of users as you can check on the community questions regarding this topic.

Thank you all!

1 Answer 1

0

The URI returned by expo-image-picker is a reference to a video/image file on device memory but does not contain actual data.

You can enable base64 and upload generated base64 data.

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

1 Comment

I had already base64 enabled, and as I mentioned the problem comes with the JSON, not the files, cause the image and video alone works correctly, but fails when I add JSON to the multipart

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.