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:
- 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.
- 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.
- Using fetch instead of axios: same problems
- Comment
FlipperOkhttpInterceptor: I saw it in another stackoverflow question since this could be the reason, but doesn't work. - 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!