Error: The function `this.xhr_.upload.addEventListener` is not supported in Firebase Storage

Having some trouble with file uploads. Small files work fine, but when it comes to larger ones I keep getting this error:

 this.xhr_.upload.addEventListener is not a function.

I'm currently using vue.js along with the firebase 6.1.0 npm package.

The error message reads as follows:

 Uncaught TypeError: this.xhr_.upload.addEventListener is not a function
     at 
 NetworkXhrIo../node_modules/@firebase/storage/dist/index.esm.js.NetworkXhrIo.addUploadProgressListener

Even with a simple code test, the same error persists with bigger files. Following the documentation example:

 var uploadTask = storageRef.child(route).put(file);

Any insights would be greatly appreciated!

Answer №1

After countless hours of digging, I finally cracked the code on this issue. Turns out, the culprit was some mocking API (in my case it was mockjs). Removing all traces of it made Firebase work like a charm!

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

ES5 approach to Angular2 HTTP Providers (not TypeScript)

I'm currently developing an application and experimenting with Angular2 using ES5 JavaScript for fun. My main inquiry right now is how to access the Http service. Most of the available documentation is in TypeScript, which is not very helpful, or it p ...

What is the method for reaching a service in a different feature module?

Currently, I am utilizing Angular 2/4 and have organized my code into feature modules. For instance, I have a Building Module and a Client Module. https://i.stack.imgur.com/LvmkU.png The same structure applies to my Client Feature Module as well. Now, i ...

Populate the dropdown menu with data from a JSON file

Recently, I created a custom JSON file and wanted to populate a select>option using this data. However, I encountered an error message saying: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/.../p ...

Building Dynamic Columns within a react.js Environment

Can anyone help me with creating a dynamic column in react.js? I've already managed to do it with static columns, but now I want to make them dynamic. Take a look at my code below and please provide suggestions. import React from 'react'; i ...

Leveraging React hooks to combine an array and an object within an array

Struggling to incorporate an array and an object into another array. This is the setup in my constructor: const [dashboard, setDashboard] = useState({ loading: true, data: [], address: '' }) This is how I envision the final data structure: { ...

Discover the magic of Bootstrap 3.0 Popovers and Tooltips

I'm struggling with implementing the popover and tooltip features in Bootstrap. While I have successfully implemented drop downs and modals, the tooltips are not styled or positioned correctly as shown in the Bootstrap examples, and the popover featur ...

Exploring Angular scope variables using Jasmine while making an ajax request

Can anyone provide guidance on testing Angular scope variables in a controller that is created within an ajax request? Here's the setup: app.controller('NewQuestionCtrl', function ($scope, Question) { loadJsonAndSetScopeVariables($scope ...

Assurance-driven number tally

I'm diving into JavaScript and recently started exploring promises. I've put together a code snippet that logs the value passed to the promise function as a parameter after the setTimeout function is triggered. Now, I'm wondering if there&ap ...

Step-by-step guide on displaying SVG text on a DOM element using Angular 8

I have a FusionChart graph that I need to extract the image from and display it on the same HTML page when the user clicks on the "Get SVG String" button. I am able to retrieve the SVG text using this.chart.getSVGString() method, but I'm unsure of ho ...

Creating a Google Captcha with validation is a straightforward process that can enhance the

I am having issues with adding Google Captcha to my form. Despite all fields working properly, the Captcha integration seems to be causing some disruptions. I have included my code below. Thank you in advance for your help. Please also check the following ...

Prolong the duration before the submenu closes on a div-based css menu

I have created a unique horizontal menu using DIVs without the use of ul and li lists. Currently, I am searching for a way to delay the collapse of the submenus when the mouse moves out. I don't mind if the solution involves JavaScript, jQuery, or CSS ...

The feature in DataTables that allows users to choose how many items to display per page is not functioning correctly

My DataTable is experiencing issues with the box that allows you to select how many items per page you want to show. Instead of displaying just the numbers, it shows: [[5,10],[5,10]]. I have tried to troubleshoot this problem without any success. Addition ...

An issue occurred during the hydration process, causing the entire root to switch to client rendering since the error occurred outside of a Suspense boundary

I've started seeing some errors and warnings: Error: An error occurred while hydrating. Since it happened outside of a Suspense boundary, the entire root will switch to client rendering. Error: Hydration failed due to initial UI not matching what was ...

Currently seeking user coordinates for Vue implementation

I recently started using Vue and I'm working on capturing the lat/long of a user to be used in other functions within Vue. Currently, I am retrieving the coordinates and plan to utilize them in an API but for now, I am just logging them. Although I c ...

Activate the display by utilizing the getElementsByClassName method

In my design, I'd like to have the "Don't have an account?" line trigger the display of the .registrybox class when clicked. However, the script I've written doesn't seem to be working as intended. The script is meant to hide the .login ...

Navigating through Switch cases and If Statements with multiple arguments can be complex for beginners in the world of JavaScript

Hi there, I have a specific case that I'm struggling to find a solution for. I am using Angular with a Firebase back-end to retrieve true or false values from a variable called ref. The variable contains 4 properties with either true or false values - ...

JAVASCRIPT ENCOUNTERS ISSUE WITH RANDOM TEXT GENERATION

Utilizing an array of words, we are in the process of generating random text. The goal is to shuffle and combine these words to form new "random sentences". However, we have encountered a minor issue - the addition of "undefined" at the beginning of each p ...

Leveraging a function for filtering in AngularJS

I have developed an application where the content filter changes depending on which button is clicked. I have managed to figure out the straightforward filters, but now I am attempting to create a filter that displays content within a specified range. Bel ...

Why isn't this setState function activating?

I am working on creating a versatile notification React component for my application that can be accessed from any part of the code. I have written the following code, where I am attempting to find a workaround for exporting the showNotif function: func ...

The method expression does not match the Function type specified for the mongoose Model

Encountered a perplexing error today that has eluded my attempts at finding a solution. const mongoose = require('mongoose'); const userSchema = mongoose.Schema({ name: {type:String, required:false}, birthday: {type:String, required:f ...