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


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vuetify-file-upload/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vuetify-file-upload/HEAD/src/assets/logo.png


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


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   transpileDependencies: ["vuetify"],
3 |   devServer: {
4 |     port: 8081,
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Vuetify from 'vuetify/lib';
3 | 
4 | Vue.use(Vuetify);
5 | 
6 | export default new Vuetify({
7 | });
8 | 


--------------------------------------------------------------------------------
/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 | });


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


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


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-container fluid style="width: 600px">
 4 |       <div class="mb-5">
 5 |         <h1>bezkoder.com</h1>
 6 |         <h2>Vuetify File Upload</h2>
 7 |       </div>
 8 | 
 9 |       <upload-files></upload-files>
10 |     </v-container>
11 |   </v-app>
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();


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/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 rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuetify-file-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.19.2",
12 |     "core-js": "^3.6.4",
13 |     "vue": "^2.6.11",
14 |     "vuetify": "^2.2.11"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^4.3.0",
18 |     "@vue/cli-plugin-eslint": "^4.3.0",
19 |     "@vue/cli-service": "^4.3.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "sass": "^1.19.0",
24 |     "sass-loader": "^8.0.0",
25 |     "vue-cli-plugin-vuetify": "^2.0.5",
26 |     "vue-template-compiler": "^2.6.11",
27 |     "vuetify-loader": "^1.3.0"
28 |   },
29 |   "eslintConfig": {
30 |     "root": true,
31 |     "env": {
32 |       "node": true
33 |     },
34 |     "extends": [
35 |       "plugin:vue/essential",
36 |       "eslint:recommended"
37 |     ],
38 |     "parserOptions": {
39 |       "parser": "babel-eslint"
40 |     },
41 |     "rules": {}
42 |   },
43 |   "browserslist": [
44 |     "> 1%",
45 |     "last 2 versions",
46 |     "not dead"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vuetify File Upload example
 2 | 
 3 | For more details, please visit:
 4 | > [Vuetify File Upload example with Progress Bar](https://bezkoder.com/vuetify-file-upload/)
 5 | 
 6 | Rest APIs server for this Vue Client:
 7 | > [Node.js Express File Upload Rest API example](https://bezkoder.com/node-js-express-file-upload/)
 8 | 
 9 | > [Node.js Express File Upload with Google Cloud Storage example](https://bezkoder.com/google-cloud-storage-nodejs-upload-file/)
10 | 
11 | > [Spring Boot Multipart File upload example](https://bezkoder.com/spring-boot-file-upload/)
12 | 
13 | More Practice:
14 | > [Vuetify Image Upload with Preview example](https://bezkoder.com/vuetify-image-upload-preview/)
15 | 
16 | > [Vuetify Multiple Images Upload example with Progress Bar](https://bezkoder.com/vuetify-multiple-image-upload/)
17 | 
18 | > [Vuetify CRUD App example | v-data-table](https://bezkoder.com/vuetify-data-table-example/)
19 | 
20 | > [Vuetify Pagination (Server Side) example](https://bezkoder.com/vuetify-pagination-server-side/)
21 | 
22 | Fullstack CRUD App:
23 | > [Vue.js + Node.js + Express + MySQL](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)
24 | 
25 | > [Vue.js + Node.js + Express + PostgreSQL](https://bezkoder.com/vue-node-express-postgresql/)
26 | 
27 | > [Vue.js + Node.js + Express + MongoDB](https://bezkoder.com/vue-node-express-mongodb-mevn-crud/)
28 | 
29 | > [Vue.js + Spring Boot + Embedded Database example](https://bezkoder.com/spring-boot-vue-js-crud-example/)
30 | 
31 | > [Vue.js + Spring Boot + MySQL example](https://bezkoder.com/spring-boot-vue-js-mysql/)
32 | 
33 | > [Vue.js + Spring Boot + PostgreSQL example](https://bezkoder.com/spring-boot-vue-js-postgresql/)
34 | 
35 | > [Vue.js + Spring Boot + MongoDB](https://bezkoder.com/spring-boot-vue-mongodb/)
36 | 
37 | > [Vue.js + Django Rest Framework](https://bezkoder.com/django-vue-js-rest-framework/)
38 | 
39 | Integration (run back-end & front-end on same server/port)
40 | > [Integrate Vue App with Spring Boot](https://bezkoder.com/integrate-vue-spring-boot/)
41 | 
42 | > [Integrate Vue App with Node.js Express](https://bezkoder.com/serve-vue-app-express/)
43 | 
44 | Serverless with Firebase:
45 | > [Vue Firebase Realtime Database: CRUD example](https://bezkoder.com/vue-firebase-realtime-database/)
46 | 
47 | > [Vue Firestore CRUD example](https://bezkoder.com/vue-firestore-crud/)
48 | 
49 | ## Project setup
50 | ```
51 | npm install
52 | ```
53 | 
54 | ### Compiles and hot-reloads for development
55 | ```
56 | npm run serve
57 | ```
58 | 
59 | ### Compiles and minifies for production
60 | ```
61 | npm run build
62 | ```
63 | 
64 | ### Run your tests
65 | ```
66 | npm run test
67 | ```
68 | 
69 | ### Lints and fixes files
70 | ```
71 | npm run lint
72 | ```
73 | 
74 | ### Customize configuration
75 | See [Configuration Reference](https://cli.vuejs.org/config/).
76 | 


--------------------------------------------------------------------------------
/src/components/UploadFiles.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if="currentFile">
  4 |       <div>
  5 |         <v-progress-linear
  6 |           v-model="progress"
  7 |           color="light-blue"
  8 |           height="25"
  9 |           reactive
 10 |         >
 11 |           <strong>{{ progress }} %</strong>
 12 |         </v-progress-linear>
 13 |       </div>
 14 |     </div>
 15 | 
 16 |     <v-row no-gutters justify="center" align="center">
 17 |       <v-col cols="8">
 18 |         <v-file-input
 19 |           show-size
 20 |           label="File input"
 21 |           @change="selectFile"
 22 |         ></v-file-input>
 23 |       </v-col>
 24 | 
 25 |       <v-col cols="4" class="pl-2">
 26 |         <v-btn color="success" dark small @click="upload">
 27 |           Upload
 28 |           <v-icon right dark>mdi-cloud-upload</v-icon>
 29 |         </v-btn>
 30 |       </v-col>
 31 |     </v-row>
 32 | 
 33 |     <v-alert v-if="message" border="left" color="blue-grey" dark>
 34 |       {{ message }}
 35 |     </v-alert>
 36 | 
 37 |     <v-card v-if="fileInfos.length > 0" class="mx-auto">
 38 |       <v-list>
 39 |         <v-subheader>List of Files</v-subheader>
 40 |         <v-list-item-group color="primary">
 41 |           <v-list-item v-for="(file, index) in fileInfos" :key="index">
 42 |             <a :href="file.url">{{ file.name }}</a>
 43 |           </v-list-item>
 44 |         </v-list-item-group>
 45 |       </v-list>
 46 |     </v-card>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script>
 51 | import UploadService from "../services/UploadFilesService";
 52 | 
 53 | export default {
 54 |   name: "upload-files",
 55 |   data() {
 56 |     return {
 57 |       currentFile: undefined,
 58 |       progress: 0,
 59 |       message: "",
 60 | 
 61 |       fileInfos: [],
 62 |     };
 63 |   },
 64 |   methods: {
 65 |     selectFile(file) {
 66 |       this.progress = 0;
 67 |       this.currentFile = file;
 68 |     },
 69 | 
 70 |     upload() {
 71 |       if (!this.currentFile) {
 72 |         this.message = "Please select a file!";
 73 |         return;
 74 |       }
 75 | 
 76 |       this.message = "";
 77 | 
 78 |       UploadService.upload(this.currentFile, (event) => {
 79 |         this.progress = Math.round((100 * event.loaded) / event.total);
 80 |       })
 81 |         .then((response) => {
 82 |           this.message = response.data.message;
 83 |           return UploadService.getFiles();
 84 |         })
 85 |         .then((files) => {
 86 |           this.fileInfos = files.data;
 87 |         })
 88 |         .catch(() => {
 89 |           this.progress = 0;
 90 |           this.message = "Could not upload the file!";
 91 |           this.currentFile = undefined;
 92 |         });
 93 |     },
 94 |   },
 95 |   mounted() {
 96 |     UploadService.getFiles().then((response) => {
 97 |       this.fileInfos = response.data;
 98 |     });
 99 |   },
100 | };
101 | </script>
102 | 


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