Tips on dividing the time of an upload progress bar evenly using VueJS

When working with js and JavaScript, I am attempting to utilize the Axios onUploadProgress function in a way that it gradually progresses from 1% to 100%.

Below is the code snippet:

onUploadProgress: function(progressEvent) {
  let percentage = (progressEvent.loaded * 100 / (progressEvent.total + 10000000));
  percentage = parseInt(Math.round(percentage));
  this.uploadPercentage[progress_index] = percentage;      
}.bind(this)

The progress currently starts at 1%, then jumps straight to 2% and quickly reaches 100%. What I aim for is a smooth transition where it goes from 1% to 2%, then to 3%, and continues until reaching 100%. Any assistance on how to achieve this would be greatly appreciated.

javascriptvue.js

Answer №1

Take a look at the ProgressEvent documentation:

  • total represents the total amount of work to be done.
  • loaded indicates the amount of work that has been completed.

Therefore, dividing loaded by total yields a ratio between 0 and 1 (e.g., 0.5 when half completed). To convert it to percentages, simply multiply by 100, giving 100 * loaded/total.

However, if you increase total by 10M, the ratio will not reach 1 as expected. For example, if total is 2000 and half is completed (loaded = 1000), the result should be 0.5. But with the addition, it becomes 0.5 * 10^-7 (0.00000005).

In short, avoid adding the extra 10M.

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

What is the best way to establish communication between methods in a React application?

In the SelectedTopicPage component, I currently have two methods: navigateNext and render. My goal is to pass the value of topicPageNo from the navigateNext method to the render method. What is the best way to achieve this in React? When I attempt to decla ...

javascriptreactjs

Only incorporate the Angular service into the controller when it is necessary

When attempting to incorporate lazy loading for angular services, controllers, directives, and filters, I discovered a way to achieve something similar using RequireJS. However, I am struggling to find a way to dynamically load a service into a controller ...

javascriptangularjsrequirejs

After clicking, revert back to the starting position

Hey there, I have a question about manipulating elements in the DOM. Here's the scenario: when I click a button, a div is displayed. After 2 seconds, this div is replaced by another one which has a function attached to it that removes the div again. ...

javascriptjquery

How come the pop-up isn't displaying in the middle of the screen?

I have encountered a positioning issue while using a semantic modal with Angular. The problem arises when I try to display the modal as it does not appear in the correct position. https://i.sstatic.net/o033E.png Below is the code snippet from my HTML fil ...

javascripthtmlangularjssemantic-ui

Is there a way for me to automatically update a webpage every 5 minutes, beginning at 8:01 a.m., and subsequently at 8:06 a.m., and so forth?

<html> <head>Harshal</head> <script> var limit="5:0" var doctitle = document.title var parselimit=limit.split(":") parselimit=parselimit[0]*60+parselimit[1]*1 function beginrefresh(){ if (parselimit==1) window.location.reload ...

javascripthtml

How can I use jQuery to prevent a click function from running when input fields are left empty

I have step cards with input fields on each card. A "Next" button is provided for each card to change the view. However, I need to prevent the "Next" button from functioning if any input fields on the form are left empty. Below is the code snippet: va ...

javascriptjqueryhtmlcss

The Axios POST function experiences issues on Safari (macOS) and all iOS and Mozilla browsers, but functions properly on Brave and Chrome

Error console screen The error appears in Safari console, but not in Chrome. Here is my method: async postRequest() { try { const res = await axios.post(baseURL, { name: this.formdata.name, vd:this.formdata.vd, tp:this.formdata.tp ...

iosvue.jspostaxiossafari

Decoding the file's encoding: A beginner's guide

I need help determining the encoding of a file in order to only upload CSV files with utf-8 format. If there are any non utf-8 characters, I want to display an error message. Currently, I am utilizing Papa Parser for parsing. Is there a way to detect the ...

javascriptangularjsspring

Are you experiencing a clash among various JS files in your WordPress installation?

I'm in a bit of a bind here. I've been tasked with working on a Wordpress website for a friend, using a free theme that he provided. Naturally, he wants some modifications made, so I've been editing the theme accordingly. The theme relies on ...

javascriptjquerywordpresstwitter-bootstrap

Using Webpack to manage environment variables in Typescript

Having some issues declaring global variables in Typescript with Webpack's DefinePlugin. Seeking assistance to identify what might be going wrong. Implemented an environment variable in my .bash_profile: export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx ...

javascriptreactjstypescriptwebpack

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Is there a way to quickly submit form entries to my database and then automatically redirect to a new page? My current situation requires that submitted information is stored in the DB before directing users to a thank you page, all in one seamless click! ...

javascriptphphtmlforms

`Unveil the hidden edges of the Google timeline chart`

Does anyone know how to remove the chart border from a Google timeline chart using this script? <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load ...

javascriptchartsgoogle-visualizationtimeline

Having trouble with the side menu navigation in Bootstrap?

I have a total of 5 pages on my website. Out of these, 2 main pages contain submenus/pages as well. To make users aware of the presence of submenus, I am using plus and minus icons. However, there is an issue where clicking on one submenu toggle icon doe ...

javascriptjqueryhtmltwitter-bootstrap

Exploring Vue 3: Choosing between using import statements in main.js and configuring additionalData in vue.config.js to load a global scss file

I am attempting to load a global SCSS file using the "vue.config.js" file. vue.config.js module.exports = { css: { loaderOptions: { sass: { additionalData: `@import "@/assets/common.scss";` } } } } If I include the style tag in my App. ...

javascriptcssnode.jsvue.jssass

Creating Stunning CSS Animations for a Slider Using SVG

Looking for help to create an SVG CSS animation for a slider using a mockup image. The animation will feature a balloon with a number value that zooms in and out from left to right or right to left. Currently stuck at the starting point and unsure how to ...

javascripthtmlcsssvg

Include a plugin in the vu Instance using the "Vue.use()" method, all done without touching the main Vue.js file

Currently, I am actively engaged in a project using Directus. Directus is a PHP and Vue.js-based Headless CMS. I am interested in incorporating a theme or plugin like Vuetify onto a specific custom page. A plugin typically looks something similar to thi ...

javascriptvue.jsinstancedirectus

Responsive Alignment of Slanted Edges using CSS

I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen re ...

javascripthtmlcssresponsivediagonal

Error message: JavaScript JSON variable undefined in AWS Lambda

My lambda function is being triggered by an IoT rule that sends a MQTT message in JSON format. I am facing an issue where the top level fields are logging correctly, but when it comes to nested objects in the JSON, they appear as "undefined". Even after tr ...

javascriptnode.jsamazon-web-servicesaws-lambdaiot

Working with URL query parameters in node.js

I am tasked with developing a function that takes an object from the URL as input. The main aim is to update the menu items for a restaurant. The query sent will be in this format: ?restId=1&posId=1&groups=…&items= [{"id":"000 ...

javascriptnode.js

Get the date, arrival, and departure using jQuery UI Datepicker

I am currently in the process of developing a booking website that requires users to select two dates - one for arrival and one for departure. I plan on using jQuery UI DatePicker for this feature. Once the user selects the departure date, I want the progr ...

javascriptjquery