Vue Upload Progress

Posted on  by admin

Modified4 years, 1 month ago. I am trying to develop a Vue.js application.In this regard I am uploading file in this Application. Now I would like to develop a progress bar for that file upload feature. I am trying to follow a tutorial.

Here I got axios library for upload file. The code is like below. But I am using vue-resource. How can I detect upload progress in vue-resource? 1111 gold badges5454 silver badges105105 bronze badges. 105105 bronze badges. For vue-resource will be:. When you are in development, you won't see the progress unless you throttle the request.

Take a look here to see how you can throttle the request in Chrome.


11 gold badge1111 silver badges3030 bronze badges.

Technology

3030 bronze badges. Modified10 months ago. I'm currently trying to create a small loading bar for when I select a file to upload in my form but I'm really struggling to make sense out of it.

  • Most examples I find online show an upload loading example when we hit a button to 'upload' because it comes with an xmlhttprequest or similar, but in my case, I want to show the loading progress right when I select the file before I hit the button that sends the form.
  • Therefore once I add the file to my input a loading percentage should appear.
  • I'd really appreciate if someone could give an indication as to what needs to be done here.

FileUpload.vue - file upload input component. 11 gold badge44 silver badges1616 bronze badges.

MethodsUrlsActions
POST/uploadupload a File
GET/filesget List of Files (name & url)
GET/files/[filename]download a File

1616 bronze badges. First of all, progress for the file upload has to be tracked when you upload it to some server or to some storage space, normally you make a POST or PUT request, with axios, for example, which has a onUploadProgress callback, with which you can upload your progress tracker, I will not go into detail here, since there are countless examples for this, like: The answer to this SO question, which details this nicely.

If you are in a special case, like not sending this through a simple HTTP request, but through something like firebase, they have builtin tools for this as well, but if you give more detail maybe i would be able to help you more in depth with your problem :D.

Initialize Axios for Vue HTTP Client

  • UPDATE: Okay, sorry, my applogies, I totally misunderstood, what you needed:.
  • Just make a Reader object, which is there to handle these types of situations, and listen for the events emitted by it.
  • Hope this helps, if you have any more questions, please ask :DAnd this is the output to the console, you can use this data to display on the UI as well:.

Vue Upload Multiple Images Overview

NOTE: In my opinion for images you dont need this progress indicator, since they dont take a long time to upload and will show 100% for most of images(the console output is for a file that is 500mb large), but if you include the http request to upload the file here, then i think it would be ok, if you want to upload regular files, than this is expected and needed.

In this tutorial, I will show you way to build a Vue example for Upload Multiple Images that uses Axios and Multipart File with FormData for making HTTP requests.

You will also know how to add Bootstrap progress bar, show response message and display list of images’ information (with name and url) from Web API.

Not the answer you're looking for? Browse other questions tagged javascriptvue.jsvuejs3 or ask your own question.

More Practice: – Vue.js 2 CRUD Application with Vue Router & Axios – Vue.js JWT Authentication with Vuex and Vue Router – Vue Pagination with Axios and API example.

Using Vuetify instead of Bootstrap:Vuetify Multiple Images Upload example. We’re gonna create a Vue.js Multiple Images upload application in that user can:. see the upload process (percentage) of each image with progress bars.

view all uploaded images. download link to image when clicking on the name. Here are APIs that we will use Axios to make HTTP requests:. You can find how to implement the Rest APIs Server at one of following posts: – Node.js Express File Upload Rest API example – Node.js Express File Upload to MongoDB example – Node.js Express File Upload to Google Cloud Storage example – Spring Boot Multipart File upload example.

Add Bootstrap to the project

After building the Vue App is done, the folder structure will look like this:.

Structure of the Project

– UploadFilesService provides methods to save Image and get list of Images using Axios.

– UploadImages component contains upload form for multiple images, progress bars, display of list of images.

Source Code

– App.vue is the container that we embed all Vue components. – index.html for importing the Bootstrap.

  • – http-common.js initializes Axios with HTTP base Url and headers. – We configure port for our App in vue.config.js.
  • Open index.html and add following line into tag:.

Under src folder, we create http-common.js file like this:.

Remember to change the baseURL, it depends on REST APIs url that your Server configures.

This service will use Axios to send HTTP requests. There are 2 functions:. upload(file): POST form data with a callback for tracking upload progress. getFiles(): GET list of Images’ information.

– First we import Axios as http from http-common.js. – FormData is a data structure that can be used to store key-value pairs. We use it to build an object which corresponds to an HTML form with append() method.

– We pass onUploadProgress to exposes progress events. This progress event are expensive (change detection for each event), so you should only use when you want to monitor it.

Create Service for File Upload

– We call the post() & get() method of Axios to send an HTTP POST & Get request to the File Upload server.

Let’s create a Image Upload UI with Progress Bar, Card, Button and Message.

First we create a Vue component template and import UploadFilesService:.

Then we define the some data variables inside data(). Next we create selectFiles() method which helps us to get the selected Images from element later.

selectedFiles array will be used for accessing current selected Images. Every image has a corresponding progress Info (percentage, file name) and index in progressInfos array.

We call UploadFilesService.upload() method on each file with a callback.

So create following upload() method:. The progress will be calculated basing on event.loaded and event.total. If the transmission is done, we call UploadFilesService.getFiles() to get the images' information and assign the result to fileInfos state, which is an array of {name, url} objects.

We also need to do this work in mounted() method:. Now we implement the HTML template of the Upload File UI. Add the following content to