Adding a file to a firebase storage folder using Vue js

Currently, I am utilizing Vue js 3 in combination with Firebase 9. My objective is to upload images to a specified folder, however I seem to be encountering some difficulties. Whenever I attempt to do so, the file gets renamed to 'product' and uploaded to the main folder.

uploadImage(e) {
      const file = e.target.files[0];
      const storage = getStorage();
      const storageRef = storageReference(storage, 'products/');
      uploadBytes(storageRef, file);
    }

As it stands, when I execute this action, the file retains its original name but ends up in the primary directory.

const storageRef = storageReference(storage, file.name);

I am seeking guidance on how to ensure that the file ascends to the products folder retaining its existing name. Appreciate any assistance provided! Thank you!

Answer №1

To properly create the reference as outlined in the documentation, you must generate the StorageReference using the ref() method:

const storageRef = ref(storage, 'products/' + file.name);

You can also utilize template literals:

const storageRef = ref(storage, `products/${file.name}`);

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

jQuery scrollTop(0) leading to unusual scrolling patterns

Every time I click on a button, a modal window appears with a fading effect: $('.display-all-comments').fadeIn(300); $('.display-all-comments').scrollTop(0); If I remove the scrollTop(0), the scrolling works as usual. To better illust ...

Guide on resetting v-modelReady to learn how to reset

I am struggling with a toggle and reset button implementation: <template> <label :for='id + "_button"' :class='{"active": isActive}' class='toggle__button'> <input type='checkbox&ap ...

Navigation that sticks and changes upon hovering over div elements

Just delving into the world of jQuery and JS, so I appreciate your patience:) Currently, I have a sticky navigation bar positioned at the top of my webpage that links to different sections of content below. I am looking to create an effect where the corr ...

Is it possible to change the background of a DIV using AJAX/jQuery depending on the numerical value it contains?

Discovering the world of AJAX/jQuery and trying out new things. Check out my fiddle for a better understanding. Each square represents a DIV element. <div class="desk_box_ver" id="desk_B20" data-rel="85" style="left:20px;top:1165px;">B20</div> ...

Encountered an error while trying to set up the route due to Router.use() needing

Within my app.js file, I have the following code: app.use('/', require('./routes')); //old routes app.use('/api', require('./api')); Additionally, I have an api folder containing an index.js file. This is what the ...

How can you efficiently send multiple properties from a parent component to its child component in Vue?

I'm running into an issue trying to pass two properties from the parent component to the child component. Despite following examples of passing a single property, I can't seem to get it to work. Here's what I've attempted: Parent Vue c ...

Sharing methods between controllers in AngularJS

After coming across this insightful article on Angular validation, I decided to implement it in my project. The validation is functioning perfectly, but I am struggling to access methods in other controllers upon successful form validation. Despite trying ...

various operations in routes using Express.js

Hey there, I am new to express js and I am looking to include multiple functions within routes. Can someone explain how to add multiple functions within a route? I have 2 functions in company.js but I am unsure how to export and add them in index.js. Here ...

Fast screening should enhance the quality of the filter options

Looking to enhance the custom filters for a basic list in react-admin, my current setup includes: const ClientListsFilter = (props: FilterProps): JSX.Element => { return ( <Filter {...props}> <TextInput label="First Name" ...

I seem to be having trouble getting innerHTML to function properly

Whenever I attempt to showcase HTML code from a DIV element, the innerHTML function fails to retrieve its contents: <div id="container"> <tr> <td style="background-color: #ffffff;">TEST</td> </tr> </div> ...

Is it advisable to load 10,000 rows into memory within my Angular application?

Currently, I am in the process of creating a customer management tool using Angular.js that will allow me to directly load 10,000 customers into the $scope. This enables me to efficiently search for specific data and manipulate it without the need for serv ...

Discovering the Secret TD Value Upon Clicking a TR Element

I am currently in the process of creating a web-based task manager to monitor tasks at work using HTML and PHP. I want to display all the tasks in a table, and when clicking on a task (row), I aim to retrieve a hidden td value (task ID) and pass it as an a ...

Can the AngularJS icon adapt to different lists?

I'm currently developing in AngularJS / Jade and I need to implement functionality where an icon changes when a user clicks on something. The code I have right now looks like this: a(onclick='return false', href='#general', data-t ...

Implement the CSS styles from the Parent Component into the Child Component using Angular 6

Is there a way to apply CSS from the Parent Component to style the child component in Angular 6? Please advise on how to approach this issue. How can we inherit the css styles from the Parent Component? <parent> <child> <p>hello ...

Send two field values via axios by utilizing a b-form-select component from the Bootstrap Vue library

I'm struggling to send two fields to my backend, but every time I attempt to do so, both values end up as null in the backend. I am uncertain about what mistake I might be making. <template> <div id="app"> <div> ...

Using jQuery's .load() function to exclusively receive image bytecodes

I am utilizing jQuery's .load() function to receive the bytecode of loaded images. Could it be due to a lack of specified MIMEType? because I'm using an image URL without a file extension? necessary to wrap the entire operation somehow? Here& ...

Facing issues connecting to my MongoDB database as I keep encountering the error message "Server Selection Timed Out After 3000ms" on MongoDB Compass

I am encountering an error on my terminal that says: { message: 'connect ECONNREFUSED 127.0.0.1:27017', name: 'MongooseServerSelectionError', reason: TopologyDescription { type: 'Single', setName: null, maxS ...

Understanding the concept of "this" within a callback situation

Given class functions game.PlayScreen = me.ScreenObject.extend({ onResetEvent: function() { this.setAll(); //calls setAll(), which calls setGlobals() this.saveNextLevelData(this.setAll); }, saveNextLevelData : function (cal ...

Is it possible for the Blog {tag_nextpage} and {tag_previouspage} to be displayed on the same page in Business Catalyst?

I'm curious about a specific scenario regarding loading blog list contents on the same page. Is it feasible to replace the current content with either previous or next page contents when {tag_nextpage} or {tag_previouspage} is activated? I would appr ...

Clear the data once the checkbox has been unchecked

Within my div containers, each containing a result, there is a checkbox associated with each one. When a user clicks on a single checkbox, the value of the currently checked box is sent to another page via an ajax call. The data is then fetched and display ...