Any update for blob in sdk 21?

Expo SDK
1

I was waiting for the blob implementation in Expo sdk 21 because I’ve heard you’ve been working on it. I posted this issue for firebsae stroage upload to work.

Is there any plan for blob? or it is just I missed the documents?

1 Like
2

I haven’t used it, but it looks like the blob support commit ed90309 has been added to react-native 0.48.4. And the all new Expo SDK 21 is based on react-native 0.48.4. Have fun!

1 Like
3

I think you need to wait for the XMLHttpRequest implementation, if it is not working already.

4

@clarktank is correct, this is indeed pending upstream

5

any update on this? lots of people are waiting for this one

6

Blob will not be part of SDK 22 and probably won’t be part of SDK 23 either. It is complex to integrate technically and requires integrating with React Native in a way that doesn’t add to Facebook’s maintenance burden upstream, hence why it is not something the Expo team can quickly add while being responsible.

7

Ok. I understand that. Then can you please give us good practice for uploading image to firebase storage? Many people were suffering from this for long time.

I’ve tried this example below
https://github.com/expo/react-native-blob-test/blob/master/index.common.js

and when I fetch with image.uri, the response doesn’t give me the blob function and any of its variable. Can you please check this?

The best thing is to give us a example for solution that is working.

8

Does this solution help you? Expo and uploading image Blobs? - #49 by js1599

9

I’ve just tried this one and it works. However the problem is then I have to change all the current ones to work like this. Past ones were uploaded as files…

10

@davepack I’ve tried today to give a flag when saving then get base64 to fetch url when flag is on.

When I done it. I feel like this is very bad implementation because I have to do the async await fetch everytime to get the url and like chat app, I have to fetch every user’s image fetching. It just doen’t feel right to me.

This should be just uploading file right away to firebase.

11

@ide the following code used to work for me before I upgraded to expo 21 (from expo 20)

_SelectImage = async () => {
    var pickerResult
    pickerResult = await ImagePicker.launchImageLibraryAsync({ allowsEditing: false, quality: .8, base64: true });
    if (pickerResult.cancelled) {
      this.setState({ showProgress: false })
      return;
    }
    let byteArray = this.convertToByteArray(pickerResult.base64)
    this.uploadAsByteArray(byteArray, (progress) => {})
  }

  atob = (input) => {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
    let str = input
      .replace(/=+$/, '')
      .replace(/^data:image\/‌​(png|jpg);base64,/, '‌​');
    let output = '';
    // if (str.length % 4 == 1) {   throw new Error("'atob' failed: The string to be
    // decoded is not correctly encoded."); }
    for (let bc = 0, bs = 0, buffer, i = 0; buffer = str.charAt(i++); ~buffer && (bs = bc % 4
      ? bs * 64 + buffer
      : buffer, bc++ % 4)
      ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6))
      : 0) {
      buffer = chars.indexOf(buffer);
    }
    return output;
  }

  convertToByteArray = (input) => {
    var binary_string = this.atob(input);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes
  }

  uploadAsByteArray = async (pickerResultAsByteArray, progressCallback) => {
    var metadata = { contentType: 'image/jpeg' }
    let name = new Date().getTime() + "-media.jpg"
    var storageRef = global.firebaseApp.storage().ref();
    var ref = storageRef.child('assets/' + name)
    let uploadTask = ref.put(pickerResultAsByteArray, metadata)
    uploadTask.on('state_changed', (snapshot) => {
        console.log('Upload is ' + (snapshot.bytesTransferred / snapshot.totalBytes) * 100 + '% done');
        this.setState({ progress: (snapshot.bytesTransferred / snapshot.totalBytes) * 100 })
      }, 
      (error) => { console.log("in _uploadAsByteArray error ", error) }, 
      () => {
        Image.prefetch(uploadTask.snapshot.downloadURL)
        var downloadURL = uploadTask.snapshot.downloadURL;
        this.state.images.push({visible:true, url:uploadTask.snapshot.downloadURL})
        this.setState({ showProgress: false, imageCount: this.state.imageCount + 1 })
        this.props.setPropImage(uploadTask.snapshot.downloadURL)
      }
    );
  }

with expo 21 I am getting an error “Can currently only create a Blob from other Blobs” when this line is being executed:

let uploadTask = ref.put(pickerResultAsByteArray, metadata)

12

yeah I have same error. is there any solution about uploadin image??? or did you solve??

13

No I am still getting the Blob errors with expo 21. But it’s working with expo 20.

I debugged the error and it seems it s generated from the put function from firebase. I did not change the firebase npm module only the expo version. I am not sure what is going on there.

14

sdk26: https://github.com/expo/firebase-storage-upload-example

15

Yes! Finally blob support for react-native 0.54