├── vue.config.js
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── http-common.js
    ├── App.vue
    ├── services
    │   └── UploadFilesService.js
    └── components
    │   └── UploadFiles.vue
├── .gitignore
├── package.json
└── README.md


/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   devServer: {
3 |     port: 8081
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-multiple-files-upload/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-multiple-files-upload/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/src/http-common.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | 
3 | export default axios.create({
4 |   baseURL: "http://localhost:8080",
5 |   headers: {
6 |     "Content-type": "application/json",
7 |   }
8 | });
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div class="container" style="width:600px">
 4 |       <div style="margin: 20px">
 5 |         <h3>bezkoder.com</h3>
 6 |         <h4>Vue.js multiple Files upload</h4>
 7 |       </div>
 8 | 
 9 |       <upload-files></upload-files>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import UploadFiles from "./components/UploadFiles";
16 | 
17 | export default {
18 |   name: "App",
19 |   components: {
20 |     UploadFiles
21 |   }
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/services/UploadFilesService.js:
--------------------------------------------------------------------------------
 1 | import http from "../http-common";
 2 | 
 3 | class UploadFilesService {
 4 |   upload(file, onUploadProgress) {
 5 |     let formData = new FormData();
 6 | 
 7 |     formData.append("file", file);
 8 | 
 9 |     return http.post("/upload", formData, {
10 |       headers: {
11 |         "Content-Type": "multipart/form-data"
12 |       },
13 |       onUploadProgress
14 |     });
15 |   }
16 | 
17 |   getFiles() {
18 |     return http.get("/files");
19 |   }
20 | }
21 | 
22 | export default new UploadFilesService();
23 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-js-multiple-files-upload",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.20.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^2.6.11"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "^4.5.0",
17 |     "@vue/cli-plugin-eslint": "^4.5.0",
18 |     "@vue/cli-service": "^4.5.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^6.2.2",
22 |     "vue-template-compiler": "^2.6.11"
23 |   },
24 |   "eslintConfig": {
25 |     "root": true,
26 |     "env": {
27 |       "node": true
28 |     },
29 |     "extends": [
30 |       "plugin:vue/essential",
31 |       "eslint:recommended"
32 |     ],
33 |     "parserOptions": {
34 |       "parser": "babel-eslint"
35 |     },
36 |     "rules": {}
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "last 2 versions",
41 |     "not dead"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Multiple Files Upload example with Axios, FormData and Progress Bars
 2 | 
 3 | For more details, please visit:
 4 | > [Vue Multiple Files Upload example](https://bezkoder.com/vue-multiple-files-upload/)
 5 | 
 6 | > [Vue single File Upload example using Axios](https://bezkoder.com/vue-axios-file-upload/)
 7 | 
 8 | > [Vuetify File Upload example](https://bezkoder.com/vuetify-file-upload/)
 9 | 
10 | Rest APIs server for this Vue Client:
11 | > [Node.js Express File Upload Rest API example](https://bezkoder.com/node-js-express-file-upload/)
12 | 
13 | > [Spring Boot Multipart File upload example](https://bezkoder.com/spring-boot-file-upload/)
14 | 
15 | Fullstack CRUD App:
16 | > [Vue.js + Node.js + Express + MySQL](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)
17 | 
18 | > [Vue.js + Node.js + Express + PostgreSQL](https://bezkoder.com/vue-node-express-postgresql/)
19 | 
20 | > [Vue.js + Node.js + Express + MongoDB](https://bezkoder.com/vue-node-express-mongodb-mevn-crud/)
21 | 
22 | > [Vue.js + Spring Boot + MySQL/PostgreSQL](https://bezkoder.com/spring-boot-vue-js-crud-example/)
23 | 
24 | > [Vue.js + Spring Boot + MongoDB](https://bezkoder.com/spring-boot-vue-mongodb/)
25 | 
26 | > [Vue.js + Django Rest Framework](https://bezkoder.com/django-vue-js-rest-framework/)
27 | 
28 | ## Project setup
29 | ```
30 | npm install
31 | ```
32 | 
33 | ### Compiles and hot-reloads for development
34 | ```
35 | npm run serve
36 | ```
37 | 
38 | ### Compiles and minifies for production
39 | ```
40 | npm run build
41 | ```
42 | 
43 | ### Run your tests
44 | ```
45 | npm run test
46 | ```
47 | 
48 | ### Lints and fixes files
49 | ```
50 | npm run lint
51 | ```
52 | 
53 | ### Customize configuration
54 | See [Configuration Reference](https://cli.vuejs.org/config/).
55 | 


--------------------------------------------------------------------------------
/src/components/UploadFiles.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if="progressInfos">
  4 |       <div class="mb-2"
  5 |         v-for="(progressInfo, index) in progressInfos"
  6 |         :key="index"
  7 |       >
  8 |         <span>{{progressInfo.fileName}}</span>
  9 |         <div class="progress">
 10 |           <div class="progress-bar progress-bar-info"
 11 |             role="progressbar"
 12 |             :aria-valuenow="progressInfo.percentage"
 13 |             aria-valuemin="0"
 14 |             aria-valuemax="100"
 15 |             :style="{ width: progressInfo.percentage + '%' }"
 16 |           >
 17 |             {{progressInfo.percentage}}%
 18 |           </div>
 19 |         </div>
 20 |       </div>
 21 |     </div>
 22 | 
 23 |     <label class="btn btn-default">
 24 |       <input type="file" multiple @change="selectFile" />
 25 |     </label>
 26 | 
 27 |     <button class="btn btn-success"
 28 |       :disabled="!selectedFiles"
 29 |       @click="uploadFiles"
 30 |     >
 31 |       Upload
 32 |     </button>
 33 | 
 34 |     <div v-if="message" class="alert alert-light" role="alert">
 35 |       <ul>
 36 |         <li v-for="(ms, i) in message.split('\n')" :key="i">
 37 |           {{ ms }}
 38 |         </li>
 39 |       </ul>
 40 |     </div>
 41 | 
 42 |     <div class="card">
 43 |       <div class="card-header">List of Files</div>
 44 |       <ul class="list-group list-group-flush">
 45 |         <li class="list-group-item"
 46 |           v-for="(file, index) in fileInfos"
 47 |           :key="index"
 48 |         >
 49 |           <a :href="file.url">{{ file.name }}</a>
 50 |         </li>
 51 |       </ul>
 52 |     </div>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 | import UploadService from "../services/UploadFilesService";
 58 | 
 59 | export default {
 60 |   name: "upload-files",
 61 |   data() {
 62 |     return {
 63 |       selectedFiles: undefined,
 64 |       progressInfos: [],
 65 |       message: "",
 66 | 
 67 |       fileInfos: [],
 68 |     };
 69 |   },
 70 |   methods: {
 71 |     selectFile(event) {
 72 |       this.progressInfos = [];
 73 |       this.selectedFiles = event.target.files;
 74 |     },
 75 | 
 76 |     upload(idx, file) {
 77 |       this.progressInfos[idx] = { percentage: 0, fileName: file.name };
 78 | 
 79 |       UploadService.upload(file, (event) => {
 80 |         this.progressInfos[idx].percentage = Math.round(100 * event.loaded / event.total);
 81 |       })
 82 |         .then((response) => {
 83 |           let prevMessage = this.message ? this.message + "\n" : "";
 84 |           this.message = prevMessage + response.data.message;
 85 | 
 86 |           return UploadService.getFiles();
 87 |         })
 88 |         .then((files) => {
 89 |           this.fileInfos = files.data;
 90 |         })
 91 |         .catch(() => {
 92 |           this.progressInfos[idx].percentage = 0;
 93 |           this.message = "Could not upload the file:" + file.name;
 94 |         });
 95 |     },
 96 | 
 97 |     uploadFiles() {
 98 |       this.message = "";
 99 | 
100 |       for (let i = 0; i < this.selectedFiles.length; i++) {
101 |         this.upload(i, this.selectedFiles[i]);
102 |       }
103 |     }
104 |   },
105 |   mounted() {
106 |     UploadService.getFiles().then((response) => {
107 |       this.fileInfos = response.data;
108 |     });
109 |   }
110 | };
111 | </script>
112 | 


--------------------------------------------------------------------------------