4

I am trying to using React-Native-Camera to capture an image and upload to the server, the captured response only provide base64 image and relative uri path to the system's cache. I used to turn the image to a blob in websites using packages like blob-util, which doesn't work on React-native.

As I was searching around I see that most people are uploading the base64 strings directly to the server, but I can't find anything about blob, how can I get a blob from base64 image string?

2
  • 1
    did you solve this ? How to convert? Commented Aug 23, 2021 at 20:02
  • Did anyone solve this problem Commented Nov 15, 2021 at 17:57

1 Answer 1

2

I have a function in my project to convert image to a blob. Here it is. 1st function is to handle the camera. 2nd fuction is to create a blob and a image name.

addPicture = () => {
        ImagePicker.showImagePicker({ title: "Pick an Image", maxWidth: 800, maxHeight: 600 }, res => {
            if (res.didCancel) {
                console.log("User cancelled!");
            } else if (res.error) {
                console.log("Error", res.error);
            } else {
                this.updateProfilePicture(res.uri)
            }
        });
    }

This addPicture is used to launch the image picker. In above function, res means the output, that comes from showImagePicker. I had to pass the uri prop of the result(res.uri) to below function, in order to create the blob file

In below function, I wanted to name the image with userId. You can use anything you like.

updateProfilePicture = async (uri) => {
        var that = this;
        var userId = this.state.user.uid
        var re = /(?:\.([^.]+))?$/;
        var ext = re.exec(uri)[1];

        this.setState({
            currentFileType: ext
        });

        const blob = await new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.onload = function () {
                resolve(xhr.response);
            };
            xhr.onerror = function (e) {
                console.log(e);
                reject(new TypeError('Network request failed'));
            };
            xhr.responseType = 'blob';
            xhr.open('GET', uri, true);
            xhr.send(null);
        });

        var filePath = userId + '.' + that.state.currentFileType;

    }

There are some other codes in above function, which are using to uplad the image to firebase storage. I did not include those codes.

Sign up to request clarification or add additional context in comments.

4 Comments

My uri is generated by react-native-camera which looks like file:///var/mobile/Containers/Data/Application/79977D77-88EC-4E6E-BAE1-09D2EEA28EDB/Library/Caches/Camera/01BAA2AD-3335-4492-853C-DC63FCB0A419.jpg, which doesn't looks like a ordinary uri, can I make it work with this?
Yes. I'm also getting the same type URI. You may try it. And please accept the answer if it is working.
Sry but the question is about base64 string img to blob (but it looks like the answer is using an uri). However, you have inspired me to use uri to blob transfer and eventually I used https://stackoverflow.com/questions/48747278/is-it-possible-to-get-the-binary-data-from-an-image-in-react-native to achieve that. Thank you for that.
This answer code returned ` {"_h": 0, "_i": 0, "_j": null, "_k": null}` and doesn't work

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.