├── demo.gif
├── package.json
├── LICENSE
├── README.md
└── dist
    └── vue-upload-drop-images.vue


/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yudax42/vue-upload-drop-images/HEAD/demo.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-upload-drop-images",
 3 |   "version": "1.0.7",
 4 |   "description": "Vue component that provides drag and drop images upload with preview",
 5 |   "main": "dist/vue-upload-drop-images.vue",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/yudax42/vue-upload-drop-images"
 9 |   },
10 |   "keywords": [
11 |     "vue-image-upload",
12 |     "vue.js image uploader with preview",
13 |     "drag drop image",
14 |     "upload multiple images with preview",
15 |     "component",
16 |     "vue-component",
17 |     "vue-upload-drop-images"
18 |   ],
19 |   "author": {
20 |     "name": "yudax42",
21 |     "email": "yudax42@gmail.com"
22 |   },
23 |   "license": "MIT",
24 |   "homepage": "https://github.com/yudax42/vue-upload-drop-images",
25 |   "dependencies": {}
26 | }
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Youssef
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Images Upload Component
  2 | Vue component that provides drag and drop images upload with preview.
  3 | 
  4 | ![Npm](https://img.shields.io/npm/dm/vue-upload-drop-images.svg)
  5 | 
  6 | ![demo](./demo.gif)
  7 | 
  8 | ## Features
  9 | 
 10 | * Upload files by Drag & Drop
 11 | * Upload files by clicking on the upload icon
 12 | * Add images
 13 | * Delete Images
 14 | * Append Images
 15 | * Remove all images
 16 | 
 17 | ## Example
 18 | 
 19 | [DEMO](https://vueupload.yudax.dev)
 20 | 
 21 | ## Install
 22 | 
 23 | 1. install the package:
 24 | 
 25 |     ```bash
 26 |         npm i vue-upload-drop-images --save
 27 |     ```
 28 | 
 29 | 2. import it in your project
 30 | 
 31 |    .vue file:
 32 |    ```javascript
 33 |         <script>
 34 |             import UploadImages from "vue-upload-drop-images"
 35 |             ...
 36 |             export default {
 37 |                     components: {
 38 |                         UploadImages,
 39 |                     },
 40 |             ...
 41 |         </script>
 42 |    ```
 43 | 
 44 | 3. add component in template
 45 |    ```html
 46 |         <template>
 47 |         ...
 48 |             <UploadImages />
 49 |         ...
 50 |         </template>
 51 | 
 52 |    ```
 53 | 
 54 | 4. for Nuxt support
 55 |   .nuxt.config:
 56 |     ```javascript
 57 |     build: {
 58 |       transpile: ['vue-upload-drop-images']
 59 |     }
 60 |     ```
 61 | 
 62 | ## Events
 63 | 
 64 | ### <b>@changed</b>
 65 | Fired when new images are added or deleted it always returns uploaded files
 66 | 
 67 | Template:
 68 | 
 69 | ```html
 70 |         <UploadImages @changed="handleImages"/>
 71 | ```
 72 | 
 73 | Script:
 74 | 
 75 | ```javascript
 76 |     ...
 77 |         methods:{
 78 |             handleImages(files){
 79 |                 console.log(files)
 80 |                 /*
 81 |                   [
 82 |                     {
 83 |                         "name": "Screenshot from 2021-02-23 12-36-33.png",
 84 |                         "size": 319775,
 85 |                         "type": "image/png",
 86 |                         "lastModified": 1614080193596
 87 |                         ...
 88 |                     },
 89 |                     ...
 90 |                     ]
 91 |                  */
 92 |             }
 93 |         }
 94 |     ...
 95 | ```
 96 | 
 97 | 
 98 | 
 99 | ## Props
100 | ### <b>max</b>
101 | Type: `Number`
102 | 
103 | Required: `false`
104 | 
105 | default: `null`
106 | 
107 | ```html
108 |     <!-- the user can upload up to 5 images-->
109 |     <UploadImages :max="5"/>
110 | ```
111 | 
112 | ### <b>maxError</b>
113 | Type: `String`
114 | 
115 | Required: `false`
116 | 
117 | default: `Maximum files is`
118 | 
119 | ```html
120 |     <!-- the error message that the user sees when the uploaded images greater that the max images required-->
121 |     <UploadImages maxError="Max files exceed"/>
122 | ```
123 | 
124 | ### <b>uploadMsg</b>
125 | Type: `String`
126 | 
127 | Required: `false`
128 | 
129 | default: `Click to upload or drop your images here`
130 | 
131 | ```html
132 |     <!-- the message that the user see to upload the images -->
133 |     <UploadImages uploadMsg="upload product images"/>
134 | ```
135 | 
136 | ### <b>fileError</b>
137 | Type: `String`
138 | 
139 | Required: `false`
140 | 
141 | default: `Unsupported file type`
142 | 
143 | ```html
144 |     <!-- the message that the user see when the uploaded file is not an image -->
145 |     <UploadImages fileError="images files only accepted"/>
146 | ```
147 | 
148 | ### <b>clearAll</b>
149 | Type: `String`
150 | 
151 | Required: `false`
152 | 
153 | default: `clear All`
154 | 
155 | ```html
156 |     <!-- the name of the remove all images button -->
157 |     <UploadImages clearAll="remove all images" />
158 | ```
159 | 


--------------------------------------------------------------------------------
/dist/vue-upload-drop-images.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 |   name: "VueUploadImages", // vue component name
  4 |   data() {
  5 |     return {
  6 |       error: "",
  7 |       files: [],
  8 |       dropped: 0,
  9 |       Imgs: [],
 10 |     };
 11 |   },
 12 |   props: {
 13 |     max: Number,
 14 |     uploadMsg: String,
 15 |     maxError: String,
 16 |     fileError: String,
 17 |     clearAll: String,
 18 |   },
 19 |   methods: {
 20 |     dragOver() {
 21 |       this.dropped = 2;
 22 |     },
 23 |     dragLeave() {},
 24 |     drop(e) {
 25 |       let status = true;
 26 |       let files = Array.from(e.dataTransfer.files)
 27 |       if (e && files) {
 28 |         files.forEach((file) => {
 29 |           if (file.type.startsWith("image") === false) status = false;
 30 |         });
 31 |         if (status == true) {
 32 |           if (
 33 |             this.$props.max &&
 34 |             files.length + this.files.length > this.$props.max
 35 |           ) {
 36 |             this.error = this.$props.maxError
 37 |               ? this.$props.maxError
 38 |               : `Maximum files is` + this.$props.max;
 39 |           } else {
 40 |             this.files.push(...files);
 41 |             this.previewImgs();
 42 |           }
 43 |         } else {
 44 |           this.error = this.$props.fileError
 45 |             ? this.$props.fileError
 46 |             : `Unsupported file type`;
 47 |         }
 48 |       }
 49 |       this.dropped = 0;
 50 |     },
 51 |     append() {
 52 |       this.$refs.uploadInput.click();
 53 |     },
 54 |     readAsDataURL(file) {
 55 |       return new Promise(function (resolve, reject) {
 56 |         let fr = new FileReader();
 57 |         fr.onload = function () {
 58 |           resolve(fr.result);
 59 |         };
 60 |         fr.onerror = function () {
 61 |           reject(fr);
 62 |         };
 63 |         fr.readAsDataURL(file);
 64 |       });
 65 |     },
 66 |     deleteImg(index) {
 67 |       this.Imgs.splice(index, 1);
 68 |       this.files.splice(index, 1);
 69 |       this.$emit("changed", this.files);
 70 |       this.$refs.uploadInput.value = null;
 71 |     },
 72 |     previewImgs(event) {
 73 |       if (
 74 |         this.$props.max &&
 75 |         event &&
 76 |         event.currentTarget.files.length + this.files.length > this.$props.max
 77 |       ) {
 78 |         this.error = this.$props.maxError
 79 |           ? this.$props.maxError
 80 |           : `Maximum files is` + this.$props.max;
 81 |         return;
 82 |       }
 83 |       if (this.dropped == 0) this.files.push(...event.currentTarget.files);
 84 |       this.error = "";
 85 |       this.$emit("changed", this.files);
 86 |       let readers = [];
 87 |       if (!this.files.length) return;
 88 |       for (let i = 0; i < this.files.length; i++) {
 89 |         readers.push(this.readAsDataURL(this.files[i]));
 90 |       }
 91 |       Promise.all(readers).then((values) => {
 92 |         this.Imgs = values;
 93 |       });
 94 |     },
 95 |     reset() {
 96 |       this.$refs.uploadInput.value = null;
 97 |       this.Imgs = [];
 98 |       this.files = [];
 99 |       this.$emit("changed", this.files);
100 |     },
101 |   },
102 | };
103 | </script>
104 | 
105 | <template>
106 |   <div
107 |     class="container"
108 |     @dragover.prevent="dragOver"
109 |     @dragleave.prevent="dragLeave"
110 |     @drop.prevent="drop($event)"
111 |   >
112 |     <div class="drop" v-show="dropped == 2"></div>
113 |     <!-- Error Message -->
114 |     <div v-show="error" class="error">
115 |       {{ error }}
116 |     </div>
117 | 
118 |     <!-- To inform user how to upload image -->
119 |     <div v-show="Imgs.length == 0" class="beforeUpload">
120 |       <input
121 |         type="file"
122 |         style="z-index: 1"
123 |         accept="image/*"
124 |         ref="uploadInput"
125 |         @change="previewImgs"
126 |         multiple
127 |       />
128 |       <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
129 |         <title>Upload Image</title>
130 |         <g id="Upload_Image" data-name="Upload Image">
131 |           <g id="_Group_" data-name="&lt;Group&gt;">
132 |             <g id="_Group_2" data-name="&lt;Group&gt;">
133 |               <g id="_Group_3" data-name="&lt;Group&gt;">
134 |                 <circle
135 |                   id="_Path_"
136 |                   data-name="&lt;Path&gt;"
137 |                   cx="18.5"
138 |                   cy="16.5"
139 |                   r="5"
140 |                   style="
141 |                     fill: none;
142 |                     stroke: #303c42;
143 |                     stroke-linecap: round;
144 |                     stroke-linejoin: round;
145 |                   "
146 |                 />
147 |               </g>
148 |               <polyline
149 |                 id="_Path_2"
150 |                 data-name="&lt;Path&gt;"
151 |                 points="16.5 15.5 18.5 13.5 20.5 15.5"
152 |                 style="
153 |                   fill: none;
154 |                   stroke: #303c42;
155 |                   stroke-linecap: round;
156 |                   stroke-linejoin: round;
157 |                 "
158 |               />
159 |               <line
160 |                 id="_Path_3"
161 |                 data-name="&lt;Path&gt;"
162 |                 x1="18.5"
163 |                 y1="13.5"
164 |                 x2="18.5"
165 |                 y2="19.5"
166 |                 style="
167 |                   fill: none;
168 |                   stroke: #303c42;
169 |                   stroke-linecap: round;
170 |                   stroke-linejoin: round;
171 |                 "
172 |               />
173 |             </g>
174 |             <g id="_Group_4" data-name="&lt;Group&gt;">
175 |               <polyline
176 |                 id="_Path_4"
177 |                 data-name="&lt;Path&gt;"
178 |                 points="0.6 15.42 6 10.02 8.98 13"
179 |                 style="
180 |                   fill: none;
181 |                   stroke: #303c42;
182 |                   stroke-linecap: round;
183 |                   stroke-linejoin: round;
184 |                 "
185 |               />
186 |               <polyline
187 |                 id="_Path_5"
188 |                 data-name="&lt;Path&gt;"
189 |                 points="17.16 11.68 12.5 7.02 7.77 11.79"
190 |                 style="
191 |                   fill: none;
192 |                   stroke: #303c42;
193 |                   stroke-linecap: round;
194 |                   stroke-linejoin: round;
195 |                 "
196 |               />
197 |               <circle
198 |                 id="_Path_6"
199 |                 data-name="&lt;Path&gt;"
200 |                 cx="8"
201 |                 cy="6.02"
202 |                 r="1.5"
203 |                 style="
204 |                   fill: none;
205 |                   stroke: #303c42;
206 |                   stroke-linecap: round;
207 |                   stroke-linejoin: round;
208 |                 "
209 |               />
210 |               <path
211 |                 id="_Path_7"
212 |                 data-name="&lt;Path&gt;"
213 |                 d="M19.5,11.6V4A1.5,1.5,0,0,0,18,2.5H2A1.5,1.5,0,0,0,.5,4V15A1.5,1.5,0,0,0,2,16.5H13.5"
214 |                 style="
215 |                   fill: none;
216 |                   stroke: #303c42;
217 |                   stroke-linecap: round;
218 |                   stroke-linejoin: round;
219 |                 "
220 |               />
221 |             </g>
222 |           </g>
223 |         </g>
224 |       </svg>
225 | 
226 |       <p class="mainMessage">
227 |         {{ uploadMsg ? uploadMsg : "Click to upload or drop your images here" }}
228 |       </p>
229 |     </div>
230 |     <div class="imgsPreview" v-show="Imgs.length > 0">
231 |       <button type="button" class="clearButton" @click="reset">
232 |         {{ clearAll ? clearAll : "clear All" }}
233 |       </button>
234 |       <div class="imageHolder" v-for="(img, i) in Imgs" :key="i">
235 |         <img :src="img" />
236 |         <span class="delete" style="color: white" @click="deleteImg(--i)">
237 |           <svg
238 |             class="icon"
239 |             xmlns="http://www.w3.org/2000/svg"
240 |             fill="none"
241 |             viewBox="0 0 24 24"
242 |             stroke="currentColor"
243 |           >
244 |             <path
245 |               stroke-linecap="round"
246 |               stroke-linejoin="round"
247 |               stroke-width="2"
248 |               d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
249 |             />
250 |           </svg>
251 |         </span>
252 |         <div class="plus" @click="append" v-if="++i == Imgs.length">+</div>
253 |       </div>
254 |     </div>
255 |   </div>
256 | </template>
257 | 
258 | <style scoped>
259 | .container {
260 |   width: 100%;
261 |   height: 100%;
262 |   background: #f7fafc;
263 |   border: 0.5px solid #a3a8b1;
264 |   border-radius: 10px;
265 |   padding: 30px;
266 |   position: relative;
267 | }
268 | .drop {
269 |   width: 100%;
270 |   height: 100%;
271 |   top: 0;
272 |   border-radius: 10px;
273 |   position: absolute;
274 |   background-color: #f4f6ff;
275 |   left: 0;
276 |   border: 3px dashed #a3a8b1;
277 | }
278 | .error {
279 |   text-align: center;
280 |   color: red;
281 |   font-size: 15px;
282 | }
283 | .beforeUpload {
284 |   position: relative;
285 |   text-align: center;
286 | }
287 | .beforeUpload input {
288 |   width: 100%;
289 |   margin: auto;
290 |   height: 100%;
291 |   opacity: 0;
292 |   position: absolute;
293 |   background: red;
294 |   display: block;
295 | }
296 | .beforeUpload input:hover {
297 |   cursor: pointer;
298 | }
299 | .beforeUpload .icon {
300 |   width: 150px;
301 |   margin: auto;
302 |   display: block;
303 | }
304 | .imgsPreview .imageHolder {
305 |   width: 150px;
306 |   height: 150px;
307 |   background: #fff;
308 |   position: relative;
309 |   border-radius: 10px;
310 |   margin: 5px 5px;
311 |   display: inline-block;
312 | }
313 | .imgsPreview .imageHolder img {
314 |   object-fit: cover;
315 |   width: 100%;
316 |   height: 100%;
317 | }
318 | .imgsPreview .imageHolder .delete {
319 |   position: absolute;
320 |   top: 4px;
321 |   right: 4px;
322 |   width: 29px;
323 |   height: 29px;
324 |   color: #fff;
325 |   background: red;
326 |   border-radius: 50%;
327 | }
328 | .imgsPreview .imageHolder .delete:hover {
329 |   cursor: pointer;
330 | }
331 | .imgsPreview .imageHolder .delete .icon {
332 |   width: 66%;
333 |   height: 66%;
334 |   display: block;
335 |   margin: 4px auto;
336 | }
337 | .imgsPreview .imageHolder .plus {
338 |   color: #2d3748;
339 |   background: #f7fafc;
340 |   border-radius: 50%;
341 |   font-size: 21pt;
342 |   height: 30px;
343 |   width: 30px;
344 |   text-align: center;
345 |   border: 1px dashed;
346 |   line-height: 23px;
347 |   position: absolute;
348 |   right: -42px;
349 |   bottom: 43%;
350 | }
351 | .plus:hover {
352 |   cursor: pointer;
353 | }
354 | .clearButton {
355 |   color: #2d3748;
356 |   position: absolute;
357 |   top: 7px;
358 |   right: 7px;
359 |   background: none;
360 |   border: none;
361 |   cursor: pointer;
362 | }
363 | </style>


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