The process of efficiently uploading a batch of images to Firebase storage while also obtaining all the respective

I have been using firebase storage to upload images and save their respective URLs in the firebase database. However, I recently encountered an issue with my code. In firebase v8, everything was working fine, but after updating to version 9, the following code started throwing an error:

export const multiImageUpload = async (path = "Products", imageFileList) => {
  let imagesUrlArray = [];
  let imageUrl = "";
  // array of files
  let arr = imageFileList.map((item) => {
    return item.originFileObj;
  });

  for (let i = 0; i < arr.length; i++) {
    const upload = await storage.ref(`/${path}/${arr[i].name}`).put(arr[i]);
    imageUrl = await upload.ref.getDownloadURL();
    imagesUrlArray.push(imageUrl);
  }

  return imagesUrlArray; // array of URLS of uploaded files
};

The specific error message is "ref.put is not a function". I would appreciate any guidance on why this error might be occurring.

Answer №1

import { ref, getDownloadURL, uploadBytesResumable, uploadBytes } from 'firebase/storage';

// Uploading multiple images
        const uploadMultipleImages = async (imageFiles) => {
            /* eslint no-var: 0 */
            const imageUrls = [];
            /* eslint no-var: 0 */
            for (let i = 0; i < imageFiles.length; i++) {
                const id = uuidv4();
                const metadata = {
                    contentType: 'image/jpeg'
                };
                /* eslint-disable no-await-in-loop */
                const storageRef = ref(storage, `images/${id}`);
                const uploadTask = await uploadBytes(storageRef, imageFiles[i], metadata);
                const imageUrl = await getDownloadURL(storageRef);
                imageUrls.push(imageUrl);
            }
            return imageUrls; // array of uploaded file URLs
        };

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

Optimize data storage with javascript on Otree

I've been attempting to store the timestamp from a click in an Otree database, but I've tried using various codes without success. Here's the first code snippet: function myFunction() { var n = Date.now(); document.getElementById(" ...

Arranging elements within an outer array by the contents of their inner arrays

I need help organizing an array based on the alphabetical order of a specific value within the inner arrays. For example: I want to sort this array by the prefix "old," so old A, old B, etc. const array = [ { personName: "Vans", personTags: ["young", " ...

Utilizing ng-repeat in a tabset to create an interactive and customizable tab interface

I am using angular ui tab (angular-ui.github.io/bootstrap/) and I expected that with ng-repeat, I would be able to make it dynamic, meaning the user can add tabs. However, unexpectedly it duplicates the tabs. Here is a demo: http://plnkr.co/edit/iHi1aOfbz ...

"Exploring the Power of Vue 3 Event Bus Through the Composition API

I recently set up mitt and I'm facing difficulties dispatching events to another component. The issue arises due to the absence of this in the setup() method, making it challenging to access the app instance. Here's my current approach: import A ...

`Failure to prompt an error following an unsuccessful post request in a node.js application using axios and express`

I'm currently facing an issue while trying to implement password change validation. The problem lies in not receiving the errorMessage from the server in case of an error. Although I've successfully managed to update the password and send back a ...

Next.js is like Gatsby but with the power of GraphQL

I'm curious if it's possible to set up GraphQL in Next.js similar to how it's done in Gatsby, allowing me to query pages and retrieve data from them. Are there any plugins available for Next.js that work like Gatsby-file-source and gatsby-ma ...

Tips for determining if a user is refreshing the page or navigating to a different page

Scenario: I need to store a specific variable in the local storage every time a user exits the page. By utilizing the window.onbeforeunload method, I am able to capture the event when a user is leaving the page. However, I want to assign different values ...

Creating collections in a Hashtable style using JavaScript

Creating a collection in JavaScript can be done in the following way: Start by initializing an empty collection with var c = {}; Next, you can add items to it. After addition, it will look like: { 'buttonSubmit': function() { /* do some work * ...

Error: The AjaxMethod "Class" is not defined

I have an older asp.net project that utilizes Ajax.AjaxMethod() to invoke server-side code from Javascript. It used to function properly, but now it has suddenly ceased to work. Here is the C# code behind: public partial class Signup : System.Web.UI.Page ...

Using TypeScript: Implementing array mapping with an ES6 Map

If I have an array of key-value objects like this: const data = [ {key: "object1", value: "data1"}, {key: "object2", value: "data2"}, {key: "object3", value: "data3"}, ] const mappedData = data.map(x => [x.key, x.value]); const ES6Map = n ...

Navigating with Google Maps and Its Pointers

I've successfully integrated a JSON array of Marker positions into a Google map. Each marker has an associated infoWindow, which is also functioning as expected. However, I'm encountering an issue where clicking on a marker only displays the in ...

Tips for utilizing a single mongoose default connection across various files in MongoDB?

I'm struggling to figure out how to share a mongoose connection across multiple files. Here's an example: User.js var mongoose = require("../DataAccess/DbConnection"); var userSchema = new Schema({ email: {type: String, required: true,max ...

Utilizing ng-class with Boolean values in AngularJS

On my page, I have a pair of buttons that control the visibility of elements using ng-hide and ng-show. <a ng-click="showimage=true" ng-class="{ 'activated': showimage}" class="button">Images</a> <a ng-click="showimage=false" ng-c ...

"I'm trying to figure out the best way to use Selenium and Python to send a character sequence to a contenteditable element that has its attribute set

Recently, I've been experimenting with using Python 3.6 and Selenium to automate a simple task - logging into a chat website and sending messages automatically. is the webpage where I want to send the messages. Despite my limited experience with Py ...

Node server quickly sends a response to an asynchronous client request

Apologies for my lack of writing skills when I first wake up, let me make some revisions. I am utilizing expressjs with passportjs (local strategy) to handle my server and connect-busboy for file uploads. I believe passport will not have a role in this pr ...

the hidden input's value is null

I am encountering an issue with a hidden input in this form. When I submit the form to my API, the value of the input is empty. Isbn and packId are both properties of a book model. However, for some reason, the value of packId is coming out as empty. & ...

Running multiple instances of setTimeout() in JQuery

I'm looking for a way to delay the execution of 10 lines of independent jQuery code with 2 seconds between each line. I initially tried using setTimeout() on each line, but is there a more elegant solution for this scenario? The jQuery DELAY method do ...

Moving various divisions through Javascript by clicking various buttons although sharing the same identifier

I am working with the script below: $(document).ready(function() { $('.expandButton').click(function() { $('.expandableSection').toggle("slide"); }); }); My goal is to apply this script to multiple sections. However, ...

Can anyone explain why I keep encountering an endless loop when using react hooks?

Having a bit of trouble with fetching data from a JS file that is mimicking an API with some endpoint methods. When I console log the data, everything seems fine, but for some reason, I keep running into an infinite loop when using hooks. I've tried t ...

Choose ng-change within the table

I've searched everywhere for an answer to this, but I couldn't find it. I have a table that contains select and date input fields. <table id="tblCorrAction" class="table table-bordered table-striped table-hover table-condensed"> <t ...