In this tutorial, I will show you way to use Vuetify to build Multiple Images Upload example with Axios and Multipart File for making HTTP requests. You will also know how to add progress bar, show response message and display list of images’ information (with url).
More Practice:
– Vuetify data-table example with a CRUD App | v-data-table
– Vuetify Pagination (Server side) example
– Vue.js JWT Authentication with Vuex and Vue Router
Using Bootstrap: Vue Upload Multiple Images with Axios and Progress Bars
Contents
- Overview
- Technology
- Setup Vuetify multiple Images Upload Project
- Project Structure
- Initialize Axios for Vue HTTP Client
- Create Service for File Upload
- Create Vuetify Components for Multiple Images Upload
- Add Upload Images Component to App Component
- Configure Port for Vuetify Multiple Images Upload App
- Run the App
- Further Reading
- Conclusion
- Source Code
Overview
We’re gonna create a Vuetify 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:
Methods | Urls | Actions |
---|---|---|
POST | /upload | upload a File |
GET | /files | get List of Files (name & url) |
GET | /files/[filename] | download a File |
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
Technology
- Vue 2.6
- Axios 0.20.0
- Vuetify 2
Setup Vuetify multiple Images Upload Project
Open cmd at the folder you want to save Project folder, run command:
vue create vuetify-multiple-image-upload
You will see some options, choose default (babel, eslint).
After the Vue project is created successfully, we import Vuetify with command: vue add vuetify
.
The Console will show:
�📦 Installing vue-cli-plugin-vuetify...
+ [email protected]
added 5 packages from 7 contributors and audited 1277 packages in 25.013s
found 0 vulnerabilities
✔ Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset: Default (recommended)
�🚀 Invoking generator for vue-cli-plugin-vuetify...
�📦 Installing additional dependencies...
added 7 packages from 5 contributors and audited 1284 packages in 41.183s
found 0 vulnerabilities
âš“ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
The following files have been updated / added:
src/assets/logo.svg
src/plugins/vuetify.js
vue.config.js
package-lock.json
package.json
public/index.html
src/App.vue
src/components/HelloWorld.vue
src/main.js
Open plugins/vuetify.js, you can see:
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({
});
Then in main.js file, Vuetify object will added automatically to Vue App:
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
And vue.config.js:
module.exports = {
transpileDependencies: ["vuetify"]
};
Project Structure
Let’s remove unnecessary folders and files, then create new ones like this:
Let me explain it briefly.
– plugins/vuetify.js imports Vuetify library, initializes and exports Vuetify object for main.js.
We don’t need to do anything with these 2 files because the command add Vuetify
helped us.
– UploadFilesService provides methods to upload Image and retrieve Images using Axios.
– UploadImages component contains upload form for multiple images, progress bars, display of list images.
– App.vue is the container that we embed all Vue components.
– http-common.js initializes Axios with HTTP base Url and headers.
– We configure transpile Dependencies and port for our App in vue.config.js
Initialize Axios for Vue HTTP Client
Now we add Axios library with command: npm install axios
.
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 progressgetFiles()
: 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 Vuetify Components for Multiple Images Upload
Let’s create a File Upload UI with Vuetify Progress Bar, Button and Alert. We also have Card and List Item Group for displaying uploaded images.
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: [],
};
},
};
fileInfos
is an array of{name, url}
objects. We’re gonna display its data in a Vuetifyv-list
andv-list-item-group
.progressInfos
contains the percentage of files’ upload progress (with related file names).
Next we define selectFile()
method which helps us to get the selected Files from v-file-input
element in HTML template later.
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: {
selectFiles(files) {
this.progressInfos = [];
this.selectedFiles = 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 using Vuetify. 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>
<v-progress-linear
v-model="progressInfo.percentage"
color="light-blue"
height="25"
reactive
>
<strong>{{ progressInfo.percentage }} %</strong>
</v-progress-linear>
</div>
</div>
<v-row no-gutters justify="center" align="center">
<v-col cols="8">
<v-file-input
accept="image/*"
multiple
show-size
label="Select Images"
@change="selectFiles"
></v-file-input>
</v-col>
<v-col cols="4" class="pl-2">
<v-btn color="success" dark small @click="uploadFiles">
Upload
<v-icon right dark>mdi-cloud-upload</v-icon>
</v-btn>
</v-col>
</v-row>
<v-alert v-if="message" border="left" color="teal" outlined class="multi-line">
{{ message }}
</v-alert>
<v-card v-if="fileInfos.length > 0" class="mx-auto">
<v-list>
<v-subheader>List of Images</v-subheader>
<v-list-item-group color="primary">
<v-list-item v-for="(file, index) in fileInfos" :key="index">
<v-list-item-content>
<v-list-item-title class="mb-3">
<a :href="file.url">{{ file.name }}</a>
</v-list-item-title>
<v-list-item-subtitle>
<img :src="file.url" :alt="file.name" height="80px">
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</div>
</template>
In the code above, we use Vuetify input element <v-file-input accept="image/*" multiple />
:
accept="image/*"
: only image file type is acceptedmultiple
: allow user to choose multiple files
We also use Vuetify Progress linear: v-progress-linear
. This component will be responsive to user input with v-model
. We bind the progress
model of each progressInfo
item (progressInfo.percentage
) to display the process inside of the progress bar.
The v-btn
button will call uploadFiles()
method, then notification is shown with v-alert
.
Add Upload Images Component to App Component
Open App.vue and embed the UploadImages
Component with <upload-images>
tag.
<template>
<v-app>
<v-container fluid style="width: 600px">
<div class="mb-5">
<h1>bezkoder.com</h1>
<h2>Vuetify multiple Images upload</h2>
</div>
<upload-images></upload-images>
</v-container>
</v-app>
</template>
<script>
import UploadImages from "./components/UploadImages";
export default {
name: "App",
components: {
UploadImages,
},
};
</script>
Configure Port for Vuetify Multiple Images Upload 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/Vuetify App with command: npm run serve
.
Open Browser with url http://localhost:8081/
and check the result.
Further Reading
- Vuetify Components: Form Controls
- https://github.com/axios/axios
- Vue Typescript example: Build a CRUD Application
- Vue.js JWT Authentication with Vuex and Vue Router
If you want to build Vuetify CRUD App like this:
You can visit the tutorial:
Vuetify data-table example with a CRUD App | v-data-table
Conclusion
Today we're learned how to build a Vue/Vuetify application for multiple Images Upload using Axios with Vuetify Progress Bars. We also provide the ability to show list of images, upload progress percentage, and to download images 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
You can try with Bootstrap version:
Vue Upload Multiple Images with Axios and Progress Bars
Source Code
The source code for this Vue Client is uploaded to Github.
where is the upload folder located? In the public or assets folder?
Hi, we store images in the upload folder from server side, not client side (Vue App). You can use the backend server that I mention in the tutorial for more details 🙂
Good write-up, saved to my favourite tutorial! Thanks!