{"id":3044,"date":"2020-01-07T20:19:56","date_gmt":"2020-01-07T20:19:56","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3044"},"modified":"2020-01-07T20:19:56","modified_gmt":"2020-01-07T20:19:56","slug":"firebase-hooks-with-ionic-react","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/firebase-hooks-with-ionic-react","title":{"rendered":"Firebase Hooks with Ionic React"},"content":{"rendered":"

\n This is a guest post from Aaron Saunders. Aaron is a developer and CEO at Clearly Innovative<\/a>. This is the first of a series of posts Aaron wrote about using Firebase and React hooks with Ionic React.\n<\/p><\/blockquote>\n

In this post, I’ll walk through the process of creating a custom hook that uploads a file to Firebase.<\/p>\n

Since the focus of the post is the custom hook, I will focus on pieces of code related to the hook, how it is called, and how it is implemented, not the surrounding code. However, the complete source code for the project is provided here<\/a>.<\/p>\n

<\/p>\n

Setting Up Parent Component<\/h2>\n

We need to make sure we set things up by initializing the custom file upload hook useFirebaseUpload<\/code>:<\/p>\n

\/\/ custom hook that will upload to firebase\nimport useFirebaseUpload from "..\/hooks\/useFirebaseUpload";\n\n\n\/\/ setting up the hook to upload file and track its progress\nconst [ { data, isLoading, isError, progress }, setFileData ] = useFirebaseUpload();\n<\/code><\/pre>\n
Next, in the parent component, we want to present any errors that are generated and get progress information when the file is being uploaded from the custom file upload hook useFirebaseUpload<\/code>. The following properties are all reactive and provided by the custom hook: isError<\/code>, isLoading<\/code> and progress<\/code>.<\/p>\n
<IonContent>\n  {\/* get error from hook and display if necessary *\/}\n  {isError && <div>ERROR: {isError.message}<\/div>}\n\n  {\/* get loading info from hook & display progress if necessary *\/}\n  {isLoading && progress && (\n    <IonProgressBar value={progress.value}><\/IonProgressBar>\n  ) }\n<\/IonContent>\n<\/code><\/pre>\n
The last missing piece for the parent component is selecting the file and then calling the method on the custom Firebase hook to upload the file. We handle that with the code listed below.<\/p>\n
Calling that function will set a property in the hook that is a dependency for the useEffects<\/code> handler we set that actually triggers the Firebase upload to start.<\/p>\n
{\/* user selects a file and returns the info required for upload *\/}\n  <input\n    type="file"\n    onChange={(e: any) => setFileData(e.target.files[0])}\n  \/>\n<\/code><\/pre>\n
Inside Custom Firebase File Upload Hook<\/h2>\n
We will initialize Firebase at the start of the component function, and define a reference to the storage to be used throughout the component function.<\/p>\n
\n  To set up Firebase, be sure to refer to the Firebase docs<\/a>.\n<\/p><\/blockquote>\n
import { useState, useEffect } from "react";\nimport firebase from "firebase";\n\nvar firebaseConfig = {\n\/\/ ADD YOUR FIREBASE CONFIGURATION\n};\n\n\/\/ Initialize Firebase\nfirebase.initializeApp(firebaseConfig);\n\n\/\/ the firebase reference to storage\nconst storageRef = firebase.storage().ref();\n<\/code><\/pre>\n
Since we are using typescript<\/code>, we need to define some interfaces for use in the hook then we define the return type from the hook function<\/p>\n
interface UploadDataResponse { metaData: firebase.storage.FullMetadata, downloadUrl: any };\ninterface ProgressResponse { value: number }\n\nfunction FirebaseFileUploadApi(): [{\n    data: UploadDataResponse | undefined,\n    isLoading: boolean,\n    isError: any,\n    progress: ProgressResponse | null\n},\n    Function\n] { \/\/additional code... }\n<\/code><\/pre>\n
Next, we start to define the state variables needed by the hook.<\/p>\n
\/\/ the data from the firebase file upload response\nconst [data, setData] = useState<UploadDataResponse | undefined>();\n\n\/\/ sets properties on the file to be uploaded, this is called\n\/\/ by the parent component\nconst [fileData, setFileData] = useState<File | null>();\n\n\/\/ if we are loading a file or not\nconst [isLoading, setIsLoading] = useState<boolean>(false);\n\n\/\/ if an error happened during the process\nconst [isError, setIsError] = useState<any>(false);\n\n\/\/ used for tracking the % of upload completed\nconst [progress, setProgress] = useState<ProgressResponse | null>(null);\n<\/code><\/pre>\n
The useEffect<\/code> handler<\/h2>\n
useEffect<\/code> is called after every render of the component. You can control the rendering by providing an array of dependencies as the second parameter.<\/p>\n
With our hook, we only want it to be called when the fileData<\/code> property changes. Meaning that the user has selected a file to upload and indicated that by calling the setData<\/code> method.<\/p>\n
\/\/ this function will be called when the any properties in the dependency array changes\nuseEffect(() => {\n    const uploadData = async () => {\n        \/\/ initialize upload information\n        setIsError(false);\n        setIsLoading(true);\n\n        setProgress({ value: 0 });\n\n        if (!fileData) return;\n\n        \/\/ wrap in a try catch block to update the error state\n        try {\n            let fName = `${(new Date()).getTime()}-${fileData.name}`\n\n            \/\/ setting the firebase properties for the file upload\n            let ref = storageRef.child("images\/" + fName);\n            let uploadTask = ref.put(fileData);\n\n            \/\/ tracking the state of the upload to assist in updating the\n            \/\/ application UI\n            \/\/\n            \/\/ method details covered in the next section...\n            uploadTask.on(\n                firebase.storage.TaskEvent.STATE_CHANGED,\n                _progress => { },\n                _error => { },\n                async () => { }\n            );\n        } catch (_error) {\n            setIsLoading(false);\n            setIsError(_error);\n        }\n    };\n\n    fileData && uploadData();\n}, [fileData]);\n\n<\/code><\/pre>\n
Manage Firebase File Upload State Changes<\/h2>\n
The call to upload the file, ref.put(fileData)<\/code>, returns a property that we can use to monitor the state of the upload.
\nThis could be the current upload progress, any errors, or when the upload has completed.
\nWe have included a handler for each one and set the appropriate state variable to be accessible from the hook.
\nFor the completion handler, we’ll have to dig deeper since we need to make another call to Firebase using uploadTask.snapshot.ref.getDownloadURL()<\/code>. This will return the downloadUrl<\/code> which is needed to render the image in the application.<\/p>\n
\/\/ tracking the state of the upload to assist in updating the\n\/\/ application UI\n\nuploadTask.on(\n    firebase.storage.TaskEvent.STATE_CHANGED,\n    _progress => {\n        var value =\n            (_progress.bytesTransferred \/ _progress.totalBytes);\n        console.log("Upload is " + value * 100 + "% done");\n        setProgress({ value });\n    },\n    _error => {\n        setIsLoading(false);\n        setIsError(_error);\n    },\n    \/\/ completion handler\n    async () => {\n        setIsError(false);\n        setIsLoading(false);\n\n        \/\/ need to get the url to download the file\n        let downloadUrl = await uploadTask.snapshot.ref.getDownloadURL();\n\n        \/\/ set the data when upload has completed\n        setData({\n            metaData: uploadTask.snapshot.metadata,\n            downloadUrl\n        });\n\n        \/\/ reset progress\n        setProgress(null);\n    }\n);\n\n<\/code><\/pre>\n
Wrapping Up<\/h2>\n
This was a very basic example of how to upload files to Firebase using React Hooks. I have created a separate GitHub repo for this project but have excluded other features such as authentication and account creation. I felt it was important to keep the code simple.<\/p>\n