Implement Blob and other polyfills

[wkh237]

According to #37 advice from @vaibhawc , perhaps we should consider implement Blob class on RN since we already have network and fs APIs. This may let some JS libraries that depends on web API becomes available in RN. At least we can try to make firebase.storage work.

Work in progress document

Spec Reference

These are polyfills that planned to be implemented so far

• Blob
• File
• XMLHttpRequest
• FileReader (postponed)
• Test cases
• Documentation

This feature will develop on branch 0.8.0

[wkh237]

Related to facebook/react-native#8684

[wkh237]

merged into 0.8.0

[wkh237]

A working example base on 0.8.0-alpha.5

https://github.com/wkh237/rn-firebase-storage-upload-sample

[wkh237]

test case reference

https://github.com/w3c/web-platform-tests/blob/master/XMLHttpRequest/

[dcworldwide]

Awesome work. I've quickly tested out uploading a file to firebase on 0.8.0-alpha.5 but I did have an issue.

07-26 13:41:29.604  3333  3370 I ReactNativeJS: 'Blob', 'verbose:', 'Blob constructor called', 'mime', 'image/png;BASE64', 'type', 'string', 'length', 68
07-26 13:41:29.604  3333  3370 I ReactNativeJS: 'Blob', 'verbose:', 'create Blob cache file from file path', 'RNFetchBlob-file://file:/data/user/0/com.mva/cache/1469504489517.PNG'
07-26 13:41:29.604  3333  3370 I ReactNativeJS: 'Blob', 'verbose:', 'register blob onCreated', 0
07-26 13:41:29.606  3333  3370 I ReactNativeJS: 'Blob', 'error:', 'RNFetchBlob could not create Blob : file:/data/user/0/com.mva/cache/1469504489517.PNG', 'stat error: failed to list path `file:/data/user/0/com.mva/cache/1469504489517.PNG` for it is not exist or it is not a folder'

// create Blob from BASE64 data
                    let blob = new Blob(RNFetchBlob.wrap(media.url), {type: 'image/png;BASE64'})

                    // Blob creation is async, start upload task after it created
                    blob.onCreated(() => {

                        var metadata = {
                            customMetadata: {
                                mediaId: mediaId,
                                createdBy: user.uid,
                            },
                            contentType: 'image/jpeg'
                        }

                        var storageRef = firebase.storage().ref();

                        // Push to child path.
                        var uploadTask = storageRef.child('media/' + mediaId).put(blob, metadata);

                        // Pause the upload
                        // uploadTask.pause();

                        // Resume the upload
                        // uploadTask.resume();

                        // Cancel the upload
                        // uploadTask.cancel();

                        uploadTask.on('state_changed',
                            function (progress) {
                                // Observe state change events such as progress, pause, and resume
                                // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
                                var progress = (progress.bytesTransferred / progress.totalBytes) * 100;

                                console.log('Upload is ' + progress + '% done');
                                console.log(firebase.storage.TaskState.PAUSED)

                                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 (err) {

                                blob.close()
                                console.error(err)

                                switch (err.code) {
                                    case 'storage/unauthorized':
                                        reject(err)
                                    case 'storage/canceled':
                                        reject(err)
                                    case 'storage/unknown':
                                        reject(err)
                                    default:
                                        reject(err)
                                }

                            }, function () {
                                blob.close()
                                console.log('Uploaded', uploadTask.snapshot.totalBytes, 'bytes.');
                                console.log(uploadTask.snapshot.metadata);
                                resolve(uploadTask.snapshot.metadata.downloadURLs[0])
                            }
                        );

I realise this is alpha so there is no point testing it just yet. Just wanted to say I"m really happy your tackling an important problem and am looking forward to using your lib :)

[wkh237]

@dcworldwide , thank you for your information ! I think you might try removing the prefix file: from the path, and see if it works then 👍

[dcworldwide]

Ok I'll try that, thanks 👍

[shirleycharlin]

@dcworldwide hey I have also encounter the same issue right now. Can I know if you have resolved it? :)

[shirleycharlin]

right now I am encountering with these error message:

Blob verbose: Blob constructor called mime image/jpeg;BASE64 type string length 34
log.js:24 Blob verbose: create Blob cache file from file path RNFetchBlob-file://[object Object]
log.js:24 Blob verbose: register blob onCreated 0
log.js:36 Blob error: RNFetchBlob could not create Blob : [object Object] failed to list path [object Object] for it is not exist or it is not exist

and I am using 0.8.0-alpha.6

[wkh237]

@shirleycharlin , I think that's because you're using an object as first argument of Blob constructor.

please refer to the document

[shirleycharlin]

I have resolve it. I actually uses the syntax from Mr @dcworldwide . if you don't mind I would like to copy and paste these code of mine later.

[wkh237]

@shirleycharlin , great to hear that 👍 Please feel free to leave any comment or message.