Search code examples
androidamazon-web-servicesreact-nativeamazon-s3xmlhttprequest

Cannot send image in base64 format with XHR to aws S3 in android(react-native)


I got very strange issue: we have scan functionality for documents in our app and as the result scan give's me encoded base64 image with photo. Everything is good on ios platform but when I trying to send my picture on android, I get xhr.status 0 and error. Also, next strange thing is that when I starting debug mode and enable network inspection in react-native-debugger, picture is sending without errors. I was trying it on release app version, installed on my device, but still got an error with status 0

XHR request

export const uploadXHRImage = (url: string, data: IDataUploadImage) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve('Image successfully uploaded to S3');
                } else {
                    reject(localize('failedUploadImage'));
                }
            }
        };
        xhr.ontimeout = () => reject(localize('timeoutUploadImage'));
        xhr.timeout = UPLOAD_IMAGE_TIMEOUT;
        xhr.open('PUT', url);
        xhr.setRequestHeader('Content-Type', data.type);
        xhr.send(data);
    });
};

Solution

  • I found the answer: Android can not process xhr send image, while image isn't saved as file in cache or other directory. Also, android needs file:// before data. Example is here:

    saveImage = (image: string) => {
            if (IS_IOS) {
                return `data:image/jpg;base64,${image}`;
            }
    
            const tempFileDirectory = `${fs.CachesDirectoryPath}`;
            const tempFilePath = `${tempFileDirectory}/${uuidv4()}.jpg`;
            fs.writeFile(tempFilePath, image, 'base64');
            return `file://${tempFilePath}`;
        };