I am experiencing an issue where the Axios configuration does not display the OnUploadProgress on my response

I have been attempting to track the progress of file uploads from the front end, but I am encountering an issue where the onUploadProgress is not being received in the configuration catch. This problem arises as I am relatively new to using Axios.

axios({
    method: 'post',
    url:'https://brandsaviorservices.azurewebsites.net/api/document/upload/'+this.username+'/1',
    headers: {
        'Content-Type':'multipart/form-data',
        'Authorization': 'Bearer ' + this.token,
    },
    data,config
}) .then(response => {
    console.log(response);  
    this.status = response.data
})
.catch(error => {
    console.log(error);
});

Below is my console log:

https://i.stack.imgur.com/X7T0i.png

While the file uploads correctly, I am unable to retrieve the upload progress using OnUploadPorgress based on the console output:

https://i.stack.imgur.com/hDy3n.png

Answer №1

Appreciation to @cdoshi for the assistance

I managed to resolve the issue successfully

After moving the OnUploadProgress function out of the config, it ran without any errors

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

Searching for documents in MongoDB that meet specific criteria has become possible through the use

Criteria: COUNT the total number of documents in the collection WHERE objects.objectType is 'group' AND (objects.objectType is NOT 'person' AND relation is 'Exposed_to') Expectation: should return the count of all documents W ...

How to add data to Laravel after successful ajax request

I have a div containing bids: @foreach($bids as $b) <div class="bids notice notice-lg"> <strong>{{$b->user->name}}</strong> is offering <span style="font-size: 18px" class="label label-success">{{$b->bid}} €</span ...

"Enhance Your Highchart Experience by Adding Hyperlinks to Every Segment of Your Stacked Bar

I am seeking to assign a specific link to each segment of a stacked 100% bar chart. Check out this demo of a stacked bar chart: Here's what I am trying to accomplish: Please visit , input data in the left table, and submit it. After submission, you ...

The StateProvider is giving back an iteration that is undefined

AppContext.js import React, { createContext, useContext, useReducer } from "react"; // Initialize the appContext export const AppContext = createContext(); // Wrap the app and set up the App Context export const AppProvider = ({ reducer, initia ...

Utilizing nested v-for in Vue.js with lodash's groupBy function

When fetching data from a database, I am using lodash groupby to group my data like so: var vm = this axios.get(this.buildURL()) .then(function(response) { Vue.set(vm.$data, 'model', response.data.model) vm.groupData = _.groupBy(vm.model ...

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods

I'm currently working on developing my own custom lightbox script, but I've hit a roadblock. For centering the wrapper div, I've utilized position: absolute and specified top / left positions by performing calculations... top: _center_ver ...

Angular-Translate fails to function within a tag's attribute

For my project, I utilize angular-translate. One of the key definitions looks like this: { "paging":{ "first":"First", "last":"Last", "next":"Next2", "pre":"Previous" } } I implement it in the following way: <uib-pagination first-tex ...

Display a complete calendar with the date picker on a webpage

Currently experimenting with React to build a straightforward application. Admiring the appearance of full calendars from these date pickers (once clicked): Material-UI React-Toolbox Wondering if it's feasible to present the full calendar directly ...

dart, setting the root directory for web application

I'm looking to include some sample websites in my web framework package. Currently, the sites work fine when running them as Dart-only implementations, but if I need to compile them to JavaScript, I have to manually move the subfolder from my package& ...

Error encountered while executing node server.js for Azure IoT Hub due to incorrect flags provided in the RegExp constructor

Currently, I am attempting to execute 'node server.js' in order to establish a connection between my Raspberry Pi device and Azure through the Azure IoT Hub. However, upon running the command 'node server.js', an error message is displa ...

Invoking a function containing an await statement does not pause the execution flow until the corresponding promise is fulfilled

Imagine a situation like this: function process1(): Promise<string> { return new Promise((resolve, reject) => { // do something const response = true; setTimeout(() => { if (response) { resolve("success"); ...

Filtering React component names and their corresponding values

I am looking to apply filters to React components based on their name and values. Below is the array that needs to be filtered: let filteredArray: any[] = [] const filteredItems: any[] = eventList.filter( (event) => event.printEvent.labels = ...

What causes an exception to be thrown even after being caught in an async function?

Even if an exception is caught, the remaining code will still run. function problematic(){ //throw new Error('I am an exception') return Promise.reject("I am an exception") } ( async function (){ let msg = await problem ...

Ignore one specific file when importing all files in Angular 7

In my Angular 7 project, I am utilizing C3 and importing all the necessary files at the beginning of my .ts component file using a wildcard. import * as c3 from 'c3'; While this method works well overall, I encountered an issue where my CSS ove ...

Submitting form based on HTML select input issue

I am facing an issue with a select form where the value resets to "10" every time I send the form. Is there a way to keep the selected option, for example "20", after submitting the form? Below is the code snippet: <form method='get' name=&a ...

Implementing phone verification code delivery using ReactJS and Twilio client: Step-by-step guide

I've been scouring the internet for the past 8 hours and haven't been able to find a tutorial on using Twilio to send SMS messages with ReactJS. Does anyone know of a good tutorial for this? ...

The fs.fsync(fd, callback) function in the node.js API allows you

Can you explain the purpose of fs.fsync(fd, callback) in the Node.js API? fs.fsync(fd, callback) This function is used for asynchronous fsync(2). The completion callback only returns an exception if there is one. fs.fsyncSync(fd) This function is for ...

Is it possible to directly update a state object in Vuex when a property within a Vue instance changes?

Currently, I am implementing a web application using Vue with Vuex. The goal is to store user-editable data in the Vuex state as an object with editable properties such as {firstname: "", lastname: ""}. However, I have been advised to avoid using watchers ...

What is the best way to manage an image upload prior to generating the entry for the account in the database?

I am in the process of developing a single page application. For the client side, I have opted to use Nuxt.js, which incorporates Vue.js and Vuex. To handle communication with the server, I'm utilizing axios. The backend API has been constructed us ...

Odd behavior of the "for in" loop in Node.js

It seems like I'm struggling with the use of the "for in" statement. When working with a JSON document retrieved from a mongodb query (using nodejs + mongoose), its structure looks something like this: [{ "_id":"596f2f2ffbf8ab12bc8e5ee7", "da ...