├── index.js
├── static
    └── vue-media-upload.jpg
├── src
    ├── loader
    │   ├── loaders
    │   │   ├── index.js
    │   │   └── line-scale.vue
    │   └── index.vue
    └── Uploader.vue
├── package.json
├── LICENSE
├── example
    └── vue
    │   ├── Create.vue
    │   └── Update.vue
└── README.md


/index.js:
--------------------------------------------------------------------------------
1 | 
2 | import Uploader from './src/Uploader.vue'
3 |     
4 | export default Uploader
5 | 


--------------------------------------------------------------------------------
/static/vue-media-upload.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saimow/vue-media-upload/HEAD/static/vue-media-upload.jpg


--------------------------------------------------------------------------------
/src/loader/loaders/index.js:
--------------------------------------------------------------------------------
1 | import LineScale from './line-scale.vue'
2 | 
3 | export default {
4 |   LineScale,
5 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-media-upload",
 3 |   "version": "2.2.4",
 4 |   "description": "upload multiple images with preview",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/saimow/vue-media-upload.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "javascript",
16 |     "webdev",
17 |     "media-upload",
18 |     "image-upload",
19 |     "image-preview",
20 |     "vue-media-upload",
21 |     "dropzone",
22 |     "forms",
23 |     "laravel"
24 |   ],
25 |   "author": "Saimo",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/saimow/vue-media-upload/issues"
29 |   },
30 |   "homepage": "https://github.com/saimow/vue-media-upload#readme"
31 | }
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Mohamed Hafidi
 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 | 


--------------------------------------------------------------------------------
/src/loader/loaders/line-scale.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" :width="size" :height="size" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 3 |     <rect x="0" y="13" width="4" height="5" :fill="color">
 4 |       <animate attributeName="height" attributeType="XML"
 5 |         values="5;21;5" 
 6 |         begin="0s" :dur="duration" repeatCount="indefinite" />
 7 |       <animate attributeName="y" attributeType="XML"
 8 |         values="13; 5; 13"
 9 |         begin="0s" :dur="duration" repeatCount="indefinite" />
10 |     </rect>
11 |     <rect x="10" y="13" width="4" height="5" :fill="color">
12 |       <animate attributeName="height" attributeType="XML"
13 |         values="5;21;5" 
14 |         begin="0.15s" :dur="duration" repeatCount="indefinite" />
15 |       <animate attributeName="y" attributeType="XML"
16 |         values="13; 5; 13"
17 |         begin="0.15s" :dur="duration" repeatCount="indefinite" />
18 |     </rect>
19 |     <rect x="20" y="13" width="4" height="5" :fill="color">
20 |       <animate attributeName="height" attributeType="XML"
21 |         values="5;21;5" 
22 |         begin="0.3s" :dur="duration" repeatCount="indefinite" />
23 |       <animate attributeName="y" attributeType="XML"
24 |         values="13; 5; 13"
25 |         begin="0.3s" :dur="duration" repeatCount="indefinite" />
26 |     </rect>
27 |   </svg>
28 | </template>
29 | 
30 | <script>
31 | export default {
32 |   name: 'line-scale',
33 |   props: {
34 |     color: {
35 |       type: String,
36 |       default: '#CCC'
37 |     },
38 |     size: {
39 |       type: String,
40 |       default: '40px'
41 |     },
42 |     duration: {
43 |       type: String,
44 |       default: '0.6s'
45 |     }
46 |   }
47 | }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/example/vue/Create.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="">
 3 |         <form @submit.prevent="onSubmit" class="">
 4 |             <div class="mb-3">
 5 |                 <label for="title" class="form-label">Title</label>
 6 |                 <input v-model="post.title" type="text" :class="errors.title?'is-invalid':''" class="form-control" id="title" name="title">
 7 |                 <p v-if="errors.title" class="text-danger">{{ errors.title[0] }}</p>
 8 |             </div>
 9 |             <div class="mb-3">
