Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

New hook for file upload into storage

See original GitHub issue

Hi 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
  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) => {
    try {
      const downloadUrls: Promise<string>[] = []
      Array.from(filesToUpload).forEach((file) => {
            blobUrl: URL.createObjectURL(file),
            name: `${filePrefix || ''}${}`
      const allFiles = await Promise.all(downloadUrls)
    } catch (e) {
  const memoized = useMemo(() => {
    return { files, error, loading }
  }, [files, error, loading])
  return [uploadFiles, memoized]
export default useUploadFiles

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:4
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

dohomicommented, Mar 24, 2021

I came up with a slightly optimized version:

Read more comments on GitHub >

github_iconTop 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 -
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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found