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