The process of obtaining the downloadedURL for a resized image from Firebase Storage

Context

Currently, I am uploading an image to Firebase after selecting it using a file input. The process involves using the default settings on the Firebase resize image extension, which resizes the images to 200x200 with no specified file path or folder.

Issue

While browsing through similar posts, I haven't come across a satisfactory answer on how to obtain the downloadURL post resizing the image. Could someone guide me on this particular scenario?

Thank you!

    sendImageToFirebase(image, userId) {
            const imageName = image.name;
            const extension = image.type.split('/')[1].trim();
            const imageSize = image.size;
            const metadata = { contentType: image.type, name: imageName, size: imageSize };

            const storageRef = storage.ref(`posts/${userId}/${imageName}.${extension}`);
            const uploadTask = storageRef.put(image, metadata);

            uploadTask.on('state_changed', (snapshot) => {
                    // Snapshot data ...
                }, (error) => {
                    // Error Handling ...
                },  () => {
                    uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                        this.photoUrl = downloadURL;
                    });
                },
            );
        },

Answer №1

Just to make it clear - you have the downloadURL already saved as this.photoUrl (which seems to be undeclared).

I assume that your data() contains photoUrl: null. You can simply use {{ photoUrl }} in your template to view the actual URL, or

<div v-if="photoUrl">
<img :src="photoUrl" />
</div

to display the uploaded image.

Personally, I prefer creating a separate method to upload it to my FirestoreDB, so I suggest including

uploadToDB(this.photoUrl) within your function and then call

uploadToDB(url){
         db.collection("images")
        .add({
           url }),
        })
        .then(() => {
          this.message = "Successful Image URL Upload to FirestoreDB"
        });
    }
  },

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

Display a dropdown menu when clicking on a close button in a single element using Vanilla JavaScript

I'm currently in the process of learning Javascript and trying to grasp the concept of events and selectors. My aim is to have a close button that, when clicked, triggers a specific dropdown related to the card it's attached to. I plan to achie ...

Desiring to iterate through an array of identification numbers in order to retrieve information from an external API

I have been working on an app where I retrieve IDs from one API and pass them into a second API to display the property overviewList.overview.lifeTimeData.energy for each ID. However, in my current setup, I am only able to display the property of the fir ...

Turned off jquery on a specific div in order to resolve compatibility problems with Vue.js

Currently, I am working on a Drupal project which includes JQuery in all pages. We have recently introduced Vue.js for creating dynamic components directly in the HTML pages (not for building a single-page application). However, we are facing an issue whe ...

After reloading the data tables, analyze the information and dynamically highlight any rows in red that remain unchanged

I have a table that is refreshed every 5 minutes using ajax.reload(). One of the rows in this table is labeled as CIP. My goal is to highlight the CIP row on each refresh where the value remains unchanged from the previous value (value received in the la ...

`Inability to remove item from array in Vue.js`

I've been struggling to understand why this feature isn't functioning as expected. I'm using sample code for reference, but it's not behaving the same way. When I click on the delete button, nothing happens even though it should remove ...

What is the solution for fixing an error that says "There is no 'style' property on the 'Element' type"?

I'm struggling to fix an error in my JavaScript code. I created a script to display a tab indicator when a tab is clicked, but I keep getting the error message: "Property 'style' doesn't exist on type 'Element'". The tabs them ...

Error: Module not found - The package path "." is not exported from the specified package. As a result, Firebase will not update in your Next.js

I have been developing a Next.js application that retrieves data from a Firebase collection. During the process of connecting to the Firebase database, I have come across the following error: Failed to compile. Module not found This error seems to be ori ...

Whenever there is a click event triggered within the map function, it will affect every element within the collection

I am struggling to make changes to a specific item in the map function when clicked. Can someone assist me with achieving this functionality? const Product = ({categories}) => { const [active,setActive] = useState(true) function activeCat ...

Enhancing Google charts with vertical line effects on hover

I am currently working on a project using google line charts and an angularjs directive. I am trying to figure out how to display vertical lines on hover, similar to how it is done on Google Trends, instead of having fixed lines. However, I have not been a ...

Changing images dynamically in tinymce using JavaScript

When using the tinymce editor, I attempt to modify my images. I currently have an image within it and I am trying to dynamically change the path of this image with: tinymce.activeEditor.selection.getNode().src = '/my/path/' Surprisingly, this m ...

Can the Route be modified in Next.js?

I have developed search functionality that navigates to "/search/xxxx", but it is located in the header. Every time I perform a search, the route gets repeated and becomes "/search/search/xxx". Could you suggest any way other than usin ...

What is the best way to designate external dependencies in WebPack that are not imported using '*'?

I need assistance with specifying office-ui-fabric-react as an external dependency in my TypeScript project using Webpack. Currently, I am importing only the modules I require in my project: import { Dialog, DialogType, DialogFooter } from 'office-u ...

Is there a way to use JavaScript to determine our current position in a CSS Keyframe animation based on a percentage?

After some thought, I realized that it's possible to detect when a CSS animation starts, finishes, or repeats by using the animationstart, animationiteration, and animationend events. For example: document.getElementById('identifier') ...

What is the method for incorporating a global function with a plugin to display notifications in Vue.js?

Recently, I encountered an issue while trying to create a global function using a plugin. Everything seemed to be working fine until I faced difficulties in displaying my notifications. Tired of repeating the notification display methods everywhere in my c ...

Creating JSX elements in React by mapping over an object's properties

I need to display the properties of an object named tour in JSX elements using React without repeating code. Each property should be shown within a div, with the property name as a label and its value next to it. Although I attempted to iterate over the o ...

What is the procedure for importing material UI components into the main class?

Hey there! I'm currently working on integrating a "SimpleAppBar" element into my React app design. Below is the code snippet for this element sourced directly from the Material UI official website: import React from 'react'; import PropType ...

The request made to `http://localhost:3000/auth/signin` returned a 404 error, indicating that

My goal is to access the signin.js file using the path http://localhost:3000/auth/signin Below is my code from [...nextauth].js file: import NextAuth from "next-auth" import Provider from "next-auth/providers/google" export default N ...

I am currently working on obtaining images that are saved by their URL within a PHP file. These images are located within a directory named "images."

My code is incomplete and not functioning as expected. $.get("museums.php",function(data,status){ var response=''; //console.log(data); var json = $.parseJSON(data); museums = json.museums; for(let m in museums) { $("#na ...

"Efficiently storing huge amounts of data in MySQL in just 5

Interested in my tech stack: express + typeorm + mysql Seeking a solution for the following task: I have a csv file with over 100000 rows, where each row contains data such as: reviewer, review, email, rating, employee, employee_position, employee_unique_ ...

How can I ensure that Chakra UI MenuList items are always visible on the screen?

Currently, I am utilizing Chakra UI to design a menu and here is what I have so far: <Menu> <MenuButton>hover over this</MenuButton> <MenuList> <Flex>To show/hide this</Flex> </MenuList> </ ...