upload to storage with promise (helper) instead of hook (useUploadStorage)

export const uploadFileToStorage = async (

foldName: string,

dataUrl: string

) => {

return new Promise((resolve, reject) => {

const timestamp = Number(new Date())

const fileName = `/documents/${foldName}-${timestamp.toString()}`

const storageRef = firebaseApp.storage().ref(fileName)

const uploadTask = storageRef.putString(dataUrl, 'data_url')

uploadTask.on(

firebaseApp.storage.TaskEvent.STATE_CHANGED,

snapshot => {},

error => {

reject(error.message)

},

() => {

storageRef.getDownloadURL().then(url => {

resolve(url)

})

}

)

})

}

onSubmit={(values, { setSubmitting, resetForm }) => {

setMessage(i18next.t('PROCESSING'))

const copy = { ...values }

await Promise.all(

inputFieldsForAdditionalForm

.filter(field => field.type === 'file')

.map(async field => {

const dataUrl = values[field.name]

const url = await uploadFileToStorage(

'additionalForms',

dataUrl

)

copy[field.name] = url

})

)

 import React, { useEffect, useState } from 'react'

import { firebaseApp } from '../../lib/firebase'

function useUploadStorage(

foldName: string,

dataUrl: string

): [string, boolean, string] {

const [message, setMessage] = useState('')

const [loading, setLoading] = useState(false)

const [sigUrl, setSigUrl] = useState('')

useEffect(() => {

const upload = () => {

const timestamp = Number(new Date())

const fileName = `/documents/${foldName}-${timestamp.toString()}`

const storageRef = firebaseApp.storage().ref(fileName)

const uploadTask = storageRef.putString(dataUrl, 'data_url')

uploadTask.on(

firebaseApp.storage.TaskEvent.STATE_CHANGED,

snapshot => {

setLoading(true)

},

error => {

setMessage(error.message)

},

() => {

storageRef.getDownloadURL().then(url => {

setSigUrl(url)

setMessage('')

setLoading(false)

})

}

)

}

if (dataUrl) upload()

return () => {}

}, [dataUrl, foldName])

return [sigUrl, loading, message]

}

export default useUploadStorage