Cannot read property 'Blob' of undefine

[shirleycharlin]

Hi I was prompted error message:

Here is my code:
const ImagePicker = require('react-native-image-picker')
//blob
import RNFetchBlob from 'react-native-fetch-blob'
const fs = RNFetchBlob.fs
const Blob = RNFetchBlob.polyfill.Blob

//window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
//window.Blob = Blob

const dirs = RNFetchBlob.fs.dirs
const prefix = ((Platform.OS === 'android') ? 'file://' : '')

//inside the component function
fileToUpload () {
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true,
path: 'images'
}
}

ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response)

  if (response.didCancel) {
    console.log('User cancelled photo picker')
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error)
  }
  else {
    var source

    // You can display the image using either:
    source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};

    // Or:
    // if (Platform.OS === 'android') {
    //   source = {uri: response.uri, isStatic: true};
    // } else {
    //   source = {uri: response.uri.replace('file://', ''), isStatic: true};
    // }

    let blob = new Blob(RNFetchBlob.wrap(source), { type : 'image/jpeg;BASE64'})
    // Blob creation is async, start upload task after it created

      blob.onCreated(() => {
      var metadata = {
        mediaId: mediaId,
        contentType: 'image/jpeg'
      };

      var storageRef = firebaseApp.storage().ref()

      var uploadTask = storageRef.child('images/' + mediaId).put(blob, metadata)
      uploadTask.on('state_changed', function(snapshot){

      //track upload progress
      var progress = (snapshot.bytesTransferred /snapshot.totalBytes) * 100
        console.log('Upload is '+ progress + '% done')

        switch (progress.state) {
            case firebase.storage.TaskState.PAUSED: // or 'paused'
                console.log('Upload is paused')
                break
            case firebase.storage.TaskState.RUNNING: // or 'running'
                console.log('Upload is running')
                break
        }
      },function(error){
        blob.close()
        switch(error.code){
          case 'storage/unauthorized':
            // User doesn't have permission to access the object
            break;

          case 'storage/canceled':
            // User canceled the upload
            break;

          case 'storage/unknown':
            // Unknown error occurred, inspect error.serverResponse
            break;
        }
      }, function(){
        blob.close()
        console.log('Uploaded', uploadTask.snapshot.totalBytes, 'bytes.');
        console.log(uploadTask.snapshot.metadata);
        resolve(uploadTask.snapshot.metadata.downloadURLs[0])
      }

    ) //end of uploadTask
    })

    this.setState({
      avatarSource: source
    })
  }
})

}

[wkh237]

@shirleycharlin , may I know what version react-native-fetch-blob are you using ? Web API polyfills are only available in 0.8.0 which is not a formal release at this moment, though I've successfully getting that work with Firebase SDK, but I'd like to do more tests before release.

If you're going to use alpha version, you may install the package by this command

$ npm install --save react-native-fetch-blob@alpha

You can also check out the working example code

rn-firebase-storage-upload-sample

But keep in mind the alpha version may be very unstable

[shirleycharlin]

I just simply did a npm install react-native-fetch-blob

Earlier this morning (Singapore Time)

On 27 Jul 2016, at 8:01 PM, wkh237 notifications@github.com wrote:

@shirleycharlin , may I know what version react-native-fetch-blob are you using ? Web API polyfills are only available in 0.8.0 which is not a formal release at this moment, though I've successfully getting that work with Firebase SDK, but I'd like to do more tests before release.

If you're going to use alpha version, you may install the package by this command

$ npm install --save react-native-fetch-blob@alpha
You can also check out the working example code

rn-firebase-storage-upload-sample

But keep in mind the alpha version may be very unstable

―
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[wkh237]

If you're going to use Web API polyfills (e.g. Blob, XMLHttpRequest) you will have to use alpha version at this moment.

To install latest alpha release

$ npm install --save react-native-fetch-blob@alpha

or you want to install a specific version

$ npm install --save react-native-fetch-blob@0.8.0-alpha.6

[shirleycharlin]

Hi right now I am encountering issue with Fetch blob not able to register

and can I know what is the RNFetchBlob trying to wrap here? the path directory or just the source?

var blob = new Blob(RNFetchBlob.wrap(source.uri),{ type : 'image/jpeg;BASE64'})

[wkh237]

Refer to wkh237/react-native-fetch-blob#44

[shirleycharlin]

Problem filed have solved.