Get url after file upload

[sebvst]

How do I get the URL after I upload a file?

const data = item.value?.file[0]
await upload(data)
if (uploadProgress.value==1) {
console.log(url.value)
})

The upload works fine, but I get undefined in my logs. Am I doing something wrong?

[BenJackGill]

I'm having the same problem.

Did you figure it out?

It's strange because if I console.log(url.value) I get null but if I console.log(url) I get the ref and looking inside the ref I can see the URL.

So the url value does exist but url.value is always null.

[strid3r21]

im having the same issues. did either of you find a solution?

UPDATE: so i got it working, but in an extremely convoluted way that im not even sure is the right way to do it, but it technically works.

basically it takes a bit for the url.value to update from null to the actual url, so i used an onUpdated() function to check when the url.value changes. and once its changed, then fire off the function that sends the url data to firestore in my use case.

again, this works, but it doesnt feel right lol. id prefer a real solution, but for the time being this technically is working for me. all im doing is making an backend page to load data into a firestore database, so only i will be using it so this solution may not be appropriate for every situation. but maybe it'll help others get something working.

these are the functions.

<template>
<form  @submit.prevent="uploadPicture" >
<fieldset :disabled="!!uploadTask">
      <button
        type="button"
        @click="open({ accept: 'image/*', multiple: false })"
      >
        <template v-if="files?.length === 1">
          Selected file: {{ files.item(0)!.name }} (Click to select another)
        </template>
        <template v-else> Select </template>
		<div hidden>{{ url }}</div>  <--- will show the url on your webpage, you need this for this to work as the onUpdated() function is looking at the DOM for changes, give it the hidden attribute so it doesnt display on your page.
      </button>
      <button >Upload</button>
</form>
</template>


<script setup lang="ts">

// these are just the 3 functions, you still need the other vuefire imports and what not.

// uploadPicture is what is called from the html, and actually uploads the file.
const uploadPicture = async () => {
	const data = files.value?.item(0)
  if (data) {
   await upload(data)   
}}

// handAddNew is the function that creates the firestore entry.
const handleAddNew = async () => {

	const boardID = nanoid();
	error.value = null;
	
	await setDoc(doc(db, 'test', boardID), {
		boardTitle: boardTitle.value,
		boardType: boardType.value,
		url: url.value ,
		id: boardID,
		createdAt:Timestamp.fromDate(new Date)
	})
	boardTitle.value = null;
	boardType.value = null;
};

//onUpdated checks for any changes in the DOM, so we check to see if url.value has updated and when its no longer null, we call the handleAddNew function which writes the data to firestore with the url.value that is correct and not null.
onUpdated(() => {
		if(url.value !== null){
			handleAddNew()
			url.value = null //set the url.value back to null otherwise this will loop and you'll get an infinite number of new documents in firestore 
		}})
</script>
`

[posva]

The URL updates after the upload but is not awaited as it's not always required and would be wasteful in slow networks (See vanilla example https://firebase.google.com/docs/storage/web/upload-files). Instead, you need to await refresh():

const { refresh, upload, url } = useStorageFile(...)
await upload()
await refresh()
// url is updated!

[strid3r21]

I figured there was probably a simple solution but couldn't find it myself. Thank you for the correct information!