How to: Get download URL after uploading file to Firebase Cloud Storage in v9

# Here’s the code

Upload from a String and get the download URL

import { getStorage, ref, uploadString, getDownloadURL } from "firebase/storage";

const storage = getStorage();
// ref defines the FULL PATH to the file! Make sure that it is not empty!
// `/${projectKey}/${uid}/${id}` is the url where id will be the name of the file
const storageRef = ref(storage, `/${projectKey}/${uid}/${id}`);

// Raw string is the default if no format is provided
const message = 'Welcome to Sansverse!';

uploadString(storageRef, message).then((snapshot) => {
		getDownloadURL(snapshot.ref).then(downloadURL => {
      console.log('Download link to your message: ', downloadURL);
    });
});

// Base64 formatted string
const base64message2 = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';

uploadString(storageRef, base64message2, 'base64').then((snapshot) => {
  getDownloadURL(snapshot.ref).then(downloadURL => {
      console.log('Download link to your message: ', downloadURL);
    });
});

// Base64url formatted string
const base64urlMessage3 = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';

uploadString(storageRef, Base64urlMessage3, 'base64url').then((snapshot) => {
  getDownloadURL(snapshot.ref).then(downloadURL => {
      console.log('Download link to your Base64url string: ', downloadURL);
    });
});

// Data URL string - can be image!
const message4 = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAA....';
uploadString(storageRef, message4, 'data_url').then((snapshot) => {
  getDownloadURL(snapshot.ref).then(downloadURL => {
      console.log('Download link to your image: ', downloadURL);
    });
});

Upload from a Blob or File and get the download URL

import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";

const storage = getStorage();
// ref defines the FULL PATH to the file! Make sure that it is not empty!
// `/${projectKey}/${uid}/${id}` is the url where id will be the name of the file
const storageRef = ref(storage, `/${projectKey}/${uid}/${id}`);

// 'file' comes from the Blob or File API
uploadBytes(storageRef, file).then((snapshot) => {
  getDownloadURL(snapshot.ref).then(downloadURL => {
      console.log('Download link to your file: ', downloadURL);
    });
});

Upload from a Byte Array and get the download URL

import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";

const storage = getStorage();
// ref defines the FULL PATH to the file! Make sure that it is not empty!
// `/${projectKey}/${uid}/${id}` is the url where id will be the name of the file
const storageRef = ref(storage, `/${projectKey}/${uid}/${id}`);

const bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x2c, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21]);

uploadBytes(storageRef, bytes).then((snapshot) => {
  getDownloadURL(snapshot.ref).then(downloadURL => {
      console.log('Download link to your Uint8Array: ', downloadURL);
    });
});

If your file size is huge, you can monitor upload progress!

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

export default function FileUpload () {

	const [progressPercent, setProgressPercent] = useState(0);
	const storage = getStorage();

	const uploadFile = newFile => {
	    if (newFile) {
	      const storageRef = ref(storage, `/${projectKey}/${uid}/${id}`);

	      const uploadTask = uploadBytesResumable(storageRef, newFile);

	      uploadTask.on(
	        'state_changed',
	        snapshot => {
	          const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
	          setProgressPercent(progress);
						switch (snapshot.state) {
				      case 'paused':
				        console.log('Upload is paused');
				        break;
				      case 'running':
				        console.log('Upload is running');
				        break;
				    }
	        },
	        error => {
						// Handle unsuccessful uploads
	          alert(error);
	        },

	        () => {
						// Handle successful uploads on complete
	          getDownloadURL(uploadTask.snapshot.ref).then(downloadURL => {
	            console.log("Here is your download URL", downloadURL);
	          });
	        }
	      );
	    }
	  };

	return (
		<div>
		{/* use progressPercent to display the progress on the screen! */}
		</div>
	);
}

References: