https://github.com/aaronksaunders/react-custom-fb-upload-hooks
sample application for ionic react js custom hook for file upload to firebase storage
https://github.com/aaronksaunders/react-custom-fb-upload-hooks
file-upload firebase firebase-authentication firebase-storage ionic-framework javascript react-hooks reactjs
Last synced: about 2 months ago
JSON representation
sample application for ionic react js custom hook for file upload to firebase storage
- Host: GitHub
- URL: https://github.com/aaronksaunders/react-custom-fb-upload-hooks
- Owner: aaronksaunders
- Created: 2019-11-28T03:13:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T13:22:11.000Z (over 3 years ago)
- Last Synced: 2025-03-15T04:26:35.344Z (about 1 year ago)
- Topics: file-upload, firebase, firebase-authentication, firebase-storage, ionic-framework, javascript, react-hooks, reactjs
- Language: JavaScript
- Homepage:
- Size: 952 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Ionic: ReactJS Custom Firebase Storage Hook
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Sample app integrating firebase with a react application using react hooks api and [React Firebase Hooks](https://github.com/CSFrequency/react-firebase-hooks) - A set of reusable [react hooks](https://reactjs.org/docs/hooks-intro.html) for [Firebase](https://firebase.google.com/docs/web/setup?authuser=0).
**We also have built our own custom firebase storage file upload hook**, [jump directly to source code](https://github.com/aaronksaunders/react-custom-fb-upload-hooks/blob/master/src/hooks/use-firebase-upload.js)
## Getting A Collecting of Things
This is from firebase-hooks, it allows us to query all of the item from the `things` collection in the database in descending order based on the creation data. the `value` will containg the results of the query that we will loop through to render the list items
```javascript
const [value, loading, error] = useCollection(
firebase
.firestore()
.collection("image-file")
.orderBy("createdOn", "desc"),
{
snapshotListenOptions: { includeMetadataChanges: true }
}
);
```
## Adding a Specific Thing
When saving the thing, determine if it is a new object or an existing object by checking to see if there was an `initialValue` provided as a property. If there was, then we have an object id so we need to update the object and not create a new object
```javascript
/**
* on save determine if it is a new object or an existing object
* by check to see if there was an initial value provided
*/
const onSave = async () => {
let collectionRef = firebase.firestore().collection("image-file");
await collectionRef.add({ name: thing, createdOn: new Date().getTime() });
setThing("");
clear();
};
```
## Uploading a File to Firebase Storage
- [See Code](https://github.com/aaronksaunders/react-custom-fb-upload-hooks/blob/master/src/hooks/use-firebase-upload.js)
- **working on more detailed blog post**
## Deleting A Specific Thing
There is no firebase-hook to delete an object, we just used the firebase javascript api to remove the object
you need to remove the object from firebase storage first...
```javascript
// reference is stored of document that will be deleted next
const storageRef = firebase.storage().ref().child(ref);
await storageRef.delete();
```
```javascript
/**
* deletes item from firebase database using the id
* of the object
*/
let result = await firebase.firestore()
.collection("image-file")
.doc(id)
.delete();
};
```
## Setting Up For Capacitor
### Using Capacitor Camera Plugin
I used the Camera Plugin to address issues I was running into related to orientation when running the application on my iOS device.
```javascript
import { defineCustomElements } from '@ionic/pwa-elements/loader';
```
Then later in the startup process you will need to call
```javascript
defineCustomElements(window);
```
See `App.js` for additional details.
>Known issue with file input - https://github.com/ionic-team/capacitor/pull/1856
### Add Capacitor (https://capacitor.ionicframework.com) to Project:
```
npm install --save @capacitor/core @capacitor/cli
```
OR
```
yarn add @capacitor/core @capacitor/cli
```
### Package up app for build:
```
npm run build
```
OR
```
yarn run build
```
### Initialize Capacitor with your app information.
```
npx cap init --web-dir=build
```
> you will be asked the following questions:
```
Create app name
Create app Package ID (com.example.app)
```
> In some instances of iOS you will be required to do an additional install
OPTIONAL: install CocoaPods if not already installed (CocoaPods manages library dependencies for your Xcode projects):
```
sudo gem install cocoapods
```
### Install the desired native platform:
```console
npx cap add android
npx cap add ios
npx cap add electron
```
### Sync the platform specific code
```
npx cap sync iOS
npx cap open iOS (or Android) -> this should open up Xcode or Android Studio
```
## Deal with safe area, ie the notch on some of the newer devices
```html
```
And set the css for the body
```css
body {
padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}
```