[🐛] Problem with uploading image after taking the photo

[pjadczak]

Description

Hello everyone, I have a rather unusual problem. Well, it saves data retrieved from storage, I save this data to the state and then I have a button that sends these selected photos to the server. Unfortunately, there is a rather unusual situation, namely if I send photos in the next 3-5 seconds, I get a return in the form of a "Network Error" message. If I wait 3-5 seconds or more then everything is sent correctly. Before sending, I will check if the files are on the device, if anyone had an idea what I have wrong, I would be very grateful for help. So far I've already updated axios, changed it to fetch and many other attempts and nothing. Bypassing ImagePicker and uploading image files directly from the device, everything worked fine. I will mark that after downloading by ImagePicker the images are ready because I display them as thumbnails. In addition, I will write that sometimes it will be possible to perform this upload, but this is a case once in a few times, these are random cases. It seems ImagePicker is blocking the upload of the file as soon as it is created.

Code of call:

const options: ImageLibraryOptions = {
                mediaType: 'photo',
                selectionLimit: 1,
                includeBase64: false,
                includeExtra: false,
            };
            ImagePicker.launchImageLibrary(options, (response) => {
                if (response.assets){
                    setState({
                        type: 'ADD_PHOTO', 
                        data: response.assets[0]
                    });
                    addPhotoToStorage(response.assets[0]);
                    setCountPhotos(old => {
                        return { ...old,
                            allActual: old.allActual + 1, 
                            dayActual: old.dayActual + 1
                        }
                    });
                }
});

Function of sending:

export const addPhotos = async (path: string, token: string, files: PhotoUploadT[], callBack: (result: number[]) => void, timeout: number = 15000) => {

    const headers: any = {
        'Content-Type': 'multipart/form-data',
        "cache-control": "no-cache",
        'Accept': 'application/json',
        // 'Content-Type': 'application/json',
        Authorization: 'Bearer '+token
    };

    if (files.length === 0){
        console.log('empty');
        return callBack([]);
    }
    const formData = new FormData();
    formData.append('key', true);



    for(let i=0;i<files.length;i++){
        if (await RNFS.exists(files[i].uri)){
            const dataAdd = {
                uri: Platform.OS === 'ios' ? files[i].uri.replace('file://', '') : files[i].uri,
                name: files[i].fileName,
                type: files[i].type,
            };
            formData.append(`photos[]`, dataAdd);
        } else {
            console.log('file not exists!');
        }
    };

    // console.log('length: ', formData.getAll);

    try{
        const result = await axios({
            method: "post",
            url: url+'api/auth/'+path,
            data: formData,
            headers,
            
          });
        if (!result){
            callBack([]);
        } else {
            callBack(result.data != undefined ? result.data : true);
        }
    } catch (error){
        console.log('error: ', error);
        callBack([]);
    }

}

How to repeat issue and example

• Download the photo and then upload it to the server within 3-5 seconds

Solution

My problem will be solved if within 3-5 seconds of saving the file to the cache folder with ImagePicker I correctly upload to the server.

Additional Information

• Image Picker version: 5.3.1 (once i try downgrade 5.03, no result)
• React Native version: 0.70.6
• Platform: Android
• Development Operating System: Linux Mint 21 x86_64
• Dev tools: Visual Studio Code

[vishal-bhil]

@pjadczak The Same issue is faced when the image is picked from the gallery.

[hugohutri]

I have been facing the same problem (only when taking the photo. Gallery works fine)

Image picker version: 7.1.2 React Native version: 0.73.4

Waiting for 0 seconds causes the upload fail every time, Waiting for 1 second the upload sometimes succeeds, but usually fails Waiting for multiple seconds, like 6 seconds seems to work :/

[Saakve]

Hello everyone, I found a workaround. If you set the "quality" option to a value below 1, the error disappears