What is the process to obtain the download URL for an image stored in Firebase Storage?

I have encountered an issue while trying to upload an image to Firebase storage and then retrieve the download URL. Here is the code snippet that I am using:

const response = await fetch(selectedImage.uri);
const file = await response.blob();

const storageRef = ref(storage, `profile/${currentUser.email}`);
uploadBytes(storageRef, file).then( (snapshot) => {
  console.log('uploaded');
  getDownloadURL(storage).then( url => console.log(url)); // tried this outside of then block as well
});

The file gets uploaded successfully, but the getDownloadURL function throws an error:

[Unhandled promise rejection: TypeError: ref._throwIfRoot is not a function. (In 'ref._throwIfRoot('getDownloadURL')', 'ref._throwIfRoot' is undefined)]

Answer №1

Instead of using storage as an argument for getDownloadURL(), try passing snapshot.ref instead.

const response = await fetch(selectedImage.uri);
const file = await response.blob();

const storageRef = ref(storage, `profile/${currentUser.email}`);
uploadBytes(storageRef, file).then( (snapshot) => {
  console.log('uploaded');
  getDownloadURL(snapshot.ref).then( url => console.log(url));
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tally the number of words entered in the text box

Is there a way to make the keyword search in a text area live, rather than requiring the user to manually initiate the search? I have a working code that counts the number of times a specific keyword is used within the text, but it currently requires the u ...

Accessing JavaScript results in PHP

Hello everyone! I am working on creating a dropdown menu for selecting time using JavaScript to get the computer's current time. My goal is to have an output that automatically selects the option in the dropdown if it matches the computer's time. ...

Coordinating Multiple Angular $http Requests using $q and Managing Errors with $q.catch

Struggling with understanding the correct utilization of Angular's $q and JavaScript's promise API. As a newcomer to Javascript, it's possible I'm making a syntax error. This question appears similar, but isn't an exact duplicate. ...

What is the best way to retrieve information from a local JSON file and store it in the state of

I am currently working on a project to develop a movies/series search app using Next.js and React based class components. I have successfully imported JSON content and displayed it using the map function as shown below: <div> {Appletv.shows.map(( ...

Retrieving a function's output in React

Upon attempting to retrieve and log the res.data from my function, I encountered an issue where it returned as undefined. However, when I logged it from within the function, the result appeared normal. const getDefaultState = () => { axios .get ...

Tips for maintaining the integrity of blank space within a text node?

When intercepting a paste event and cleaning HTML off of the content using textNodes, I am faced with an issue where all white space is reduced to a single space and new lines are disregarded. For example, pasting: "hello world !" ends up being "h ...

What is causing the breakdown in communication between my server and client?

While utilizing React and an Express server for the backend, I am facing an issue where my API call to server.js is not going through. The React client is running on port 3001 and the server on port 3002. The fetch code in CreateAccount.js is as follows: ...

There was an issue encountered while attempting to utilize orgchart: The property '_aZ' of null could not be read

I've been exploring the use of an organization chart library from Everything goes smoothly with a few nodes, but when I attempt to load the entire organization (approximately 1100 subjects with multiple nested levels), I encounter this console error: ...

Access exclusive content by subscribing now!

How can I return a reference to a subject from a service without allowing the receiver to call .next() on the subject? Let's say there is a service with a subject that triggers new events. class ExampleService { private exampleSubject = new Subjec ...

Generating observables from form submission event

Note: I am completely new to Angular and RXJS. Currently, I am working on a simple form where I want to create an observable. The goal is to listen for submit events and update a value within the component. However, I keep encountering an error message sa ...

Utilize jQuery for parsing JSON data

Asking for help here because I am struggling with a seemingly simple task. Here is the JSON data that's causing me trouble: {"name":"cust_num","comparison":"starts_with","value":"01"}, {"name":"cust_name","comparison":"starts_with","value":"ad"}, {"n ...

Endless cycle plaguing Grunt tasks

Currently in the process of setting up a foundation Gruntfile.js for some upcoming projects. Recently started working on a new computer, so I had to rebuild everything from scratch. Used Homebrew to install Node and NPM, followed by installing Grunt global ...

Tips for selecting and utilizing a drop-down menu in JavaScript

Having an issue with the drop-down list functionality. It seems to only work with the first option selected and not with all of them. Any assistance would be greatly appreciated. Thank you in advance. var form1 = document.getElementById('form1' ...

Discovering the art of importing JavaScript files dynamically within controllers

I have one main form through which I pass data from 10 different components, each including the ID of a table that I need to retrieve data from in the database. The issue I am facing is that the code responsible for fetching this data asynchronously is spr ...

A guide on implementing React hooks within a React class component

Just stepped into the JavaScript world and facing a bit of trouble... Currently, I'm working with a React hook import { useKeycloak } from '@react-keycloak/web'; import { useCallback } from 'react'; export const useAuthenticatedCal ...

Android canvas is experiencing a sudden freeze

My canvas-based javascript application is functioning on android, however, I am encountering a problem where dragging across the screen with my finger causes the entire web page to freeze. Is there a solution to prevent this issue from happening? ...

What is the best way to have my sliding panel automatically close when I click outside of it?

I have created a sleek sliding navigation panel for my website that appears when the screen width is reduced. Although I am satisfied with how it functions currently, I would like the panel to close when the user clicks/taps outside of it. What adjustments ...

Evolution of the material through a fresh new slide

Can someone assist me with an animation issue? I have a slideshow consisting of 4 images that are supposed to transition automatically after a set time interval. Upon initially loading the webpage, the animation works perfectly as intended. However, subs ...

Incorporate an HTTP Header into a Wicket Ajax Request

I am trying to include a custom HTTP header in all Ajax (XHR) requests made by Wicket. I attempted the following: $.ajaxSetup({ beforeSend: function(xhr) { xhr.setRequestHeader('X-My-Header', 'value'); } }); and $(doc ...

Mapping DOM elements to VueJS components for hydration is a key process in facilitating

I have a specific requirement and I am exploring potential solutions using VueJS, as it offers the convenient feature of hydrating pre-rendered HTML from the server. In my Vue components, I do not define a template within the .vue file, but I need them to ...