Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cawfree/react-native-firebase-upload-provider
📸 Easily and quickly upload rich media to Firebase Storage.
https://github.com/cawfree/react-native-firebase-upload-provider
firebase helper react react-native storage uploader
Last synced: 2 months ago
JSON representation
📸 Easily and quickly upload rich media to Firebase Storage.
- Host: GitHub
- URL: https://github.com/cawfree/react-native-firebase-upload-provider
- Owner: cawfree
- License: mit
- Created: 2020-01-31T11:26:59.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T06:11:16.000Z (about 2 years ago)
- Last Synced: 2024-10-28T14:43:58.487Z (2 months ago)
- Topics: firebase, helper, react, react-native, storage, uploader
- Language: JavaScript
- Homepage:
- Size: 1.29 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-firebase-upload-provider
Easily and quickly upload rich media to Firebase Storage. This library safely handles all of the lower level firebase storage transactions, whilst providing a sensible interface to synchronize your frontend with the transaction state.
## 🚀 Getting Started
Using [`npm`]():
```shell
npm install --save react-native-firebase-upload-provider
```
Using [`yarn`]():
```shell
yarn add react-native-firebase-upload-provider
```
## 📋 Prerequisites
- Make sure you've added the `google-services.json` and `GoogleService-Info.plist` to your `*/android/app/` and `*/ios/` directories respectively.
- If this sounds new to you, it would be worth checking out the [Getting Started](https://rnfirebase.io/docs/v5.x.x/getting-started) tutorials on [react-native-firebase](https://rnfirebase.io/).
- Once your project is hooked up, head over to your project in [Firebase](https://firebase.google.com/) and make sure you've [enabled Firebase Storage](https://firebase.google.com/docs/storage/web/start).
- Finally, you'll need to make sure your application has the appropriate permissions to write to the storage bucket.
- By default, they do not permit anything to be written. For testing purposes, you can go ahead and turn `false` into `true` to permit anyone to read and write.
```diff
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
- allow read, write: if false;
+ allow read, write: if true;
}
}
}
```
> ⚠️ **Note**: This is not a safe configuration to use within a production environment.
## ✍️ Usage
### 1. First, wrap your application with the `FirebaseUploadProvider`:
```javascript
import React from 'react';
import { Text } from 'react-native';
import FirebaseUploadProvider from 'react-native-firebase-upload-provider';
export default () => (
);
```
This provides all of the data dependencies required to perform a file upload from basically anywhere in your application. In particular, notice that we're required to specify which [Mime Types](https://www.npmjs.com/package/mime-types) are permitted to be uploaded to your [Storage Bucket](https://cloud.google.com/storage/docs/creating-buckets). By default, no mime types are specified as a safeguard to prevent any users from uploading potentially undesirable content.
### 2. Next, there are the [hooks](https://reactjs.org/docs/hooks-intro.html). There are two you'll be interested in:
```javascript
import { useFirebaseUploads } from 'react-native-firebase-upload-provider';
const UploadButton = ({ ...extraProps }) => {
const { useUploads, requestUpload } = useFirebaseUploads();
return ...;
}
```
#### 2.1 `requestUpload(uri)`
This hook is used to upload an asset from the local filesystem up to firebase. It is a **synchronous** call, which when invoked returns an array with the following shape:
```javascript
const [uploadId, beginUpload] = requestUpload('file://path/to/some/asset.jpeg');
```
The `uploadId` is an internal [`uuidv4`](https://www.npmjs.com/package/uuid) which is used to uniquely track the transaction of the specified file, whilst `beginUpload` is a function which when invoked attempts to start the transaction, or restart the transaction if it had previously failed.
Upon completion, `beginUpload` resolves with the raw transaction, i.e. you can make a call to `getDownloadURL()` or `getMetadata()`.
#### 2.2 `useUploads()`
This hook allows you to interrogate the state of the ongoing transactions, and have your registered component re-render when any of the transactions have been updated. This is how we can determine things like the state of the task, the number of `bytesTransferred` and the `totalNumberOfBytes`, etc.
```javascript
const { useUploads } = useFirebaseUploads();
const uploads = useUploads();
return (
);
```
This allows you to easily synchronize the interface presented to your user with the ongoing transaction.
## ✌️ License
[MIT](https://opensource.org/licenses/MIT)
