The error message "TypeError: firebase.firestore() is not a function in web JavaScript" indicates

Currently, I am encountering an issue while attempting to upload an image on Firebase Cloud Storage using web Javascript. The error message "firebase.firestore() is not a function" is being displayed in my console. Do you think I might be going about this the wrong way?

Up until now, I have successfully inserted and fetched data in Firebase Database. However, when it comes to uploading images on Firebase Cloud Storage, I seem to have hit a roadblock.

<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-firestore.js"></script>

var firebaseConfig = {
        apiKey: "XXX",
        authDomain: "XXX",
        databaseURL: "XXX",
        projectId: "XXX",
        storageBucket: "XXX",
        messagingSenderId: "XXX",
        appId: "XXX"
    };
    // Initialize Firebase
    var defaultProject = firebase.initializeApp (firebaseConfig);
    // Obtain a reference to the database service

     var fileName = selectedFile.name;
     var storageRef = firebase.firestore().ref('image' + fileName).put(selectedFile);

Answer №1

After performing a node update on the device, it appears that the problem has been resolved. The version was upgraded to v16.15.1

Answer №2

modify

 firebase.firestore().ref('image' + fileName).put(selectedFile);

into

 firebase.storage().ref('image' + fileName).put(selectedFile);

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

Need help setting parsed values on jQuery Autocomplete after Keyup event?

I am using the Bing API to retrieve values by accessing this link: When I parse and append the results on keyup, it works fine. However, when I try to set the results on jQuery's autocomplete, it does not display properly. For example, you can view ...

Removing an item from JSON data using Node.js and Express

Currently, I am attempting to remove an entry from json data. In order to view the data, I utilize the following: app.route('/data/:id') .get((req:Request, res: Response) => { let id = req.params.id; res.status(200).send(projects ...

Using react-input-mask together with a child component in React is not compatible

I've been exploring ways to mask a Material UI TextField, and after researching some solutions online, I came across this code snippet: <InputMask mask="(0)999 999 99 99" value={phone} disabled={false} ...

Updating an array within an object using JSON

Check out the structure of my JSON response: "_id" : 537, "quizzes" : [ { "wk" : 1, "score" : [ 10 ] }, { "wk" : 2, "score" : [ 8 ...

Using JSON Values in JavaScript

Below is a JSON result structured like this : [{"Januari":"0","Februari":"0","Maret":"0","April":"0","Mei":"7","Juni":"0","Juli":"0","Agustus":"0","September":"0","Oktober":"0","November":"0","Desember":"0"}] What is the best method to input these values ...

Ways to check if a tag has been rendered using Jest and Enzyme

I'm having trouble figuring out how to properly test if an element is rendered or not. Here's the test I wrote: const props = { type: 'test_plan', renewal: '25.06.2019', subscriptionName: 'Test', }; test(&apos ...

Vue3 TypeScript may potentially have an object that is 'undefined'

This piece of code is Vue3 with TypeScript-based. export interface TenantDto { uuid: string; name: string; } export const useTenantStore = defineStore('tenant', { state: () => ({ tenants: [], }), actions: { setMyTenants: (pa ...

The hover effect becomes disabled once the slider is toggled

My table has a feature where I can change the background color and other elements using a slider. However, I'm facing an issue where the hover effect on the table stops working when I toggle the slider on or off. I attempted to solve this with a funct ...

Preventing jQuery plugin from overriding default settings

I have created a jQuery plugin using the nested namespace pattern, inspired by the design template found in Addy Osmani's book. The plugin is a simple gallery and everything seems to be functioning correctly. However, I am facing an issue when attemp ...

Show text using AJAX when the form is submitted

I'm in the process of creating a basic form with a submit button (see below). My objective is to allow users to enter text into the input box, click submit, and have the page refresh while displaying the entered text in a div element. The user's ...

Struggling with implementing Bootstrap modal JavaScript in Rails 4, nothing seems to work!

This situation has been addressed in numerous posts, but despite my efforts to find a solution among them, I have yet to come across one that works for me. I am faced with the task of opening a modal that requires JavaScript modifications before being dis ...

Utilize the controller data to display information on a day-by-day basis

In my attempt to design a weekly calendar using AngularJS, I am facing challenges when it comes to inserting events into the 7 boxes representing each day of the week on the calendar. The current HTML structure is as follows: <div class="week"> ...

Adding double quotes, where they haven't been added yet

I am trying to work with the following string (Very strong=="Very strong"?100:(Very strong=="Above Average"?75:(Very strong=="Average"?50:(Very strong=="Below Average"?25:(Very strong=="Cannot determine"?0:(Very strong=="Poor"?0:0)))))) My desired outpu ...

jquery's each method is not functioning as intended and causing unexpected issues

I'm in the midst of developing a website, and one section requires users to input their details into a form. My goal is as follows: When a user clicks the submit button with any empty fields, I want a span element (initially set to display none in CS ...

Tips for adding color to the <td> element in an ejs file using nodeJS

I am looking to incorporate a color into my .ejs file. Here is the code snippet I am working with: <% resultList.forEach(function(item, index){ %> <tr> <td><%= item.function %></td> <td><%= item.value %>< ...

Working with NodeJS: Utilizing object casting with default values and eliminating superfluous

In the backend code of a NodeJS application, there is an object defined as follows: { name : "foo" secret : "bar" } The objective is to return this object as JSON in response to an HTTP request without including the secret key. The desired return obj ...

Modify the height of an element in real-time using jQuery

I'm looking to dynamically adjust the height of a div based on another element, but only if that element does not have the class collapsed (which is used in a Bootstrap toggle collapse feature). The initial setup seems to work fine, however, when I i ...

Ways to stop a bootstrap modal from closing upon pressing the ESC key and if it is not in

Utilizing the Bootstrap modal to showcase details from my database, including text and image attachments. Upon clicking an image attachment, I focus a div element to display a full-screen view of that image. My goal is to allow the user to close the image ...

Utilizing arrays in ejs with HTML elements

I have an array that looks like this: ["Item1", "Item2", "Item3"] I want to utilize this array to iterate through the items and populate the following HTML format: <option data-img-src=ITEM 1 value="1"></option> <option data-img-src=ITEM ...

What is the reason behind classList returning 'undefined' unless getElementById is explicitly used?

Why is it that I can't seem to select multiple elements with the same class (using querySelector, querySelectorAll, getElementsByClassName, etc) and use classList to check if just one div contains a specific class? I've come across tutorials tha ...