New hook for file upload into storage
See original GitHub issueHi as I use some parts of this hook I missed a file upload hook. Here is my version of it - if this is useful I am happy to do a PR or just grab the code and adjust it.
import { useMemo, useState } from 'react'
import firebase from 'firebase/app'
import 'firebase/storage'
const uploadFile = async ({ blobUrl, name }) => {
if (!blobUrl || !name) return null
const blob = await fetch(blobUrl).then((r) => r.blob())
const snapshot = await firebase.storage().ref().child(name).put(blob)
return snapshot.ref.getDownloadURL()
}
const useUploadFiles = (): [
(files: File[], filePrefix?: string) => Promise<void>,
{
error: firebase.FirebaseError
loading: boolean
files: string[] | undefined
}
] => {
const [error, setError] = useState<firebase.FirebaseError>()
const [files, setFiles] = useState<string[] | undefined>()
const [loading, setLoading] = useState<boolean>(false)
const uploadFiles = async (filesToUpload: File[], filePrefix?: string) => {
setLoading(true)
try {
const downloadUrls: Promise<string>[] = []
Array.from(filesToUpload).forEach((file) => {
downloadUrls.push(
uploadFile({
blobUrl: URL.createObjectURL(file),
name: `${filePrefix || ''}${file.name}`
})
)
})
const allFiles = await Promise.all(downloadUrls)
setFiles(allFiles)
} catch (e) {
setError(e)
}
setLoading(false)
}
const memoized = useMemo(() => {
return { files, error, loading }
}, [files, error, loading])
return [uploadFiles, memoized]
}
export default useUploadFiles
Issue Analytics
- State:
- Created 2 years ago
- Reactions:4
- Comments:6 (5 by maintainers)
Top Results From Across the Web
React Hooks File Upload example with Axios & Progress Bar
In this React tutorial, I will show you way to build React Hooks File Upload example using Axios and Multipart File for making...
Read more >How To Upload Files Using React Hook Form - YouTube
React- hook -form supports file uploads. In this video I'll show you how to upload files using react- hook -form. And also we'll...
Read more >Build Your Own Hook for Uploading Images to Firebase
Then create a new file useStorage.js inside the hooks folder. This will be our custom hook for uploading images to Firebase storage.
Read more >Handling File Fields using React Hook Form - Fullstack.io
In this article, we will learn how to handle file uploads using react-hook-form.
Read more >Handling Multiple File Uploads With React Hook Form
In this article, we are going to discuss how to work on multiple file uploads with the React Hook Form.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
v5 is now released: https://github.com/CSFrequency/react-firebase-hooks/releases/tag/v5.0.0
I came up with a slightly optimized version: https://gist.github.com/dohomi/78d240028a3450c5477e91e6004288ab