├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── dist
    └── upload_image.vue
├── example
    └── images
    │   └── example.png
└── package.json


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | # Folder config file
 6 | Desktop.ini
 7 | 
 8 | # Recycle Bin used on file shares
 9 | $RECYCLE.BIN/
10 | 
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 | 
17 | # Windows shortcuts
18 | *.lnk
19 | 
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 | 
24 | # OSX
25 | # =========================
26 | 
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 | 
31 | # Thumbnails
32 | ._*
33 | 
34 | # Files that might appear in the root of a volume
35 | .DocumentRevisions-V100
36 | .fseventsd
37 | .Spotlight-V100
38 | .TemporaryItems
39 | .Trashes
40 | .VolumeIcon.icns
41 | 
42 | # Directories potentially created on remote AFP share
43 | .AppleDB
44 | .AppleDesktop
45 | Network Trash Folder
46 | Temporary Items
47 | .apdisk
48 | 
49 | #IDES
50 | .idea
51 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | #### 1.1.5
 2 |  * improved documentation
 3 |  * ability to disable automatic uploading (allowing for manual uploads)
 4 |  * added image loaded event (called after image fle has been read)
 5 |     * upload-image-loaded
 6 |  * added submit event (called after end-user has clicked on "submit" action)
 7 |     * upload-image-submit
 8 |  * added image clicked event (called when an image is clicked)
 9 |     * upload-image-clicked
