https://github.com/aaronksaunders/rn-firebase-fileupload2
React Native Firebase Blob File Upload - doing a firebase file upload with latest release of react-native... and it works
https://github.com/aaronksaunders/rn-firebase-fileupload2
blob-storage file-upload firebase firebase-storage image-upload react-native reactjs
Last synced: 8 months ago
JSON representation
React Native Firebase Blob File Upload - doing a firebase file upload with latest release of react-native... and it works
- Host: GitHub
- URL: https://github.com/aaronksaunders/rn-firebase-fileupload2
- Owner: aaronksaunders
- Created: 2018-03-10T16:50:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-16T13:30:33.000Z (over 7 years ago)
- Last Synced: 2025-01-21T20:11:25.445Z (10 months ago)
- Topics: blob-storage, file-upload, firebase, firebase-storage, image-upload, react-native, reactjs
- Language: JavaScript
- Homepage:
- Size: 1.38 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Firebase Blob File Upload
Finally doing a firebase file upload with latest release of react-native... and it works
Latest release of react-native supports blobs which FINALLY we can do file uploads out of the box to firebase, no plugins, modules or cloud code required
[Release Notes Feb 2018 - React Native](https://github.com/facebook/react-native/releases/tag/v0.54.0)
## Three Steps
### Get Image
I used the `react-native-image-picker` plugin to get a local file'uri
```javascript
getimage() {
return new Promise(resolve => {
ImagePicker.launchImageLibrary({}, response => {
return resolve(response);
});
});
}
```
[https://github.com/react-community/react-native-image-picker](https://github.com/react-community/react-native-image-picker)
### Convert Image To Blob
I used the `fetch` API to retrieve the image and convert it to a blob
```javascript
const response = await fetch(image.uri);
const blob = await response.blob();
```
[Using Fetch In React Native](https://facebook.github.io/react-native/docs/network.html)
### Basic Firebase File Upload
Once you have a blob, firebase will happily upload it to firebase storage
```javascript
const ref = firebase
.storage()
.ref("aaron")
.child(new Date().getTime() + "");
const task = ref.put(blob);
task.on(
firebase.storage.TaskEvent.STATE_CHANGED,
snapshot =>
console.log(snapshot.bytesTransferred / snapshot.totalBytes * 100),
error => {
console.log("error", error);
return error;
},
result => {
console.log("result", task.snapshot.metadata);
return result;
}
);
```
[File Upload in Firebase](https://firebase.google.com/docs/storage/web/upload-files)
## Source Code
```javascript
_uploadFile = async () => {
try {
// simple function to get image uri from device
const response = await this.getimage();
// use fetch API to convert the local image to a blob
// for uploading to firebase
const response2 = await fetch(response.uri);
const blob = await response2.blob();
// now that we have the blob, it is uploading to
// firebase as described in the documentation
const ref = firebase
.storage()
.ref("aaron")
.child(new Date().getTime() + "");
const task = ref.put(blob);
task.on(
firebase.storage.TaskEvent.STATE_CHANGED,
snapshot =>
console.log(snapshot.bytesTransferred / snapshot.totalBytes * 100),
error => {
console.log("error", error);
return error;
},
result => {
console.log("result", task.snapshot.metadata);
return result;
}
);
} catch (e) {
console.log(e);
}
};
```