The progress bar for Ng-file-upload does not function properly when used in conjunction with offline

Using ng-file-upload for file uploading in my home has been successful, as I am able to upload files without any issues.

However, I encountered a problem where the progress bar only appears when offlinejs is disabled in the index.html file. It seems that offlineJS is interfering with the progress callback during the post call.

Below is the error message that I received:

Error: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (xhr) {
          if (!xhr || !(xhr instanceof XMLHttpRequest)) return;
          config.__XHR = xhr;
          if (config.xhrFn) config.xhrFn(xhr);
          xhr.upload.addEventListener('progress', function (e) {
            e.config = config;
            notifyProgress(getNotifyEvent(e));
          }, false);
          //fix for firefox not firing upload progress end, also IE8-9
          xhr.upload.addEventListener('load', function (e) {
            if (e.lengthComputable) {
              e.config = config;
              notifyProgress(getNotifyEvent(e));
            }
          }, false);
        }' is not a valid HTTP header field value.
    at Error (native)
    at XMLHttpRequest.f.setRequestHeader (http://localhost:3000/lib/js/offline/offline.min.js:2:3272)

Answer №1

Great news! The problem has been resolved in the most recent update of ng-file-upload.

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

Incorporating Angularjs with jquery add-ons

I am looking to integrate angularjs with either the galleria or supersize image galleries plugin. My goal is to establish communication with the server when sliding through images, but I am facing an issue with galleria's callbacks on actions such as ...

Leveraging Webworkers in an Angular application for efficient data caching with service workers in the Angular-CLI

I am looking to run a function in the background using a worker, with data coming from an HTTP request. Currently, I have a mock calculation (e.data[0] * e.data[1] * xhrData.arr[3]) in place, but I plan to replace it with a function that returns the actual ...

Secure your AngularJS application with Spring Security for AJAX requests and receive JSON response for authentication

Secure Your Spring Application <security:form-login login-page="/login" default-target-url="/myapp" always-use-default-target="true" authentication-success-handler-ref="myAuthenticationSuccessHandler" authentication-failure-han ...

React Material Table - issue with data filtering accuracy

Currently in my React project, I am utilizing Material Table. While everything appears to be rendering correctly, the filtering and searching functionalities are not working as expected. To provide more context, below is a sample of the code: ht ...

Issue with onClick event not functioning properly in a React / Next.js component that is nested

I'm struggling to make the hideMoreDetails() function work on this component. Whenever I click on the 'close-more-info-cross' div, nothing gets logged in the console and the state remains unchanged. Any thoughts? Could it possibly be a stac ...

a script in JavaScript that retrieves the selected value from a radio button box

I have an AJAX table where I need to highlight one of the rows with a radio box on the left side. However, I lack proficiency in JavaScript and would like assistance in retrieving the value of the radio box by its ID from this table once it has been select ...

What is the Best Method to Retrieve the Desired Data from a YQL Query using a Callback Function?

I successfully implemented a callback function that retrieves titles related to a user-submitted string in a text input box. However, I am struggling with how to extract only the titles from the returned callback function after submitting a search term. C ...

The toggle feature doesn't seem to be working properly in Bootstrap 5

I've tested it in the latest Bootstrap version and still can't get it to work. I even switched to version 5, but the toggle functionality remains a problem. I've tried various solutions from StackOverflow with no luck ** I've added all ...

Create an XML file with recurring elements based on JSON data

Currently, I am utilizing the xmlBuilder library within Nodejs to generate XML from a prepared JSON object. My approach involves crafting the JSON structure first and then transforming it into XML using Javascript as the coding language. The specific XML ...

Do not attempt to log after tests have finished. Could it be that you overlooked waiting for an asynchronous task in your test?

Currently, I am utilizing jest in conjunction with the Vue framework to create unit tests. My test example is successfully passing, however, I am encountering an issue with logging the request. How can I resolve this error? Is there a mistake in my usage o ...

Adjusting the size of an object as the page dimensions change

I am looking to dynamically resize an element whenever the document resizes. For example, if a draggable div is moved and causes the document to scroll, I want to adjust the size of another element using $("#page").css('height','120%'); ...

Generating npm package without including file extensions in imports

I am currently working on creating an internal library for my workplace. Everything seems to be going smoothly until I try to use it in another project. It appears that the file extension in all of the import statements has disappeared during the npm pack ...

Retrieve information from a .json file using the fetch API

I have created an external JSON and I am trying to retrieve data from it. The GET request on the JSON is functioning correctly, as I have tested it using Postman. Here is my code: import "./Feedback.css"; import { useState, useEffect } from " ...

What is the best way to effectively adjust the code structure in a Node.JS project?

[Summarized] Focus on the bold parts. Although I am relatively new to Node.JS, I have been able to successfully build some projects. However, I have come across a burning question that has left me frustrated after searching Google for answers without much ...

Save information globally between controllers by utilizing a service

As a newcomer to angularjs, I am exploring ways to display ajax response from one controller to another. Below is the code for Controller 1: app.controller("currentTaskCtrl", function ($scope, $http, $rootScope, currentTaskService) { $scope.currentTa ...

The import component path in Angular 4/TypeScript is not being recognized, even though it appears to be valid and functional

I'm currently working on building a router component using Angular and TypeScript. Check out my project structure below: https://i.stack.imgur.com/h2Y9k.png Let's delve into the landingPageComponent. From the image, you can see that the path ...

Transform a JSON array with keys and values into a structured tabular format in JSON

Looking to transform the JSON data below for a Chart into a format suitable for an HTML table: var chartJson = [ { header : '2016', values : [1, 5, 9] }, { header : '2017', values : [2, 4, 8] ...

Utilize the power of Elasticsearch.js along with Bluebird for enhanced performance

Recently delving into node.js, I've been exploring the powerful capabilities of the bluebird promise framework. One of my current challenges involves integrating it with the elasticsearch javascript driver. After some experimentation, I was able to su ...

Limit the rotation of jQuery and CSS3 elements to always turn in a clockwise direction

Utilizing the jQuery transit plugin, I am rotating a block element with 4 navigation controls. Each time a nav item is clicked, the block rotates to the specified custom data attribute of that nav item - either 0, 90, 180, or 270 degrees. While I have suc ...

Guide on fetching data from a database using Node Js in a hierarchical structure

I am currently developing a NodeJs backend code to retrieve data from the database. The desired structure of the data should look like this: data = [{ name: "Admin", id: '1', children: [ { name: "Admin", id: "1& ...