10 |                 <label class="form-label">Content</label>
11 |                 <textarea v-model="post.content" name="content" cols="30" rows="10" :class="this.errors.content?'is-invalid':''" class="form-control" id='content'></textarea>
12 |                 <p v-if="errors.content" class="text-danger">{{ errors.content[0] }}</p>
13 |             </div>
14 | 
15 |             <!-- vue-media-upload component -->
16 |             <div class="mb-4">
17 |                 <label class="form-label">Media</label>
18 |                 <div>
19 |                     <Uploader 
20 |                         server="/api/posts/media/upload"
21 |                         :is-invalid="errors.media ? true : false"
22 |                         @change="changeMedia"
23 |                     />
24 |                 </div>
25 |                 <p v-if="errors.media" class="text-danger">{{ errors.media[0] }}</p>
26 |             </div>
27 | 
28 |             <!-- Submit button -->
29 |             <button class="btn btn-primary" :disabled="isLoading">
30 |                 <div v-if="!isLoading">
31 |                     Submit
32 |                 </div>
33 |                 <div v-if="isLoading">
34 |                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
35 |                     Loading...
36 |                 </div>
37 |             </button>
38 |         </form>
39 |     </div>
40 | </template>
41 | 
42 | <script>
43 | 
44 | import axios from 'axios';
45 | import Uploader from 'vue-media-upload'
46 | 
47 |     export default {
48 |         props:{
49 |             
50 |         },
51 |         mounted(){
52 | 
53 |         },
54 |         data(){
55 |             return{
56 |                 post:{
57 |                     title: '',
58 |                     content: '',
59 |                     media: [],
60 |                 },
61 |                 errors:[],
62 |                 isLoading: false,
63 |             }
64 |         },
65 |         methods:{
66 |             onSubmit(){
67 |                 this.isLoading = true
68 |                 axios.post('/api/posts/create', this.post)
69 |                     .then(response => {
70 |                         //
71 |                     })
72 |                     .catch(error => {
73 |                         if(error.response.data){
74 |                             this.errors = error.response.data.errors
75 |                         }
76 |                         this.isLoading = false
77 |                     })
78 |             },
79 |             changeMedia(media){
80 |                 this.post.media = media
81 |             },
82 |         },
83 |         components:{
84 |             Uploader
85 |         }
86 |     }
87 | </script>
88 | 
89 | <style scoped>
90 | 
91 | </style>


--------------------------------------------------------------------------------
/src/loader/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="fade">
  3 |     <div
  4 |       v-show="isActive || isActiveDelay"
  5 |       :class="{ 'velmld-full-screen': isFullScreen }"
  6 |       :style="{ backgroundColor }"
  7 |       ref="velmld"
  8 |       class="velmld-overlay"
  9 |     >
 10 |       <div class="velmld-spinner">
 11 |         <slot name="default">
 12 |           <component
 13 |             :is="spinner"
 14 |             :color="color"
 15 |             :size="`${size}px`"
 16 |             :duration="`${duration}s`"
 17 |           />
 18 |         </slot>
 19 |         <div
 20 |           v-if="text.length"
 21 |           :style="{ color, ...textStyle }"
 22 |         >
 23 |           {{ text }}
 24 |         </div>
 25 |       </div>
 26 |     </div>
 27 |   </transition>
 28 | </template>
 29 | 
 30 | <script>
 31 | import Loaders from './loaders'
 32 | 
 33 | export default {
 34 |   name: 'vue-element-loading',
 35 |   props: {
 36 |     active: Boolean,
 37 |     spinner: {
 38 |       type: String,
 39 |       default: 'spinner'
 40 |     },
 41 |     text: {
 42 |       type: String,
 43 |       default: ''
 44 |     },
 45 |     textStyle: {
 46 |       type: Object,
 47 |       default: function () {
 48 |         return {}
 49 |       }
 50 |     },
 51 |     color: {
 52 |       type: String,
 53 |       default: '#000'
 54 |     },
 55 |     isFullScreen: {
 56 |       type: Boolean,
 57 |       default: false
 58 |     },
 59 |     backgroundColor: {
 60 |       type: String,
 61 |       default: 'rgba(255, 255, 255, .9)'
 62 |     },
 63 |     size: {
 64 |       type: String,
 65 |       default: '40'
 66 |     },
 67 |     duration: {
 68 |       type: String,
 69 |       default: '0.6'
 70 |     },
 71 |     delay: {
 72 |       type: [String, Number],
 73 |       default: 0
 74 |     }
 75 |   },
 76 |   data () {
 77 |     return {
 78 |       isActive: this.active || false,
 79 |       isActiveDelay: false
 80 |     }
 81 |   },
 82 |   /**
 83 |    * Append class 'velmld-parent' to parent container.
 84 |    */
 85 |   mounted () {
 86 |     this.$refs.velmld.parentNode.classList.add('velmld-parent')
 87 | 
 88 |     if (this.delay) {
 89 |       const delayMs = (+this.delay) * 1000
 90 |       this.delayActive(delayMs)
 91 |     }
 92 |   },
 93 |   methods: {
 94 |     delayActive (ms) {
 95 |       this.isActiveDelay = true
 96 | 
 97 |       setTimeout(() => {
 98 |         this.isActiveDelay = false  
 99 |       }, ms)
100 |     }
101 |   },
102 |   watch: {
103 |     /**
104 |      * Binding outside component value and inside component value.
105 |      * Append class 'velmld-parent' to parent container.
106 |      */
107 |     active (value) {
108 |       this.isActive = value
109 |       if (value) {
110 |         this.$refs.velmld.parentNode.classList.add('velmld-parent')
111 |       }
112 |     }
113 |   },
114 |   components: Loaders
115 | }
116 | </script>
117 | 
118 | <style scoped>
119 | .fade-enter-active, .fade-leave-active {
120 |   transition: opacity .3s;
121 | }
122 | .fade-enter, .fade-leave-to {
123 |   opacity: 0;
124 | }
125 | .velmld-overlay {
126 |   position: absolute;
127 |   z-index: 3000;
128 |   margin: 0;
129 |   top: 0;
130 |   right: 0;
131 |   bottom: 0;
132 |   left: 0;
133 |   transition: opacity .3s;
134 | }
135 | .velmld-spinner {
136 |   top: 50%;
137 |   left: 50%;
138 |   transform: translate(-50%, -50%);
139 |   position: absolute;
140 |   text-align: center
141 | }
142 | .velmld-full-screen {
143 |   position: fixed;
144 | }
145 | </style>
146 | 
147 | <style>
148 | .velmld-parent {
149 |   position: relative !important;
150 | }
151 | </style>
152 | 


