Hi I am trying to get the url of an image after uploading to Firebase storage. In the commented code below I show a few things I have tried. I have successfully uploaded an image to Firebase Storage.
async uploadAvatar({ state }, { authId, file, filename }) {
if (!file) return null
authId = authId || state.authId
filename = filename || file.name
try {
const storage = getStorage()
const storageRef = ref(
storage,
`uploads/${authId}/images/${Date.now()}-${filename}`
)
// This is 1st way I tried
// This sucessfully uploads image to storage
// uploadBytes(storageRef, file)
// // const snapshot = await uploadBytes(storageRef, file)
// This throws a not found error
// const url = await getDownloadURL(storageRef)
// console.log('URL', url)
// return url
// // This sucessfully uploads image to storage
uploadBytes(storageRef, file).then((snapshot) => {
console.log('Uploaded avatar!')
const avatarUrl = getDownloadURL(storageRef)
.then((url) => {
// This is correct url
console.log('URL', url)
return url
})
.catch((err) => {
console.log('Error with file url', err)
})
// This logs promise pending with correct url inside
console.log('avatarUrl', avatarUrl)
return avatarUrl
})
} catch (error) {
const { addNotification } = useNotifications()
addNotification({
message: 'Error uploading avatar image',
type: 'error'
})
}
}
You're not returning anything from the top-level code in your uploadAvatar function yet.
async uploadAvatar({ state }, { authId, file, filename }) {
if (!file) return null
authId = authId || state.authId
filename = filename || file.name
try {
const storage = getStorage()
const storageRef = ref(
storage,
`uploads/${authId}/images/${Date.now()}-${filename}`
)
// 👇
return uploadBytes(storageRef, file).then((snapshot) => {
console.log('Uploaded avatar!')
const avatarUrl = getDownloadURL(storageRef)
.then((url) => {
// This is correct url
console.log('URL', url)
return url
})
.catch((err) => {
console.log('Error with file url', err)
})
// This logs promise pending with correct url inside
console.log('avatarUrl', avatarUrl)
return avatarUrl
})
} catch (error) {
const { addNotification } = useNotifications()
addNotification({
message: 'Error uploading avatar image',
type: 'error'
})
}
}
Honestly though, the whole code that handles the download URL in here seems unnecessary, so I recommend simplifying to:
async uploadAvatar({ state }, { authId, file, filename }) {
if (!file) return null
authId = authId || state.authId
filename = filename || file.name
try {
const storage = getStorage()
const storageRef = ref(
storage,
`uploads/${authId}/images/${Date.now()}-${filename}`
)
return uploadBytes(storageRef, file).then((snapshot) => {
return getDownloadURL(storageRef);
})
} catch (error) {
const { addNotification } = useNotifications()
addNotification({
message: 'Error uploading avatar image',
type: 'error'
})
}
}