As I work on building my online store, I am also diving into learning Vue.js. Currently, I'm facing a challenge with uploading product images to Firebase. It seems that storageRef.put is not functioning as expected. My project utilizes Vue.js 3 and Firebase 9 for its backend.
uploadImage(e) {
const file = e.target.files[0];
const storage = getStorage();
const storageRef = storageReference(storage, 'products/' + file.name);
storageRef.put(file);
}
The code snippet provided is tailored for firebase version 8.
Here's the modified code for version 9:
import { getStorage, ref, uploadBytes } from "firebase/storage";
uploadImage(e) {
const file = e.target.files[0];
const storage = getStorage();
// Create a reference to 'mountains.jpg'
const storageRef = ref(storage, 'products/' + file.name);
uploadBytes(storageRef, file).then((snapshot) => {
console.log('Uploaded!');
});
}
For additional information and resources, check out:
https://firebase.google.com/docs/storage/web/upload-files#web-version-9
In the past, I created a node project that was intended to operate in the browser. One of its main functionalities is parsing CSV files streamed from a server and processing them in chunks. Initially, I had to cater to IE11 compatibility through a strenuou ...
Currently, I am engrossed in a firebase project involving vuejs. My goal is to create a chart that visually represents the number of subscribers per month. The tricky part lies in accurately calculating the number of user profiles created each month. As fo ...
Every time I run this code, it always displays the same message, even when I input different email addresses let message = ""; const findQuery = "select email from Users where email = ?"; const queryResult = await db.query(findQue ...
My array includes user points as follows: let groupRank = []; userA = ["Sara", "24"]; userB = ["John", "12"]; userC = ["Eddi", "20"]; userD = ["Marry", "13"]; I am looking to rank them according to their points and achieve the following result: Console ...
I've built a unique slide toggle feature using Angular Material. The steps I followed to create it can be found here: https://material.angular.io/guide/creating-a-custom-form-field-control While everything works smoothly, there's an issue when I ...
I am facing an issue where dynamically added ng-repeat values are being changed across all divs instead of the selected one. In my code below, clicking on dynamically appended divs shows a form on the right side allowing input text fields. However, I want ...
Currently conducting tests using webdriver.io and phantom.js. The first test works successfully, providing a list of elements: return client .url(config.host) .waitForVisible('#myvenuelist', 2000) .click('#myvenuelist') ...
As I embark on my Vue journey, I came across some insightful queries like this one regarding filtering with the help of computed(). While I believe I'm moving in the right direction to tackle my issue, the solution has been elusive so far. On my web ...
For weeks now, I've been dealing with an issue that seems to have no solution found online... like waiting for ajax, etc... Check out the versions of gems: capybara (2.10.1, 2.7.1) selenium-webdriver (3.0.1, 3.0.0) rspec (3.5.0) running ruby 2.2.5 ...
Currently, I am facing an issue where I am attempting to retrieve data from Firebase in my Next.js application using getInitialProps. However, while the data displays in the VS Code terminal along with some errors, when viewing in the browser, a message ap ...
I have a function that loads data from the server into a DataTables table. I want to be able to reload the table with different parameters when a click event occurs, but I'm struggling to figure out how to do this. Reloading the table with the same pa ...
I am working on a React component that iterates through an array of messages and renders JSX based on certain conditions: messages.map(async (msg) => { let previewImage: URL | undefined = undefined; if (msg.mediaId) { previewImage = await stora ...
Currently, I am in the process of developing an NPM module and would like to automate certain tasks following every npm install while working on the module locally. However, it is crucial that these tasks are not executed when users of my library perform ...
I have created a web API with Windows authentication enabled (using IIS as well). The issue arises when my client attempts to send an AJAX request to the web API, resulting in a 401 unauthorized response. Upon further investigation, it appears that the pr ...
Is there a way to display a reminder popup with the details of upcoming meetings every five minutes before they start, 30 minutes prior? I attempted to use window.setInterval in my application's master page within $(document).ready. However, a problem ...
Here is an example of Vue code that works perfectly in development: <template lang="pug"> .wrapper </template> <style lang="stylus" scoped> .wrapper min-height: 100vh display: flex justify-content: center align-items ...
Don't worry, this isn't your typical "can't load files from the server" query... I'm looking to allow users to view files on the server in a bootstrap modal and then select specific files. After selection, I want to close the modal and ...
I'm facing an issue with trying to access an array from one controller in another controller. Despite simplifying the code for clarity, I still can't seem to make it work. Here is my first controller: app.controller('mycont1', [' ...
https://i.stack.imgur.com/kEAKC.png https://i.stack.imgur.com/03tHg.png After examining the two images above, it appears that the CSS is not functioning properly when I try to append the same HTML code using JavaScript. Below is the snippet of my HTML co ...
I am faced with a challenge in generating a grid of checkboxes dynamically from a list of judges, each having checkboxes for various tests. While updating the selections for individual judges works well, I encounter issues when I try to modify selections ...