10 |  * added image removed event (called when an image has been removed)
11 |     * upload-image-removed
12 | 
13 | #### 1.1.2
14 | 
15 |  * README & LICENSE adjustments.
16 | 
17 | #### 1.1.1
18 |     
19 |  * README & CHANGELOG adjustments.
20 | 
21 | #### 1.1.0 
22 | 
23 |  * resizing capabilities introduced.
24 |  * events pass both FormData & result from request to parent.
25 |  * bug fixes.
26 |  * [[PULLED REQUEST](https://github.com/viral-vector/vue-upload-image/commit/20ba66f3126db0cc0ca14d2d45f26917d3ff50ba)]
27 |  
28 | #### 1.0.0


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 viral-vector
 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 | [![Latest Stable Version](https://img.shields.io/npm/v/vue-upload-image.svg)](https://www.npmjs.com/package/vue-upload-image)
  2 | 
  3 | # vue-upload-image
  4 | Configurable image uploader with preview
  5 | 
  6 |  + drag and drop with input backup
  7 |  + image previews
  8 |  + simple resizing
  9 |  + events
 10 |  + minimal
 11 |  + configurable
 12 | 
 13 | ![example](example/images/example.png)
 14 | 
 15 | ## Installation & Usage
 16 | 
 17 | Vue.prototype.$http must be define, for automatic uploads to work. 
 18 | [info](https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.z4rqh1qtp)
 19 | 
 20 | * install the package
 21 | ```bash
 22 | npm install vue-upload-image --save
 23 | ```
 24 | * import & register the component 
 25 | ```js
 26 | import UploadImage from 'vue-upload-image';
 27 | 
 28 | // register globally
 29 | Vue.component('upload-image', UploadImage)
 30 | 
 31 | // or ... register locally 
 32 | new Vue({
 33 |     ...,
 34 |     components: {
 35 |         UploadImage 
 36 |     }
 37 | })
 38 | ```
 39 | * add component to page 
 40 | ```html
 41 | // html template
 42 | <upload-image is="upload-image"
 43 |    :url="forms.create.url"
 44 |    :max_files="5"
 45 |    name="files[]"
 46 |    :resize_enabled="true"
 47 |    :resize_max_width="640"
 48 |    :button_html="forms.create.confirm"
 49 |    :button_class="'button is-primary'"
 50 |    v-on:upload-image-attemp="uploadImageAttempt"
 51 |    v-on:upload-image-success="uploadImageSuccess"
 52 |    v-on:upload-image-failure="uploadImageFailure"
 53 |    v-on:upload-image-loaded="uploadImageLoaded"
 54 |    v-on:upload-image-submit="uploadImageSubmit"
 55 |    v-on:upload-image-clicked="uploadImageClicked"
 56 |    v-on:upload-image-removed="uploadImageRemoved"
 57 | ></upload-image>
 58 | 
 59 | // or set Vue instance template property
 60 | {   
 61 |     name: 'component or root Vue instance',
 62 |     template: '<upload-image :max_files="5" ....></upload-image>',
 63 |     props: ...,
 64 |     data: ...
 65 |     components: {
 66 |         UploadImage
 67 |     }
 68 | }
 69 | ```
 70 | 
 71 | ## Configuration
 72 | ```js
 73 | input_id: { // Id of upload control
 74 |     type: String,
 75 |     required: false,
 76 |     default: "default"
 77 | },
 78 | url: { // upload url
 79 |     type: String,
 80 |     required: true,
 81 |     default: null
 82 | },
 83 | name: { // name to use for FormData
 84 |     type: String,
 85 |     required: false,
 86 |     default: 'images[]'
 87 | },
 88 | disable_upload: { // disable auto uploading
 89 |     type: Boolean,
 90 |     required: false,
 91 |     default: false
 92 | },
 93 | max_batch: { // # of files to upload within one request
 94 |     type: Number,
 95 |     required: false,
 96 |     default: 0
 97 | },
 98 | max_files: { // total # of files allowed to be uploaded
 99 |     type: Number,
100 |     required: false,
101 |     default: 10
102 | },
103 | max_filesize: { // max files size in KB
104 |     type: Number,
105 |     required: false,
106 |     default: 8000
107 | },
108 | resize_enabled: { // resize image prior to preview/upload
109 |     type: Boolean,
110 |     required: false,
111 |     default: false
112 | },
113 | resize_max_width: { // resize max width
114 |     type: Number,
115 |     required: false,
116 |     default: 800
117 | },
118 | resize_max_height: { // resize max height
119 |     type: Number,
120 |     required: false,
121 |     default: 600
122 | },
123 | button_html: { // text/html for button
124 |     type: String,
125 |     required: false,
126 |     default: 'Upload Images'
127 | },
128 | button_class: { // classes for button
129 |     type: String,
130 |     required: false,
131 |     default: 'btn btn-primary'
132 | }
133 | ```
134 | 
135 | ## UI/UX Adjustments
136 | 
137 | * Basic look & feel can be adjusted via html/css classes
138 | ```css
139 | .vue_component__upload--image
140 |     .upload_image_form__thumbnails
141 |         .upload_image_form__thumbnail [&.bad-size, &.uploaded]
142 |             .img [&.show, &:hover]
143 |             span
144 | ```
145 | 
146 | ## Events
147 | * Event listeners can be added as such
148 | 
149 | ```html
150 | <upload-image
151 |    v-on:upload-image-attemp="uploadImageAttempt"
152 |    v-on:upload-image-success="uploadImageSuccess"
153 |    v-on:upload-image-failure="uploadImageFailure"
154 |    v-on:upload-image-loaded="uploadImageLoaded"
155 |    v-on:upload-image-submit="uploadImageSubmit"
156 |    v-on:upload-image-clicked="uploadImageClicked"
157 |    v-on:upload-image-removed="uploadImageRemoved"
158 |    // or...
159 |    @upload-image-submit="uploadImageSubmit"
160 | ></upload-image>
161 | ```
162 | 
163 | ```js
164 | {
165 |     methods: {
166 |         uploadImageSuccess: function(result){
167 |             result[0] // FormData
168 |             result[1] // response
169 |         },
170 |         uploadImageLoaded: function(image){
171 |             image.name || image.file 
172 |         },
173 |         uploadImageClicked: function(image){
174 |             image.name || image.file 
175 |         },
176 |         uploadImageRemoved: function(image){
177 |             image.name || image.file 
178 |         },
179 |         uploadImageSubmit: function(images){
180 |         }
181 |     }
182 | }
183 | ```
184 | 
185 | * **upload-image-loaded**  **-** [image] 
186 |     * event is called after an image has been fully loaded & rendered in preview area
187 |     * emits an object containing the file name & blob of the image
188 | * **upload-image-clicked** **-** [image]
189 |     * event is called when an image in preview has been clicked
190 |     * emits an object containing the file name & blob of the image
191 | * **upload-image-removed** **-** [image]
192 |     * event is called after an image has been removed from preview
193 |     * emits an object containing the file name & blob of the image
194 | * **upload-image-submit**  **-** [images] 
195 |     * event is called immediately after the end user triggers the "submit" action (button_html property)
196 |     * emits a FormData object composed of images being uploaded 
197 |     * batched submissions will emit this event per batch
198 |     * **can be utilized with disable_upload property for manual uploads** 
199 | * **upload-image-attempt** **-** [FormData]
200 |     * event is called prior to an automatic upload to the designated url
201 |     * emits a FormData object composed of images being uploaded 
202 |     * batched submissions will emit this event per batch
203 | * **upload-image-success** **-** [FormData, Response]
204 |     * event is called after s successful automatic upload to the designated url
205 |     * emits a FormData object composed of images being uploaded along with the success response object from the server
206 | * **upload-image-failure** **-** [FormData, Response] 
207 |     * event is called after s failed automatic upload to the designated url
208 |     * emits a FormData object composed of images being uploaded along with the error response object from the server
209 | 
210 | 
211 | ## License
212 | This project is licensed under the [MIT](http://vjpr.mit-license.org) License.
213 | 
214 | ## Contributing Guidelines
215 |     
216 | * All changes must be documented in [CHANGELOG.md](CHANGELOG.md) 
217 | 


--------------------------------------------------------------------------------
/dist/upload_image.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="vue_component__upload--image" v-bind:class="{ 'dragover': onDragover }">
  3 |         <form v-bind:id="'upload_image_form--' + input_id" enctype="multipart/form-data">
  4 |             <div class="upload_image_form__thumbnails">
  5 |                 <div v-for="(value, key) in files" class="upload_image_form__thumbnail"
  6 |                      v-on:click="fileClick($event, key)"
  7 |                      v-bind:class="{ 'uploaded': value.uploaded, 'bad-size': value.bad_size }">
  8 |                     <span v-on:click="fileDelete($event, key)">
  9 |                     &#x2716;
 10 |                     </span>
 11 |                     <img v-bind:src="image[key]" v-bind:class="{ 'show': image[key]}">
 12 |                 </div>
 13 |             </div>
 14 |             <input type="file" v-bind:id="'upload_image_form__input--' + input_id" hidden multiple/>
 15 |             <div>
 16 |                 <button type="submit"
 17 |                         v-bind:class="button_class"
 18 |                         v-on:click="submit"
 19 |                         v-bind:disabled="onUploading"
 20 |                         v-html="button_html"></button>
 21 |             </div>
 22 |         </form>
 23 |     </div>
 24 | </template>
 25 | 
 26 | <script>
 27 |     export default {
 28 |         name: 'upload-image',
 29 |         props: {
 30 |             input_id: {
 31 |                 type: String,
 32 |                 required: false,
 33 |                 default: "default"
 34 |             },
 35 |             url: {
 36 |                 type: String,
 37 |                 required: true,
 38 |                 default: null
 39 |             },
 40 |             name: {
 41 |                 type: String,
 42 |                 required: false,
 43 |                 default: 'images[]'
 44 |             },
 45 |             disable_upload: {
 46 |                 type: Boolean,
 47 |                 required: false,
 48 |                 default: false
 49 |             },
 50 |             max_batch: {
 51 |                 type: Number,
 52 |                 required: false,
 53 |                 default: 0
 54 |             },
 55 |             max_files: {
 56 |                 type: Number,
 57 |                 required: false,
 58 |                 default: 10
 59 |             },
 60 |             max_filesize: {
 61 |                 type: Number,
 62 |                 required: false,
 63 |                 default: 8000
 64 |             },
 65 |             resize_enabled: {
 66 |                 type: Boolean,
 67 |                 required: false,
 68 |                 default: false
 69 |             },
 70 |             resize_max_width: {
 71 |                 type: Number,
 72 |                 required: false,
 73 |                 default: 800
 74 |             },
 75 |             resize_max_height: {
 76 |                 type: Number,
 77 |                 required: false,
 78 |                 default: 600
 79 |             },
 80 |             button_html: {
 81 |                 type: String,
 82 |                 required: false,
 83 |                 default: 'Upload Images'
 84 |             },
 85 |             button_class: {
 86 |                 type: String,
 87 |                 required: false,
 88 |                 default: 'btn btn-primary'
 89 |             }
 90 |         },
 91 |         data: function () {
 92 |             return {
 93 |                 form: null,
 94 |                 input: null,
 95 |                 index: 0,
 96 |                 total: 0,
 97 |                 files: {},
 98 |                 image: {},
 99 |                 batch: {},
100 |                 onDragover: false,
101 |                 onUploading: false
102 |             }
103 |         },
104 |         mounted: function () {
105 |             this.form = document.getElementById('upload_image_form--' + this.input_id);
106 |             this.input = document.getElementById('upload_image_form__input--' + this.input_id);
107 | 
108 |             ['drag', 'dragstart', 'dragend',
109 |                 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(event => this.form.addEventListener(event, (e) => {
110 |                 e.preventDefault();
111 |                 e.stopPropagation();
112 |             }));
113 | 
114 |             ['dragover', 'dragenter']
115 |                 .forEach(event => this.form.addEventListener(event, this.dragEnter));
116 | 
117 |             ['dragleave', 'dragend', 'drop']
118 |                 .forEach(event => this.form.addEventListener(event, this.dragLeave));
119 | 
120 |             ['drop']
121 |                 .forEach(event => this.form.addEventListener(event, this.fileDrop));
122 | 
123 |             ['change']
124 |                 .forEach(event => this.input.addEventListener(event, this.fileDrop));
125 | 
126 |             this.form.addEventListener('click', (e) => {
127 |                 this.input.click();
128 |             });
129 |         },
130 |         methods: {
131 |             _can_xhr() {
132 |                 if (this.total >= this.max_files) {
133 |                     return false;
134 |                 }
135 |                 return true;
136 |             },
137 |             _can_upload_file(key) {
138 |                 let file = this.files[key];
139 | 
140 |                 if (file.attempted || file.bad_size) {
141 |                     return false;
142 |                 }
143 |                 return true;
144 |             },
145 |             _xhr: function (formData, keys, callback) {
146 |                 this.onUploading = true;
147 |                 this.$emit('upload-image-attempt', formData);
148 | 
149 |                 keys.forEach((key) => {
150 |                     this.$set(this.files[key], 'attempted', true);
151 |                 });
152 | 
153 |                 this.$http.post(this.url, formData).then((response) => {
154 |                     keys.forEach((key) => {
155 |                         this.$set(this.files[key], 'uploaded', true);
156 | 
157 |                         this.total++;
158 |                     });
159 | 
160 |                     this.$emit('upload-image-success', [formData, response]);
161 |                 }, (response) => {
162 |                     this.$emit('upload-image-failure', [formData, response]);
163 |                 }).then((response) => {
164 |                     this.onUploading = false;
165 | 
166 |                     callback();
167 |                 });
168 |             },
169 |             upload: function () {
170 |                 if (!this._can_xhr()) return false;
171 | 
172 |                 for (let key in this.files) {
173 |                     if (!this._can_upload_file(key)) continue;
174 | 
175 |                     let formData = new FormData();
176 |                     formData.append(this.name, this.files[key].file, this.files[key].name);
177 | 
178 |                     this._xhr(formData, [key], this.upload);
179 | 
180 |                     return true;
181 |                 }
182 |             },
183 |             upload_batch: function () {
184 |                 if (!this._can_xhr()) return false;
185 | 
186 |                 for (let key in this.batch) {
187 |                     this._xhr(this.batch[key].form, this.batch[key].keys, this.upload_batch);
188 | 
189 |                     delete this.batch[key];
190 | 
191 |                     return true;
192 |                 }
193 |             },
194 |             create_batch: function () {
195 |                 let index = 0;
196 |                 let count = 0;
197 | 
198 |                 this.batch = {};
199 | 
200 |                 for (let key in this.files) {
201 |                     if (!this._can_upload_file(key)) continue;
202 | 
203 |                     if (this.batch[index] == null || count == this.max_batch) {
204 |                         index++;
205 |                         count = 0;
206 |                         this.batch[index] = {form: new FormData(), keys: []};
207 |                     }
208 | 
209 |                     count++;
210 |                     this.batch[index]['keys'].push(key);
211 |                     this.batch[index]['form'].append(this.name, this.files[key].file, this.files[key].name);
212 |                 }
213 |             },
214 |             submit: function (e) {
215 |                 e.preventDefault();
216 |                 e.stopPropagation();
217 | 
218 |                 this.$emit('upload-image-submit', this.files);
219 | 
220 |                 if(!this.disable_upload && !this.onUploading) {
221 |                     if (this.max_batch > 1) {
222 |                         this.create_batch();
223 |                         return this.upload_batch();
224 |                     }
225 |                     this.upload();
226 |                 }
227 |             },
228 |             dragEnter: function (e) {
229 |                 e.preventDefault();
230 |                 this.onDragover = true;
231 |             },
232 |             dragLeave: function (e) {
233 |                 e.preventDefault();
234 |                 this.onDragover = false;
235 |             },
236 |             fileDrop: function (e) {
237 |                 e.preventDefault();
238 | 
239 |                 let newFiles = e.target.files || e.dataTransfer.files;
240 | 
241 |                 for (let i = 0; i < newFiles.length; i++) {
242 |                     this.$set(this.files, this.index, newFiles[i]);
243 | 
244 |                     if (newFiles[i].type.match(/image.*/)) {
245 |                         this.fileInit(this.index);
246 |                         this.fileRead(this.index);
247 | 
248 |                         this.index++;
249 |                     }
250 |                     ;
251 |                 }
252 |                 e.target.value = '';
253 |             },
254 |             fileInit: function (key) {
255 |                 let file = this.files[key];
256 | 
257 |                 this.files[key] = {
258 |                     name: this.files[key].name,
259 |                     file: this.files[key]
260 |                 };
261 | 
262 |                 if ((file.size * 0.001) > this.max_filesize) {
263 |                     this.$set(this.files[key], 'bad_size', true);
264 |                 }
265 |             },
266 |             fileRead: function (key) {
267 |                 let reader = new FileReader();
268 | 
269 |                 reader.addEventListener("load", (e) => {
270 |                     this.$set(this.image, key, reader.result);
271 | 
272 |                     if (this.resize_enabled) {
273 |                         let imager = new Image();
274 | 
275 |                         imager.onload = () => {
276 |                             let width = imager.width;
277 |                             let height = imager.height;
278 | 
279 |                             if (width > this.resize_max_width || height > this.resize_max_height) {
280 |                                 if ((height / width) - (this.resize_max_height / this.resize_max_width) > 0) {
281 |                                     width = this.resize_max_height / height * width;
282 |                                     height = this.resize_max_height;
283 |                                 } else {
284 |                                     height = this.resize_max_width / width * height;
285 |                                     width = this.resize_max_width;
286 |                                 }
287 |                             }
288 | 
289 |                             let canvas = document.createElement("canvas");
290 |                             canvas.width = width;
291 |                             canvas.height = height;
292 | 
293 |                             let ctx = canvas.getContext("2d");
294 |                             ctx.drawImage(imager, 0, 0, width, height);
295 | 
296 |                             let newImageData = canvas.toDataURL("image/png");
297 | 
298 |                             this.$set(this.image, key, newImageData);
299 | 
300 |                             //
301 |                             let img = atob(newImageData.split(',')[1]);
302 |                             let img_buffer = [];
303 |                             let i = 0;
304 |                             while (i < img.length) {
305 |                                 img_buffer.push(img.charCodeAt(i));
306 |                                 i++;
307 |                             }
308 |                             let u8Image = new Uint8Array(img_buffer);
309 | 
310 |                             this.$set(this.files, key, {
311 |                                 name: this.files[key].name,
312 |                                 file: new Blob([u8Image], {filename: this.files[key].name})
313 |                             });
314 | 
315 |                             this.$emit('upload-image-loaded', this.files[key]);
316 |                         };
317 |                         imager.src = reader.result;
318 |                     }
319 |                 });
320 | 
321 |                 reader.readAsDataURL(this.files[key].file);
322 |             },
323 |             fileDelete: function (e, key) {
324 |                 this.$emit('upload-image-removed', this.files[key]);
325 |                 this.$delete(this.files, key);
326 |                 this.$delete(this.image, key);
327 |             },
328 |             fileClick: function (e, key) {
329 |                 e.preventDefault();
330 |                 e.stopPropagation();
331 |                 this.$emit('upload-image-clicked', this.files[key]);
332 |             }
333 |         }
334 |     }
335 | </script>
336 | 
337 | <style lang="css" scoped>
338 |     .vue_component__upload--image {
339 |         padding: 5px;
340 |         cursor: pointer;
341 |         min-height: 80px;
342 |         border-radius: 5px;
343 |     }
344 | 
345 |     .vue_component__upload--image.dragover {
346 |     }
347 | 
348 |     .vue_component__upload--image form > div {
349 |         text-align: center;
350 |     }
351 | 
352 |     .vue_component__upload--image .upload_image_form__thumbnails {
353 |         margin-bottom: 1em;
354 |     }
355 | 
356 |     .vue_component__upload--image .upload_image_form__thumbnail {
357 |         border-radius: 2.5px;
358 |         position: relative;
359 |         width: 20%;
360 |         padding: 20% 0 0;
361 |         overflow: hidden;
362 |         margin: 10px;
363 |         display: inline-block;
364 |     }
365 | 
366 |     .vue_component__upload--image .upload_image_form__thumbnail img {
367 |         position: absolute;
368 |         top: 50%;
369 |         left: 50%;
370 |         min-width: 100%;
371 |         min-height: 100%;
372 |         max-height: 150%;
373 |         opacity: 0;
374 |         transform: translateX(-50%) translateY(-50%);
375 |         transition: 1s opacity;
376 |     }
377 | 
378 |     .vue_component__upload--image .upload_image_form__thumbnail img.show {
379 |         opacity: 1;
380 |     }
381 | 
382 |     .vue_component__upload--image .upload_image_form__thumbnail img:hover {
383 |         filter: blur(2px);
384 |     }
385 | 
386 |     .vue_component__upload--image .upload_image_form__thumbnail.bad-size img {
387 |         filter: grayscale(100%);
388 |     }
389 | 
390 |     .vue_component__upload--image .upload_image_form__thumbnail.uploaded img {
391 |         opacity: 0.1;
392 |     }
393 | 
394 |     .vue_component__upload--image .upload_image_form__thumbnail span {
395 |         position: absolute;
396 |         top: -5px;
397 |         left: 0px;
398 |         z-index: 100;
399 |         padding: 0px 1px;
400 |         border-radius: 2px;
401 |         background-color: grey;
402 |     }
403 | </style>
404 | 


--------------------------------------------------------------------------------
/example/images/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/viral-vector/vue-upload-image/32f2d8944ad249298b8d61d975e16f5f322ff050/example/images/example.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-upload-image",
 3 |   "version": "1.1.2",
 4 |   "description": "Configurable image preview & ajax up-loader",
 5 |   "main": "dist/upload_image.vue",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/viral-vector/vue-upload-image.git"
 9 |   },
10 |   "keywords": [
11 |     "vue-image-upload",
12 |     "vue.js image uploader",
13 |     "vue.js image",
14 |     "vue image.js",
15 |     "vue.js uploader",
16 |     "vue.js",
17 |     "image",
18 |     "upload",
19 |     "multiple",
20 |     "component",
21 |     "vue-component",
22 |     "vue-upload-component"
23 |   ],
24 |   "author": {
25 |     "name": "viral-vector",
26 |     "email": "vectorviral@gmail.com"
27 |   },
28 |   "license": "MIT",
29 |   "bugs": {
30 |     "url": "https://github.com/viral-vector/vue-upload-image/issues"
31 |   },
32 |   "homepage": "https://github.com/viral-vector/vue-upload-image",
33 |   "dependencies": {
34 |         
35 |   }
36 | }


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