Vue Upload Multiple Images with Axios and Progress Bars

bezkoder Vue.js

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.

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


Vue Upload Multiple Images Overview

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

vue-upload-multiple-image-example

Technology

  • Vue 2.6
  • Axios 0.20.0
  • Bootstrap 4

Web API for Image Upload & Storage

Here are APIs that we will use Axios to make HTTP requests:

Methods Urls Actions
POST /upload upload a File
GET /files get List of Images (file name & url)
GET /files/[filename] download an Image

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

Structure of the Project

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

vue-upload-multiple-image-project-structure

– 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.
– 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

Add Bootstrap to the project

Open index.html and add following line into <head> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
  </head>
  ...
</html>

Initialize Axios for Vue HTTP Client

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

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:8080",
  headers: {
    "Content-type": "application/json"
  }
});

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

Create Service for File Upload

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

services/UploadFilesService.js

import http from "../http-common";

class UploadFilesService {
  upload(file, onUploadProgress) {
    let formData = new FormData();

    formData.append("file", file);

    return http.post("/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data"
      },
      onUploadProgress
    });
  }

  getFiles() {
    return http.get("/files");
  }
}

export default new UploadFilesService();

– 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.

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

Create Component for Multiple Images Upload

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

First we create a Vue component template and import UploadFilesService:

components/UploadImages.vue

<template>

</template>

<script>
import UploadService from "../services/UploadFilesService";

export default {
  name: "upload-images",
  data() {
    return {

    };
  },
  methods: {
  
  }
};
</script>

Then we define the some data variables inside data()

export default {
  name: "upload-images",
  data() {
    return {
      selectedFiles: undefined,
      progressInfos: [],
      message: "",

      fileInfos: [],
    };
  },
};

Next we create selectFiles() method which helps us to get the selected Images from <input type="file" > element later.

export default {
  name: "upload-images",
  ...
  methods: {
    selectFile() {
      this.progressInfos = [];
      this.selectedFiles = event.target.files;
    }
  }
};

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.

export default {
  name: "upload-images",
  ...
  methods: {
    ...
    uploadFiles() {
      this.message = "";

      for (let i = 0; i < this.selectedFiles.length; i++) {
        this.upload(i, this.selectedFiles[i]);
      }
    }
  }
};

We call UploadFilesService.upload() method on each file with a callback. So create following upload() method:

export default {
  name: "upload-images",
  ...
  methods: {
    ...
    upload(idx, file) {
      this.progressInfos[idx] = { percentage: 0, fileName: file.name };

      UploadService.upload(file, (event) => {
        this.progressInfos[idx].percentage = Math.round(100 * event.loaded / event.total);
      })
        .then((response) => {
          let prevMessage = this.message ? this.message + "\n" : "";
          this.message = prevMessage + response.data.message;

          return UploadService.getFiles();
        })
        .then((files) => {
          this.fileInfos = files.data;
        })
        .catch(() => {
          this.progressInfos[idx].percentage = 0;
          this.message = "Could not upload the file:" + file.name;
        });
    }
  }
};

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:

export default {
  name: "upload-images",
  ...
  mounted() {
    UploadService.getFiles().then((response) => {
      this.fileInfos = response.data;
    });
  }
};

Now we implement the HTML template of the Upload File UI. Add the following content to <template>:

<template>
  <div>
    <div v-if="progressInfos">
      <div class="mb-2"
        v-for="(progressInfo, index) in progressInfos"
        :key="index"
      >
        <span>{{progressInfo.fileName}}</span>
        <div class="progress">
          <div class="progress-bar progress-bar-info"
            role="progressbar"
            :aria-valuenow="progressInfo.percentage"
            aria-valuemin="0"
            aria-valuemax="100"
            :style="{ width: progressInfo.percentage + '%' }"
          >
            {{progressInfo.percentage}}%
          </div>
        </div>
      </div>
    </div>

    <label class="btn btn-default">
      <input type="file" accept="image/*" multiple @change="selectFile" />
    </label>

    <button class="btn btn-success"
      :disabled="!selectedFiles"
      @click="uploadFiles"
    >
      Upload
    </button>

    <div v-if="message" class="alert alert-light" role="alert">
      <ul>
        <li v-for="(ms, i) in message.split('\n')" :key="i">
          {{ ms }}
        </li>
      </ul>
    </div>

    <div class="card">
      <div class="card-header">List of Files</div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item"
          v-for="(file, index) in fileInfos"
          :key="index"
        >
          <p><a :href="file.url">{{ file.name }}</a></p>
          <img :src="file.url" :alt="file.name" height="80px">
        </li>
      </ul>
    </div>
  </div>
</template>

In the code above, we create html input element <input type="file" accept="image/*" multiple />:

  • accept="image/*": only image file type is accepted
  • multiple: allow user to choose multiple files

We also use Bootstrap Progress Bar:

  • .progress as a wrapper
  • inner .progress-bar to indicate the progress
  • .progress-bar requires style to set the width by percentage
  • .progress-bar also requires role and some aria attributes to make it accessible
  • label of the progress bar is the text within it

Add Upload Images Component to App Component

Open App.vue and embed the UploadImages Component with <upload-images> tag.

<template>
  <div id="app">
    <div class="container" style="width:600px">
      <div style="margin: 20px">
        <h3>bezkoder.com</h3>
        <h4>Vue.js upload multiple Images</h4>
      </div>

      <upload-images></upload-images>
    </div>
  </div>
</template>

<script>
import UploadImages from "./components/UploadImages";

export default {
  name: "App",
  components: {
    UploadImages
  }
};
</script>

Configure Port for Vue Upload Multiple Images App

Because most of HTTP Server use CORS configuration that accepts resource sharing retricted to some sites or ports. And if you use the Project in this post or this tutorial for making Rest API Server, you need to configure the port.

In src folder, create vue.config.js file with following content:

module.exports = {
  devServer: {
    port: 8081
  }
}

We've set our app running at port 8081. vue.config.js will be automatically loaded by @vue/cli-service.

Run the App

Run this Vue Upload Multiple Images App with command: npm run serve.

Open Browser with url http://localhost:8081/ and check the result.

Further Reading

Fullstack CRUD App:

Conclusion

Today we're learned how to build a Vue application for upload multiple Images using Axios, Bootstrap with Progress Bars. We also provide the ability to show list of images, upload progress percentage, and to download image from the server.

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 (to static folder) example

If you want to use Vuetify instead of Bootstrap like this:

vuetify-multiple-image-upload-example

Please visit: Vuetify Multiple Images Upload example

Source Code

The source code for this Vue Client is uploaded to Github.