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?

Andus
  • 1,713
  • 13
  • 30

1 Answers1

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.

Ayesh Nipun
  • 568
  • 12
  • 28
  • 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? – Andus May 21 '19 at 02:05
  • Yes. I'm also getting the same type URI. You may try it. And please accept the answer if it is working. – Ayesh Nipun May 21 '19 at 03:03
  • 2
    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. – Andus May 21 '19 at 04:43
  • This answer code returned ` {"_h": 0, "_i": 0, "_j": null, "_k": null}` and doesn't work – Mehdi Faraji Nov 15 '21 at 18:19