Axios POST request gives a “Network Error” when adding image to FormData structure in React Native

Question

I'm currently building a simple app in React Native 0.62.2 for Android. I've been having some trouble with axios 0.19.2 (or even the fetch API) when trying to upload images to my API (which is written in node.js / express ). The POST request is formulated as follows:

// UserService.js
export const postNewUser = async (newUser) => {
    try {
        const photo = {
            uri: newUser.avatar.uri,
            type: 'image/jpg',
            name: newUser.avatar.fileName,
        };
        const formData = new FormData();
        Object.keys(newUser).forEach(key => formData.append(key, newUser[key]));
        formData.append('avatar', photo);
        const response = await api.post('/users', formData);

        return response.data;
    } catch (err) {
        console.log('TRACE error posting user: ', err);
        return;
    }
}

Here, the property newUser.avatar.uri is set by means of an image picker library, namely @react-native-image-picker 1.6.1 . It gives me a NetworkError whenever I append the photo variable into the FormData . Setting the URI manually with some random image from the web results in the same error. Debbuging it from the Browser, it prints out some sort of stack trace like this one:

TRACE error posting user:  Error: Network Error
    at createError (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\axios\lib\core\createError.js:16)
    at EventTarget.handleError (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\axios\lib\adapters\xhr.js:83)
    at EventTarget.dispatchEvent (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\event-target-shim\dist\event-target-shim.js:818)
    at EventTarget.setReadyState (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:575)
    at EventTarget.__didCompleteResponse (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:389)
    at C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:502
    at RCTDeviceEventEmitter.emit (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189)
    at MessageQueue.__callFunction (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425)
    at C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112
    at MessageQueue.__guard (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373)

If I, for example, comment out the line formData.append('avatar', photo);it works perfectly, ie, my API receives the request accordingly. So I think this might not be a CORS-related issue. Also, other requests, such as GETs and even other POSTs are working just fine.

I know there's a bunch of other related posts here in SO and also in GitHub, some of them related to the exact same issue. But none of the solutions I found worked out for me.

In case someone wants to check out how the routes in my API are implemented just hit me up and I will provide the code here.

Thanks in advance for any help you might give me!

Answer 1

I'm having the same issue, using the formData but without the file upload it works just fine. I did a lot of research and what I've found is an old issue that still's active in the react native repo. The solution that's suggested is using a library called rn-fetch-blob but I couln't implement it on my project. If you can make it work share your work around please.