├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── package.json
└── src
    ├── App.vue
    ├── assets
        ├── logo.png
        └── preview.jpg
    ├── components
        └── Home.vue
    ├── main.js
    └── routes.js


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Multiple Image Upload (v1.0.10)
  2 | 
  3 | # Welcome Back
  4 | 
  5 | Hello Everyone,My name is **Zin Min Htet** and here is my [**Facebook account**](https://www.facebook.com/mm.zakerxa).
  6 | 
  7 | Now, I will show you how to Upload Multiple Image using Vue-Component.
  8 | 
  9 | There is an image Preview, Resize, Remove, Add More, Drag & Drop features are included.
 10 | 
 11 | You can also limit the maximun number of file upload, the Image size , the Image type.
 12 | 
 13 | I add new feature alert Box, Resize Image, Preview also can be resize in version 1.0.8;
 14 | 
 15 | 
 16 | # Here is Live Demo
 17 | 
 18 | <img src="https://raw.githubusercontent.com/Zakerxa/Vue-Multi-Image-Upload/master/src/assets/preview.jpg" alt="preview" width="200" style="max-width:200px;"/>
 19 | 
 20 | **Watch Now [Live Demo](https://vue-multi-image-upload.vercel.app).**
 21 | 
 22 | 
 23 | ## Installation
 24 | 
 25 | ```NPM
 26 | npm i @zakerxa/vue-multiple-image-upload
 27 | ```
 28 | 
 29 | ## Setup
 30 | 
 31 | **1 - Import the vue component locally in the script Tag**
 32 | 
 33 | ```Vue
 34 | <script>
 35 |  import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
 36 | 
 37 |   export default {
 38 |     components:{
 39 |       VueMultiImageUpload
 40 |     }
 41 |   }
 42 | </script>
 43 | ```
 44 | **OR**
 45 | **Global registration in your main.js**
 46 | 
 47 | ```Javascript
 48 |  import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
 49 |  const app = createApp(App);
 50 |  app.component("vue-multi-image-upload", VueMultiImageUpload);
 51 | 
 52 | ```
 53 | 
 54 | **2 - In your Vue Template**
 55 | 
 56 | ```Vue
 57 | <template>
 58 |     <vue-multi-image-upload @data-image="images" :max="4" :data-reset="component"/>
 59 | </template>
 60 | ```
 61 | 
 62 | `⇃⇃⇃⇃⇂⇂⇂⇂`
 63 | 
 64 | ```Vue
 65 | <script>
 66 | export default {
 67 |     data(){
 68 |       return {
 69 |         component : {}
 70 |       },
 71 |     },
 72 |     methods:{
 73 |         images(e){
 74 |           e.map(res=>console.log(res))
 75 |         },
 76 |         clear(){
 77 |             this.component.clear = true;
 78 |         }
 79 |     }
 80 | }
 81 | 
 82 | </script>
 83 | ```
 84 | 
 85 | ## Props & Type
 86 | 
 87 | <table class="table">
 88 |   <thead>
 89 |     <tr>
 90 |       <th scope="col">Props</th>
 91 |       <th scope="col">Data Type</th>
 92 |       <th scope="col">Default</th>
 93 |       <th scope="col">Optional</th>
 94 |       <th scope="col">Description</th>
 95 |     </tr>
 96 |   </thead>
 97 |   <tbody>
 98 |     <tr>
 99 |       <td scope="row">max</td>
100 |       <td>Number</td>
101 |       <td>6</td>
102 |       <td>YES</td>
103 |       <td>Upload File Limit</td>
104 |     </tr>
105 |     <tr>
106 |       <td scope="row">Preview</td>
107 |       <td>Object</td>
108 |       <td>{ h:100, w:100 }</td>
109 |       <td>YES</td>
110 |       <td>Preview Size h => height</td>
111 |     </tr>
112 |     <tr>
113 |       <td scope="row">Resize</td>
114 |       <td>Object</td>
115 |       <td>No Default</td>
116 |       <td>YES</td>
117 |       <td>{ h:500, w:500 , keepRatio: true}</td>
118 |     </tr>
119 |     <tr>
120 |       <td scope="row">imageSize</td>
121 |       <td>Number</td>
122 |       <td>4e6</td>
123 |       <td>YES</td>
124 |       <td>Image File Size</td>
125 |     </tr>
126 |     <tr>
127 |       <td scope="row">alertTimeout</td>
128 |       <td>Number</td>
129 |       <td>3e3 (3s)</td>
130 |       <td>YES</td>
131 |       <td>Alert TimeOut</td>
132 |     </tr>
133 |     <tr>
134 |       <td scope="row">accept</td>
135 |       <td>Array</td>
136 |       <td>[image/png, image/jpg, image/gif]</td>
137 |       <td>YES</td>
138 |       <td>Image's Format Validate</td>
139 |     </tr>
140 |      <tr>
141 |       <td scope="row">dataReset</td>
142 |       <td>Object</td>
143 |       <td>false</td>
144 |       <td>No</td>
145 |       <td>Reset the child component data.</td>
146 |     </tr>
147 |      <tr>
148 |       <td scope="row">Options</td>
149 |       <td>Object</td>
150 |       <td>"Maximun","Ready","Selected"</td>
151 |       <td>YES</td>
152 |       <td>Input Box Message.</td>
153 |     </tr>
154 |   </tbody>
155 | </table>
156 | 
157 | ## Explanation of usage
158 | 
159 | **1.Images methods can listen child input data from parent the component.**
160 | ```
161 |   @data-image="images"
162 |   images(e){
163 |    e.map(res=>console.log(res))
164 |   }
165 | ```
166 | 
167 | **2.We can Resize the images by adding resize props**
168 | ```
169 | :resize={ h:500, w:500 ,keepRatio:true}
170 | h => max-height of the image
171 | w => max-width of the image
172 | 
173 | keepRatio true can resize your image without losing distortion
174 | keepRatio false can resize your image exactly width & height
175 | 
176 | Default is False
177 | ```
178 | 
179 | 
180 | **3.We can limit the number of image to upload maximun**
181 | ```
182 | :max="limitNumber"
183 | ```
184 | 
185 | **4.We can also limit the images size & type.**
186 | ```
187 | :image-size="imageSize" :accept="imageType"
188 | 
189 | this.imageSize = 2e6; // 2MB
190 | ImageSize only allow 2MB else We will show alert msg to user.
191 | 
192 | this.imageType = ['image/jpeg', 'image/png', 'image/gif'];
193 | imageType should be inside an array
194 | ```
195 | 
196 | **5.And, There is one options.Options can change the message inputBox.**
197 | ```
198 | :options="options"
199 | this.options.max = "Max";
200 | this.options.ready = "Ready";
201 | this.options.select = "Choosed";
202 | ```
203 | 
204 | **6.If you want to reset child component data,You can use :data-reset props to passing Object**
205 | ```
206 | :data-reset="components"
207 | this.component.clear = true;
208 | ```
209 | 
210 | ## Final State
211 | 
212 | **That's all what you need**
213 | 
214 | ```Vue
215 | <template>
216 |    <vue-multi-image-upload 
217 |      @data-image="images" 
218 |      :max="4" 
219 |      :image-size="4e6"  
220 |      :alert-timeout="3e3" 
221 |      :accept="imageType"
222 |      :preview="{ h:100,w:100 }"
223 |      :resize="{ h:500,w:500, keepRatio:true}" 
224 |      :data-reset="component" 
225 |      :options="options"  
226 |     />
227 |    <button @click="clear()">Clear</button>
228 | </template>
229 | 
230 | <script>
231 | 
232 | import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
233 | 
234 | export default {
235 |     data(){
236 |         return {
237 |           component : {},
238 |           inputImages : [],
239 |           imageType : ['image/jpeg', 'image/png', 'image/gif']
240 |         }
241 |     },
242 |     components:{
243 |       VueMultiImageUpload
244 |     },
245 |     methods:{
246 |       images(e){
247 |         this.inputImages = e;
248 |       },
249 |       inputFormData(){
250 |         // The way to append images to FormData.
251 |         let formData = new FormData();
252 |         this.inputImages.map(img => formData.append('images[]',img));
253 |         return formData;
254 |       },
255 |       clear(){
256 |         this.component.clear = true;
257 |       }
258 |     }
259 | }
260 | </script>
261 | 
262 | ```
263 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     presets: ["@vue/cli-plugin-babel/preset"],
3 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "@zakerxa/github-multiple-image-upload",
 3 |     "version": "1.0.10",
 4 |     "license": "MIT",
 5 |     "description": "This is a vue-component multiple image upload with preview.I hope this can help you a lot.",
 6 |     "keywords": [
 7 |         "Vue Multiple Image Upload",
 8 |         "Vue Multi Image Upload",
 9 |         "Vue Multiple Image",
10 |         "Vue Laravel Multiple Image Upload",
11 |         "Multiple Image Upload",
12 |         "MultipleImageUpload",
13 |         "Laravel Vue Multiple Image"
14 |     ],
15 |     "author": "Zin Min Htet",
16 |     "homepage": "https://github.com/Zakerxa/Vue-Multi-Image-Upload#readme",
17 |     "repository": {
18 |         "type": "git",
19 |         "url": "https://github.com/Zakerxa/Vue-Multi-Image-Upload.git"
20 |     },
21 |     "bugs": {
22 |         "url": "https://github.com/Zakerxa/Vue-Multi-Image-Upload/issues",
23 |         "email": "zakerxa@gmail.com"
24 |     },
25 |     "private": true,
26 |     "scripts": {
27 |         "s": "vue-cli-service serve",
28 |         "build": "vue-cli-service build",
29 |         "test:unit": "vue-cli-service test:unit",
30 |         "lint": "vue-cli-service lint"
31 |     },
32 |     "dependencies": {
33 |         "@zakerxa/vue-multiple-image-upload": "^1.0.10",
34 |         "vue-router": "^4.1.5"
35 |     },
36 |     "devDependencies": {
37 |         "@vue/cli-plugin-babel": "~4.5.13",
38 |         "@vue/cli-plugin-eslint": "~4.5.13",
39 |         "@vue/cli-plugin-unit-jest": "~4.5.13",
40 |         "@vue/cli-service": "~4.5.13",
41 |         "@vue/compiler-sfc": "^3.0.0",
42 |         "@vue/eslint-config-prettier": "^6.0.0",
43 |         "@vue/test-utils": "^2.0.0-0",
44 |         "babel-eslint": "^10.1.0",
45 |         "eslint": "^6.7.2",
46 |         "eslint-plugin-prettier": "^3.3.1",
47 |         "eslint-plugin-vue": "^7.0.0",
48 |         "prettier": "^2.2.1",
49 |         "sass": "^1.26.5",
50 |         "sass-loader": "^8.0.2",
51 |         "typescript": "~3.9.3",
52 |         "vue-jest": "^5.0.0-0"
53 |     },
54 |     "eslintConfig": {
55 |         "root": true,
56 |         "env": {
57 |             "node": true
58 |         },
59 |         "extends": [
60 |             "plugin:vue/vue3-essential",
61 |             "eslint:recommended"
62 |         ],
63 |         "parserOptions": {
64 |             "parser": "babel-eslint"
65 |         },
66 |         "rules": {},
67 |         "overrides": [
68 |             {
69 |                 "files": [
70 |                     "**/__tests__/*.{j,t}s?(x)",
71 |                     "**/tests/unit/**/*.spec.{j,t}s?(x)"
72 |                 ],
73 |                 "env": {
74 |                     "jest": true
75 |                 }
76 |             }
77 |         ]
78 |     },
79 |     "browserslist": [
80 |         "> 1%",
81 |         "last 2 versions",
82 |         "not dead"
83 |     ],
84 |     "jest": {
85 |         "preset": "@vue/cli-plugin-unit-jest",
86 |         "transform": {
87 |             "^.+\\.vue$": "vue-jest"
88 |         }
89 |     }
90 | }
91 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Zakerxa/Vue-Multi-Image-Upload/35c12251fc420c2c48f19acd4f2e7b29606429dc/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |     <title>
10 |         <%= htmlWebpackPlugin.options.title %>
11 |     </title>
12 | </head>
13 | 
14 | <!-- Google tag (gtag.js) -->
15 | <script async src="https://www.googletagmanager.com/gtag/js?id=G-ML2NT02VX0"></script>
16 | <script>
17 |     window.dataLayer = window.dataLayer || [];
18 | 
19 |     function gtag() {
20 |         dataLayer.push(arguments);
21 |     }
22 |     gtag('js', new Date());
23 | 
24 |     gtag('config', 'G-ML2NT02VX0');
25 | </script>
26 | 
27 | <body>
28 |     <noscript>
29 |         <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
30 |                 Please enable it to continue.</strong>
31 |     </noscript>
32 |     <div id="app"></div>
33 |     <!-- built files will be auto injected -->
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/public/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue-multi-image-upload",
 3 |     "version": "1.0.1",
 4 |     "license": "MIT",
 5 |     "description": "This is a vue-component multiple image upload with preview.I hope this can help you a lot.",
 6 |     "keywords": [
 7 |         "Vue Multiple Image Upload",
 8 |         "Vue Multi Image Upload",
 9 |         "Vue Multiple Image",
10 |         "Vue Laravel Multiple Image Upload",
11 |         "Multiple Image Upload",
12 |         "MultipleImageUpload",
13 |         "Laravel Vue Multiple Image"
14 |     ],
15 |     "author": "Zin Min Htet",
16 |     "homepage": "https://github.com/Zakerxa/Vue-Multi-Image-Upload#readme",
17 |     "repository": {
18 |         "type": "git",
19 |         "url": "https://github.com/Zakerxa/Vue-Multi-Image-Upload.git"
20 |     },
21 |     "bugs": {
22 |         "url": "https://github.com/Zakerxa/Vue-Multi-Image-Upload/issues",
23 |         "email": "zakerxa@gmail.com"
24 |     },
25 |     "private": true,
26 |     "scripts": {
27 |         "s": "vue-cli-service serve",
28 |         "build": "vue-cli-service build",
29 |         "test:unit": "vue-cli-service test:unit",
30 |         "lint": "vue-cli-service lint"
31 |     },
32 |     "dependencies": {
33 |         "@zakerxa/vue-multiple-image-upload": "^1.0.0"
34 |     },
35 |     "devDependencies": {
36 |         "@vue/cli-plugin-babel": "~4.5.13",
37 |         "@vue/cli-plugin-eslint": "~4.5.13",
38 |         "@vue/cli-plugin-unit-jest": "~4.5.13",
39 |         "@vue/cli-service": "~4.5.13",
40 |         "@vue/compiler-sfc": "^3.0.0",
41 |         "@vue/eslint-config-prettier": "^6.0.0",
42 |         "@vue/test-utils": "^2.0.0-0",
43 |         "babel-eslint": "^10.1.0",
44 |         "eslint": "^6.7.2",
45 |         "eslint-plugin-prettier": "^3.3.1",
46 |         "eslint-plugin-vue": "^7.0.0",
47 |         "prettier": "^2.2.1",
48 |         "sass": "^1.26.5",
49 |         "sass-loader": "^8.0.2",
50 |         "typescript": "~3.9.3",
51 |         "vue-jest": "^5.0.0-0"
52 |     },
53 |     "eslintConfig": {
54 |         "root": true,
55 |         "env": {
56 |             "node": true
57 |         },
58 |         "extends": [
59 |             "plugin:vue/vue3-essential",
60 |             "eslint:recommended"
61 |         ],
62 |         "parserOptions": {
63 |             "parser": "babel-eslint"
64 |         },
65 |         "rules": {},
66 |         "overrides": [{
67 |             "files": [
68 |                 "**/__tests__/*.{j,t}s?(x)",
69 |                 "**/tests/unit/**/*.spec.{j,t}s?(x)"
70 |             ],
71 |             "env": {
72 |                 "jest": true
73 |             }
74 |         }]
75 |     },
76 |     "browserslist": [
77 |         "> 1%",
78 |         "last 2 versions",
79 |         "not dead"
80 |     ],
81 |     "jest": {
82 |         "preset": "@vue/cli-plugin-unit-jest",
83 |         "transform": {
84 |             "^.+\\.vue$": "vue-jest"
85 |         }
86 |     }
87 | }


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
 4 |      <div class="alert alert-success">This is only for Front-End testing.Upload button will not be work real.</div> 
 5 |      <home />
 6 |     <router-view></router-view>
 7 |   </div>
 8 |   
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "App"
14 | };
15 | </script>
16 | 
17 | <style lang="scss">
18 | #app {
19 |   text-align: center;
20 |   color: #2c3e50;
21 |   border-top: 5px solid #f00;
22 | }
23 | </style>


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Zakerxa/Vue-Multi-Image-Upload/35c12251fc420c2c48f19acd4f2e7b29606429dc/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Zakerxa/Vue-Multi-Image-Upload/35c12251fc420c2c48f19acd4f2e7b29606429dc/src/assets/preview.jpg


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container-fluid">
  3 |      <div class="row justify-content-center">
  4 |       <div class="col-12 col-sm-10 col-md-8 col-lg-5 mt-3 mb-5">
  5 |         <h5>Features</h5>
  6 |         <p class="">Preview, Resize, Remove, Add More, Drag & Drop, Limit File Size, File Upload Number and Image Type Limit</p>
  7 | 
  8 |          <div class="row">
  9 |            <div class="col-6 mt-3">
 10 |               <select @change="onChange($event)" class="form-select" aria-label="Default select example">
 11 |                 <option selected value="6">Maximun 6</option>
 12 |                 <option v-for="no in 10" :key="no.id" :value="no">Max Photo Upload {{no}}</option>
 13 |               </select>
 14 |             </div>
 15 |             <div class="col-6 mt-3">
 16 |               <select @change="onChangePreview($event)" class="form-select" aria-label="Default select example">
 17 |                 <option selected value="2">Preview</option>
 18 |                 <option value="1">50 x 50</option>
 19 |                 <option value="2">100 x 100</option>
 20 |                 <option value="3">100 x 200</option>
 21 |                 <option value="4">200 x 350</option>
 22 |                 <option value="5">200 x 400</option>
 23 |               </select>
 24 |             </div>
 25 |             <div class="col-6 mt-3">
 26 |               <select @change="onChangeFormat($event)" class="form-select" aria-label="Default select example">
 27 |                 <option selected value="all">All Images</option>
 28 |                 <option value="image/gif">Allow Gif Only</option>
 29 |                 <option value="image/png">Allow PNG Only</option>
 30 |                 <option value="image/jpeg">Allow JPEG Only</option>
 31 |                 <option value="image/svg+xml">Allow SVG Only</option>
 32 |                 <option value="image/webp">Allow Webp Only</option>
 33 |               </select>
 34 |             </div>
 35 |             <div class="col-6 mt-3">
 36 |               <select @change="onChangeSize($event)" class="form-select" aria-label="Default select example">
 37 |                 <option selected :value="3e6">File Size</option>
 38 |                 <option value="1e6">1MB</option>
 39 |                 <option value="2e6">2MB</option>
 40 |                 <option value="3e6">3MB</option>
 41 |                 <option value="5e6">5MB</option>
 42 |                 <option value="8e6">8MB</option>
 43 |               </select>
 44 |             </div>
 45 |          </div>
 46 |       </div>
 47 | 
 48 |       <h5>Vue Multiple Image Upload</h5>
 49 | 
 50 |       <div class="col-12 col-sm-10 col-md-8 col-lg-5 mt-3">
 51 |          <!-- Msg Box -->
 52 |          <div v-if="postAlert" :class="[alert.state ? 'alert-success' : 'alert-warning']" class="alert" role="alert">
 53 |           {{alert.msg}}
 54 |          </div>
 55 |           <!--  Vue Component -->
 56 |          <VueMultiImageUpload class="text-start"
 57 |          :max="max" 
 58 |          @data-image="images" 
 59 |          :preview="preview"
 60 |          :data-reset="vdata" 
 61 |          :options="options" 
 62 |          :image-size="size" 
 63 |          :accept="imageFormat"/>
 64 |       </div>
 65 | 
 66 |       <!-- Clear Button -->
 67 |       <div class="col-12 mb-4 pt-4">
 68 |         <button @click="upload()" class="btn btn-success fw-bold">Upload</button>
 69 |       </div>
 70 | 
 71 |       
 72 |      </div>
 73 |     <a class="position-fixed text-decoration-none text-dark" href="https://facebook.com/mm.zakerxa" style="right:10px;bottom:10px;">Facebook@ZinMinHtet</a>
 74 |   </div>
 75 | </template>
 76 | 
 77 | <script>
 78 | export default {
 79 |   name: "Home",
 80 |   data(){
 81 |     return {
 82 |       alert : {
 83 |         msg : "Successfully add new images.",
 84 |         state : true
 85 |       },
 86 |       alltype : ['image/png','image/jpeg','image/webp','image/gif','image/svg+xml'],
 87 |       imageFormat : ['image/png','image/jpeg','image/webp','image/gif','image/svg+xml'],
 88 |       preview : {h:100,w:100},
 89 |       vdata : { clear : false },
 90 |       inputImages : [],
 91 |       size  : 3e6,
 92 |       options : {
 93 |         max : "Maximun",
 94 |         ready : "Ready",
 95 |         select : "Selected"
 96 |       },
 97 |       max : 6,
 98 |       postAlert : false
 99 |     }
100 |   },
101 |   methods:{
102 |     images(e){
103 |       this.inputImages = e;
104 |     },
105 |     onChange(e){
106 |       this.max = e.target.value;
107 |     },
108 |     onChangeSize(e){
109 |        this.size = e.target.value;
110 |     },
111 |     onChangePreview(e){
112 |       switch (e.target.value) {
113 |         case "1": this.preview = {h:50,w:50};break;
114 |         case "2": this.preview = {h:100,w:100};break;
115 |         case "3": this.preview = {h:100,w:200};break;
116 |         case "4": this.preview = {h:200,w:350};break;
117 |         case "5": this.preview = {h:200,w:400};break;
118 |         default: break;  
119 |       }
120 |     },
121 |     onChangeFormat(e){
122 |       this.imageFormat = [e.target.value];
123 |       if(e.target.value == 'all') this.alltype.map(res=>this.imageFormat.push(res))
124 |     },
125 |     inputFormData(){
126 |       let formData = new FormData();
127 |       // The way to append images to FormData.
128 |       this.inputImages.map(img => formData.append('images[]',img));
129 |       return formData;
130 |     },
131 |     upload() {
132 |       if(this.inputImages.length > 0){
133 |         this.vdata.clear = true;
134 |         this.inputImages = [];
135 |         this.alertMsg(true);
136 |       }else this.alertMsg(false);
137 |     },
138 |     alertMsg(state){
139 |       if(state) {
140 |         this.alert.msg = "Successfully add new images.";
141 |         this.alert.state = true;
142 |       }
143 |       else {
144 |         this.alert.msg = "Please select image first.";
145 |         this.alert.state = false;
146 |       }
147 |       this.postAlert = true;
148 |       setTimeout(() => {
149 |         this.postAlert = false;
150 |       }, 1500);
151 |     },
152 |   }
153 | };
154 | </script>
155 | 
156 | 
157 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import App from "./App.vue";
 3 | import { VueMultiImageUpload } from "@zakerxa/vue-multiple-image-upload";
 4 | import routes from "./routes";
 5 | 
 6 | 
 7 | const app = createApp(App);
 8 | app.use(routes);
 9 | app.component("VueMultiImageUpload", VueMultiImageUpload);
10 | app.mount("#app");


--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router';
 2 | 
 3 | const routes = [{
 4 |     path: '/',
 5 |     name: 'home',
 6 |     component: require('./components/Home.vue').default
 7 | }]
 8 | 
 9 | 
10 | 
11 | 
12 | const router = createRouter({
13 |     history: createWebHistory(process.env.BASH_URL),
14 |     routes
15 | });
16 | 
17 | export default router;


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