--------------------------------------------------------------------------------
/example/vue/Update.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="">
  3 |         <form @submit.prevent="onSubmit" class="">
  4 |             <div class="mb-3">
  5 |                 <label for="title" class="form-label">Title</label>
  6 |                 <input v-model="post.title" type="text" :class="errors.title?'is-invalid':''" class="form-control" id="title" name="title">
  7 |                 <p v-if="errors.title" class="text-danger">{{ errors.title[0] }}</p>
  8 |             </div>
  9 |             <div class="mb-3">
 10 |                 <label class="form-label">Content</label>
 11 |                 <textarea v-model="post.content" name="content" cols="30" rows="10" :class="errors.content?'is-invalid':''" class="form-control" id='content'></textarea>
 12 |                 <p v-if="errors.content" class="text-danger">{{ errors.content[0] }}</p>
 13 |             </div>
 14 | 
 15 |             <!-- vue-media-upload component -->
 16 |             <div class="mb-4">
 17 |                 <label class="form-label">Media</label>
 18 |                 <div>
 19 |                     <Uploader
 20 |                         v-if="hasResponse"
 21 |                         server='/api/posts/media/upload'
 22 |                         :is-invalid="errors['media.list'] ? true : false"
 23 |                         :media="post.media.saved"
 24 |                         location="/storage/posts/media"
 25 |                         @init="initMedia"
 26 |                         @change="changeMedia"
 27 |                         @add="addMedia"
 28 |                         @remove="removeMedia"
 29 |                     />
 30 |                 </div>
 31 |                 <p v-if="errors['media.list']" class="text-danger">{{ errors['media.list'][0] }}</p>
 32 |             </div>
 33 | 
 34 |             <!-- Submit button -->
 35 |             <button class="btn btn-primary" :disabled="isLoading">
 36 |                 <div v-if="!isLoading">
 37 |                     Submit
 38 |                 </div>
 39 |                 <div v-if="isLoading">
 40 |                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
 41 |                     Loading...
 42 |                 </div>
 43 |             </button>
 44 |         </form>
 45 |     </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | 
 50 | import axios from 'axios';
 51 | import Uploader from 'vue-media-upload'
 52 | 
 53 |     export default {
 54 |         props:{
 55 | 
 56 |         },
 57 |         mounted(){
 58 |             this.getData()
 59 |         },
 60 |         data(){
 61 |             return{
 62 |                 post: {
 63 |                     id: 1,
 64 |                     title: '',
 65 |                     content: '',
 66 |                     media: {
 67 |                         list: [], //all media (savedMedia + addedAdded)
 68 |                         saved: [
 69 |                             { id: 1, name: '123_image.jpg' },
 70 |                             { id: 2, name: '456_image.jpg' },
 71 |                         ],
 72 |                         added: [],
 73 |                         removed: []
 74 |                     },
 75 |                 },
 76 |                 errors: [],
 77 |                 hasResponse: false,
 78 |                 isLoading: false,
 79 |             }
 80 |         },
 81 |         methods:{
 82 |             getData(){
 83 |                 axios.get('/api/posts/data/'+ this.post.id)
 84 |                     .then(response => {
 85 |                         this.post = response.data.post
 86 |                         this.post.media = {list: [], saved: [], added:[], removed:[]}
 87 |                         this.post.media.saved = response.data.media
 88 |                         this.hasResponse = true
 89 |                     })
 90 |             },
 91 |             onSubmit(){
 92 |                 this.isLoading = true
 93 |                 axios.put('/api/posts/update/'+this.id, this.post)
 94 |                     .then(response => {
 95 |                         window.location.replace(this.indexRoute); 
 96 |                     })
 97 |                     .catch(error => {
 98 |                         if(error.response.data){
 99 |                             this.errors = error.response.data.errors
100 |                             console.log(this.errors) 
101 |                         }
102 |                         this.isLoading = false
103 |                     })
104 |             },
105 |             initMedia(media){
106 |                 this.post.media.list = media
107 |             },
108 |             changeMedia(media){
109 |                 this.post.media.list = media
110 |             },
111 |             addMedia(addedImage, addedMedia){
112 |                 this.post.media.added = addedMedia
113 |             },
114 |             removeMedia(removedImage, removedMedia){
115 |                 this.post.media.removed = removedMedia
116 |             },
117 |         },
118 |         components:{
119 |             Uploader
120 |         },
121 |         
122 |     }
123 | </script>
124 | 
125 | <style scoped>
126 | 
127 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | 
  3 |   <a href="https://www.npmjs.com/package/vue-media-upload" target="_blank">
  4 |     <img alt="npm" src="https://img.shields.io/npm/v/vue-media-upload.svg?style=flat">
  5 |   </a>
  6 |   <a href="https://www.npmjs.com/package/vue-media-upload" target="_blank">
  7 |     <img alt="npm" src="https://img.shields.io/npm/dm/vue-media-upload.svg?style=flat">
  8 |   </a>
  9 |   <a href="https://www.npmjs.com/package/vue-media-upload" target="_blank">
 10 |     <img alt="npm" src="https://img.shields.io/npm/l/vue-media-upload.svg?style=flat">
 11 |   </a>
 12 |   <a href="https://www.npmjs.com/package/vue-media-upload" target="_blank">
 13 |     <img alt="npm" src="https://img.shields.io/bundlephobia/minzip/vue-media-upload">
 14 |   </a>
 15 | 
 16 |   # vue-media-upload
 17 | 
 18 | </div>
 19 | <div align="">
 20 | 
 21 |   📷 **vue-media-upload** is a Vuejs package that handle multiple images upload and preview.
 22 | 
 23 |   🖼️ **This package** support **the create and the update form**, and handles the upload for you.
 24 | 
 25 |   ![vue-media-upload - multiple image upload with preview ](/static/vue-media-upload.jpg)
 26 |   
 27 | </div>
 28 | 
 29 | 
 30 | # 👀 Demo
 31 | 
 32 | - [Full featured demo](https://github.com/saimow/media-upload-demo)
 33 | 
 34 | 
 35 | # 💻 Install
 36 | 
 37 | via npm
 38 | ```sh
 39 | npm install vue-media-upload
 40 | ```
 41 | 
 42 | or via yarn 
 43 | ```sh
 44 | yarn add vue-media-upload
 45 | ```
 46 | 
 47 | 
 48 | # 🕹 Usage
 49 | 
 50 | ```javascript
 51 | import { createApp } from 'vue';
 52 | 
 53 | import Uploader from 'vue-media-upload';
 54 | 
 55 | let app = createApp({})
 56 | 
 57 | app.component('Uploader', Uploader);
 58 | 
 59 | app.mount("#app")
 60 | ```
 61 | 
 62 | or
 63 | 
 64 | ```javascript
 65 | import Uploader from "vue-media-upload";
 66 | 
 67 | export default {
 68 |   components: {
 69 |     Uploader
 70 |   }
 71 | };
 72 | ```
 73 | 
 74 | # 🔎 Example
 75 | 
 76 | ## Create Form
 77 | 
 78 | ```vue
 79 | <template>
 80 |   <div>
 81 |     <Uploader
 82 |       server="/api/upload"
 83 |       @change="changeMedia"
 84 |     />
 85 |   </div>
 86 | </template>
 87 | 
 88 | <script>
 89 |   import Uploader from 'vue-media-upload'
 90 | 
 91 |   export default {
 92 |     data() {
 93 |       return {
 94 |         media: []
 95 |       }
 96 |     },
 97 |     methods:{
 98 |       changeMedia(media){
 99 |         this.media = media
100 |       }
101 |     },
102 |     components: {
103 |       Uploader
104 |     },
105 |   }
106 | </script>
107 | ```
108 | 
109 | ## Update Form
110 | 
111 | ```vue
112 | <template>
113 |   <div>
114 |     <Uploader
115 |       server="/api/upload"
116 |       :media="media.saved"
117 |       path="/storage/media"
118 |       @add="addMedia"
119 |       @remove="removeMedia"
120 |     />
121 |   </div>
122 | </template>
123 | 
124 | <script>
125 |   import Uploader from 'vue-media-upload'
126 | 
127 |   export default {
128 |     data() {
129 |       return {
130 |         media: {
131 |           saved: [
132 |             { name: '123_image.jpg' },
133 |             { name: '456_image.jpg' },
134 |           ],
135 |           added: [],
136 |           removed: []
137 |         }
138 |       }
139 |     },
140 |     methods:{
141 |       addMedia(addedImage, addedMedia){
142 |         this.media.added = addedMedia
143 |       },
144 |       removeMedia(removedImage, removedMedia){
145 |         this.media.removed = removedMedia
146 |       }
147 |     },
148 |     components: {
149 |       Uploader
150 |     },
151 |   }
152 | </script>
153 | ```
154 | 
155 | 
156 | # ⚙️ Props
157 | 
158 | | Prop | Type | Default | Description |
159 | | --- | --- | :---: | --- |
160 | | **server** | String | `'/api/upload'` | The Route that handle the image upload. The Upload handler should return the name of the uploaded image in the following format: <br> `{ "name": "123_image.jpg" }` |
161 | | **isInvalid** | Boolean | `false` | Whether error styling should be applied. |
162 | | **media** | Array | `[]` | The list of the stored images, that each of which must have the property `name` containing the name of the image. <br> `[ { name: '123_image.jpg' } , { name: '456_image.jpg' } ]` |
163 | | **location** | String | `''` | The location of the folder where the saved images are stored.|
164 | | **max** | Number | `null` | The maximum number of files allowed to be uploaded.|
165 | | **maxFilesize** | Number | `4` | The maximum filesize (in megabytes) that is allowed to be uploaded|
166 | | **warnings** | Boolean | `true` | By default, the package uses JavaScript alerts to display warnings. In case you want to use your custom warnings, you can disable the component pop-ups using this prop. |
167 | | **headers** | Object | `null` | An optional prop to send additional headers to the server. Eg: `{ "Authorization": "Bearer ACCESS_TOKEN" }` |
168 | 
169 | 
170 | # 💾 Events
171 | 
172 | | Event | Payload | Description |
173 | | --- | --- | --- |
174 | | **@init** | `param` : The list of all the listed images. | Emitted when the component is ready to use. |
175 | | **@change** | `param` : The list of all the listed images. | Emitted after an image was added or removed. |
176 | | **@add** | `param1` : The image that was added. <br> `param2` : The list of the added Images. | Emitted after an image was added. |
177 | | **@remove** | `param1` : The image that was removed. <br> `param2` : The list of images that have been removed from the stored media. | Emitted after an image was removed. |
178 | | **@max** | | Emitted when `max` prop is exceeded. |
179 | | **@max-filesize** | `param` : The image size. | Emitted when `maxFilesize` prop is exceeded. |
180 | 
181 | 
182 | # 📙 How it works in a Server-Rendered Form?
183 | 
184 | 1. **vue-media-upload** component uploads the image `image.jpg` as multipart/form-data using a POST request.
185 | 
186 | 2. **server** temporary saves the image with a unique name `123_image.jpg` in a `/tmp/uploads` folder.
187 | 
188 | 3. **server** returns the unique name `123_image.jpg` in a request response.
189 | 
190 | 4. **vue-media-upload** insert the unique name `123_image.jpg` in a hidden html input with `name="added_media[]"`.
191 | 
192 | 5. **user** submits the component parent form, which includes the hidden input field containing the unique image name.
193 | 
194 | 6. **server** uses the unique image name to move `123_image.jpg` from the `/tmp/uploads` folder to its final location.
195 | 
196 | 
197 | # 🔣 Inputs
198 | 
199 | > **Note** that all this inputs are **hidden** and they are just a way to validate and pass data to the backend when using this package in a **Server-Rendered Form**!
200 | 
201 | | Name attribute | Description |
202 | | --- | --- |
203 | | **added_media[]**  | The added images in the component |
204 | | **removed_media[]**  | The images that have been removed from the stored media. |
205 | | **media**  | This input is added, when the component has at least one image or more listed, as a way for the backend to validate the Images as being required. |
206 | 
207 | 
208 | # 🤝 Contributing
209 | 
210 | 1. Fork this repository.
211 | 2. Create new branch with feature name.
212 | 3. Create your feature.
213 | 4. Commit and set commit message with feature name.
214 | 5. Push your code to your fork repository.
215 | 6. Create pull request. 🙂
216 | 
217 | 
218 | # ⭐️ Support
219 | 
220 | If you like this project, You can support me with starring ⭐ this repository.
221 | 
222 | ![vue-media-upload - multiple image upload with preview ](/static/vue-media-upload.jpg)
223 | 
224 | 
225 | # 📄 License
226 | 
227 | [MIT](LICENSE)
228 | 
229 | Developed with ❤️


--------------------------------------------------------------------------------
/src/Uploader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="mu-container" :class="isInvalid?'mu-red-border':''">
  4 |             <Loader
  5 |                 color="#0275d8" 
  6 |                 :active="isLoading" 
  7 |                 spinner="line-scale" 
  8 |                 background-color = 'rgba(255, 255, 255, .4)'
  9 |             />
 10 |             <div class="mu-elements-wraper">
 11 |                 
 12 |                 <!--UPLOAD BUTTON-->
 13 |                 <div class="mu-plusbox-container">
 14 |                     <label class="mu-plusbox">
 15 |                         <svg
 16 |                             class="mu-plus-icon"
 17 |                             xmlns="http://www.w3.org/2000/svg" 
 18 |                             width="1em" 
 19 |                             height="1em" 
 20 |                             preserveAspectRatio="xMidYMid meet" 
 21 |                             viewBox="0 0 24 24">
 22 |                                 <g fill="none">
 23 |                                     <path 
 24 |                                         d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1zm1 15a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 1 1 2 0v3h3a1 1 0 1 1 0 2h-3v3z" 
 25 |                                         fill="currentColor"/>
 26 |                                 </g>
 27 |                         </svg>
 28 |                         <input @change="fileChange" type="file" accept="image/*" multiple hidden>
 29 |                     </label>     
 30 |                 </div>
 31 | 
 32 |                 <!--IMAGES PREVIEW-->
 33 |                 
 34 |                 <div v-for="(image, index) in savedMedia" :key="index" class="mu-image-container">
 35 |                     <img :src="location +'/'+ image.name" alt=""  class="mu-images-preview">
 36 |                     <button @click="removeSavedMedia(index)" class="mu-close-btn" type="button">
 37 |                         <svg 
 38 |                             class='mu-times-icon' 
 39 |                             xmlns="http://www.w3.org/2000/svg" 
 40 |                             width="0.65em" 
 41 |                             height="0.65em" 
 42 |                             preserveAspectRatio="xMidYMid meet" 
 43 |                             viewBox="0 0 352 512">
 44 |                                 <path 
 45 |                                     d="m242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28L75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256L9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
 46 |                                     fill="currentColor"    
 47 |                                 />
 48 |                         </svg>
 49 |                     </button>
 50 |                 </div>
 51 |                 <div v-for="(image, index) in addedMedia" :key="index" class="mu-image-container">
 52 |                     <img :src="image.url" alt=""  class="mu-images-preview">
 53 |                     <button @click="removeAddedMedia(index)" class="mu-close-btn" type="button">
 54 |                         <svg 
 55 |                             class='mu-times-icon' 
 56 |                             xmlns="http://www.w3.org/2000/svg" 
 57 |                             width="0.65em" 
 58 |                             height="0.65em" 
 59 |                             preserveAspectRatio="xMidYMid meet" 
 60 |                             viewBox="0 0 352 512">
 61 |                                 <path 
 62 |                                     d="m242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28L75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256L9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
 63 |                                     fill="currentColor"    
 64 |                                 />
 65 |                         </svg>
 66 |                     </button>
 67 |                 </div>
 68 |             </div>
 69 |         </div>
 70 |         <div>
 71 |             <div v-for="(image, index) in addedMedia" :key="index" class="mu-mt-1">
 72 |                 <input type="text" name="added_media[]" :value="image.name" hidden>
 73 |             </div>
 74 |             <div v-for="(image, index) in removedMedia" :key="index" class="mu-mt-1">
 75 |                 <input type="text" name="removed_media[]" :value="image.name" hidden>
 76 |             </div>
 77 |             <div v-if="allMedia.length" class="mu-mt-1">
 78 |                 <input type="text" name="media" value="1" hidden>
 79 |             </div>
 80 |         </div>
 81 |     </div>
 82 | </template>
 83 | 
 84 | <script>
 85 | import Loader from './loader/index.vue';
 86 | import axios from 'axios'
 87 | 
 88 | export default {
 89 |     props: {
 90 |         server: {
 91 |             type: String,
 92 |             default: '/api/upload'
 93 |         },
 94 |         isInvalid: {
 95 |             type: Boolean,
 96 |             default: false
 97 |         },
 98 |         media: {
 99 |             type: Array,
100 |             default: []
101 |         },
102 |         location: {
103 |             type: String,
104 |             default: ''
105 |         },
106 |         max: {
107 |             type: Number,
108 |             default: null
109 |         },
110 |         maxFilesize: {
111 |             type: Number,
112 |             default: 4
113 |         },
114 |         warnings: {
115 |             type: Boolean,
116 |             default: true
117 |         },
118 |         headers: {
119 |             type: Object,
120 |             default: null,
121 |         }
122 |     },
123 |     mounted() {
124 |         this.init()
125 |     },
126 |     data() {
127 |         return {
128 |             addedMedia: [],
129 |             savedMedia: [],
130 |             removedMedia: [],
131 | 
132 |             config: {
133 |                 headers: null,
134 |             },
135 | 
136 |             isLoading: true
137 |         }
138 |     },
139 |     methods: {
140 |         init() {
141 |             this.savedMedia = this.media
142 |             this.config.headers = this.headers
143 | 
144 |             this.savedMedia.forEach((image, index) => {
145 |                 if (!this.savedMedia[index].url) {
146 |                     this.savedMedia[index].url = this.location + "/" + image.name
147 |                 }
148 |             });
149 | 
150 |             setTimeout(() => this.isLoading = false, 1000)
151 | 
152 |             this.$emit('init', this.allMedia)
153 |         },
154 |         async fileChange(event) {
155 |             this.isLoading = true
156 |             let files = event.target.files
157 | 
158 |             for (var i = 0; i < files.length; i++) {
159 |                 if (!this.max || this.allMedia.length < this.max) {
160 |                     if (files[i].size <= this.maxFilesize * 1000000) {
161 |                         let formData = new FormData
162 |                         let url = URL.createObjectURL(files[i])
163 |                         formData.set('image', files[i])
164 | 
165 |                         const { data } = await axios.post(this.server, formData, this.config)
166 |                         let addedImage = { url: url, name: data.name, size: files[i].size, type: files[i].type }
167 |                         this.addedMedia.push(addedImage)
168 | 
169 |                         this.$emit('change', this.allMedia)
170 |                         this.$emit('add', addedImage, this.addedMedia)
171 |                     } else {
172 |                         this.$emit('maxFilesize', files[i].size)
173 |                         if (this.warnings) {
174 |                             alert('The file you are trying to upload is too big. \nMaximum Filesize: ' + this.maxFilesize + 'MB')
175 |                         }
176 |                         break;
177 |                     }
178 |                 } else {
179 |                     this.$emit('max')
180 |                     if (this.warnings) {
181 |                         alert('You have reached the maximum number of files that you can upload. \nMaximum Files: ' + this.max)
182 |                     }
183 |                     break;
184 |                 }
185 |             }
186 |             event.target.value = null
187 |             this.isLoading = false
188 |         },
189 |         removeAddedMedia(index) {
190 |             let removedImage = this.addedMedia[index]
191 |             this.addedMedia.splice(index, 1)
192 | 
193 |             this.$emit('change', this.allMedia)
194 |             this.$emit('remove', removedImage, this.removedMedia)
195 |         },
196 |         removeSavedMedia(index) {
197 |             let removedImage = this.savedMedia[index]
198 |             this.removedMedia.push(removedImage)
199 |             this.savedMedia.splice(index, 1)
200 | 
201 |             this.$emit('change', this.allMedia)
202 |             this.$emit('remove', removedImage, this.removedMedia)
203 |         }
204 | 
205 |     },
206 |     computed: {
207 |         allMedia() {
208 |             return [...this.savedMedia, ...this.addedMedia];
209 |         }
210 |     },
211 |     emits: [
212 |         'init',
213 |         'change',
214 |         'add',
215 |         'remove',
216 |         'max',
217 |         'maxFilesize'
218 |     ],
219 |     components: {
220 |         Loader
221 |     }
222 | }
223 | 
224 | </script>
225 | 
226 | <style scoped>
227 | 
228 | .mu-container{
229 |     background-color: #fbfbfb !important;
230 |     border-radius: 5px !important;
231 |     border-style: solid !important;
232 |     border: 1px solid #9b9b9b !important;
233 |     box-sizing: border-box !important;
234 |     width: 100% !important;
235 |     height: auto !important;
236 | }
237 | 
238 | /* ----elements-wrapper--- */
239 | 
240 | .mu-elements-wraper {
241 |   padding: 1rem !important;
242 |   display: flex !important;
243 |   flex-wrap: wrap !important;
244 | }
245 | 
246 | /* ----plusbox--- */
247 | 
248 | .mu-plusbox-container{
249 |     display: inline-flex !important;
250 |     height: 90px !important;
251 |     width: 140px !important;
252 |     margin: 0.25rem !important;
253 | }
254 | .mu-plusbox {
255 |     background-color: #ffffff !important;
256 |     border: 1px dashed #818181 !important;
257 |     border-radius: 5px !important;
258 |     cursor: pointer !important;
259 |     display: flex !important;
260 |     flex-wrap: wrap !important;
261 |     align-items: center !important;
262 |     width: 140px !important;
263 |     height: 90px !important;
264 | }
265 | .mu-plusbox:hover{
266 |     background-color: #f1f1f1 !important;
267 | }
268 | .mu-plusbox:hover > .mu-plus-icon{
269 |     color: #028296 !important;
270 | }
271 | .mu-plus-icon{
272 |     color: #00afca !important;
273 |     font-size: 3rem !important;
274 |     flex: 1;
275 | }
276 | 
277 | /* ----media-preview---- */
278 | 
279 | .mu-image-container{
280 |     width: 140px !important;
281 |     height: 90px !important;
282 |     margin: 0.25rem !important;
283 |     
284 |     position: relative;
285 | }
286 | .mu-images-preview {
287 |     border-radius: 5px !important;
288 |     border: 1px solid #818181 !important;
289 |     width: 140px !important;
290 |     height: 90px !important;
291 |     transition: filter 0.1s linear;
292 |     object-fit: cover;
293 |     object-position: center;
294 | }
295 | .mu-images-preview:hover{
296 |     filter: brightness(90%);
297 | }
298 | 
299 | .mu-close-btn{
300 |     background: none !important;
301 | 	color:white !important;
302 | 	border: none !important;
303 | 	padding: 0px !important;
304 |     margin:0px !important;
305 | 	cursor: pointer !important;
306 | 
307 |     position: absolute !important;
308 |     top: 0px;
309 |     right: 0px;
310 | }
311 | .mu-times-icon{
312 |     font-size: 3rem !important;
313 |     filter: drop-shadow(0px 0px 1px black);
314 | }
315 | .mu-close-btn:hover{
316 |     color: red !important;
317 | }
318 | 
319 | /* -------------------- */
320 | 
321 | .mu-red-border {
322 |     border: 1px solid #dc3545 !important;
323 | }
324 | 
325 | .mu-mt-1 {
326 |   margin-top: 0.25rem !important;
327 | }
328 | 
329 | /* -------------------- */
330 | 
331 | img {
332 |   -webkit-user-drag: none;
333 |   -khtml-user-drag: none;
334 |   -moz-user-drag: none;
335 |   -o-user-drag: none;
336 | }
337 | 
338 | </style>
339 | 


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