Upload works on IOS simulator (status 200) but fails on physical device (status 500) react-native with Expo

Expo SDK
1

SDK Version: 42.0.1;
Platforms(Android/iOS): Android, IOS;
expo-camera;

Hello how are you?

I’m a mobile developer! I work with react-native and I have a code in Expo to run on Android and IOS. I’m having a problem uploading with axios.post, which in this case works on the physical Android device, it also works on the IOS emulator, but when I try to upload the same through the physical device (Iphone X), the upload fails returning status 500, the code is the same and the error log doesn’t even reach my server. I’ve tried uploading in several different ways, but the answer is always the same! Status 200 on Android emulator and physical Android device, and also status 200 on IOS emulator. On the iPhone X physical device, the answer is code 500 (internal server error). Could someone help me with this? The code is below.

upload = async() => {
const userTOKEN = AsyncStorage.getItem(‘@TOKEN’)
const url = ‘http://myUrl/api/upload/image/’
const body = new FormData();
body.append(‘image’, {
uri: this.state.imageuri,
name: ‘user.jpg’,
type: ‘image/jpeg’
});
axios({
url: url,
method: ‘POST’,
headers: {
‘Authorization’: Bearer ${(await userTOKEN).toString()},
},
data: body
})
.then(response => {
response.data
/ console.log(response.data); /
/ this.setState({ modalUpload: false }) /
/ Alert.alert('Data: ', response.data) /
}).catch(function (error) {
console.log(error);
});
};
Answers: Android Emulator (Any version): => Status: 200 , response.data = http: //myUrl//imagens/prova.jpg;

Android Physical Device (Android 11): => Status: 200 , response.data = http: //myUrl//imagens/prova.jpg;

IOS Emulator iPhone 12 Pro Max (IOS 14.5): => Status: 200 , response.data = http: //myUrl//imagens/prova.jpg;

Physical Device IOS Iphone X (Any version): => Status: 500 , console.log (error) = response: 500;

Can you tell me if it’s Apple security related? Does it have something to do with the difference between browsers?

Remember that I’m only using VSCode version 1.55.2, both on Mac and Windows.

2

Hey @carlosemanoel, unfortunately 500 is the catch-all error code so not the most insightful. Thinking it might be an Axios issue. Can you try implementing your upload to use fetch? See: examples/App.js at master · expo/examples · GitHub

Cheers,
Adam

3

@adamjnav Thanks for the answer, I had already tried it with fetch a few months ago at the beginning of the code, I decided to move to axios because the other areas of the application depend on this lib, but I’ll try again with fetch and I’ll be back to give feedback if it worked or not . Perhaps, the doubt can help other programmers in the future.

4

@adamjnav Hello friend, can I use “.then” with fetch?? Because I need to open a modal if the answer is positive or negative, and I need to close the modal of the photo using “this.setState({ modalUpload: false )}”

5

@adamjnav

Hello friend, how are you? I changed my code to fetch, but unfortunately I’m still having the same problem. I want to point out that the problem only persists on iOS. Can you tell me if the problem is with the photo capture code? My codes are set out below:

photo capture:

snap = async() => {
    if (this.camera) {
        const options = {
            quality: 0.5
        }
        const photo = await this.camera.takePictureAsync(options);
        if (photo) {
            this.setState({ imageuri: photo.uri, modalUpload: true });
        }
        console.log(photo.uri)
    }
};

photo upload:

upload = async() => {

    const userTOKEN = AsyncStorage.getItem('@TOKEN')

    const url = 'http://myUrl/api/upload/image/'

    const uri = this.state.imageuri
    const formData = new FormData()
    formData.append('image', {
        uri: uri,
        name: 'proof.jpg',
        type: 'image/jpeg'
    })

    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'Authorization': `Bearer ${(await userTOKEN).toString()}`,
        },
    })
        .then(response => response.json())
        .then(date => {
            console.log(date)
        })
        .catch(response => {
            console.log(response)
            this.setState({
                modalUpload: false,
                modalCongrats: true,
                baseButtons: false
            })
        })
 }
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.