├── .babelrc
├── .gitignore
├── License
├── README.md
├── dist
    ├── vue-img-preview.js
    └── vue-img-preview.js.map
├── package.json
├── src
    ├── index.js
    └── vue-img-preview.vue
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["latest", {
4 |       "es2015": { "modules": false }
5 |     }]
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | yarn-error.log
5 | index.html
6 | /dist/vue.min.js
7 | 


--------------------------------------------------------------------------------
/License:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Damilola JOEL
 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-img-preview [![npm version](https://badge.fury.io/js/vue-img-preview.svg)](https://badge.fury.io/js/vue-img-preview) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/dameety/vue-image-preview/master/License) [![NPM](https://nodei.co/npm/vue-img-preview.png?downloads=true)](https://nodei.co/npm/vue-img-preview/)
 2 | 
 3 |  This is a minimal image preview implementation that does only one thing; give users feedback by showing image chosen from a file input.
 4 | 
 5 | ## looks like this (without the form)
 6 | 
 7 | ![demo](https://cloud.githubusercontent.com/assets/10757330/26514483/148ab3b8-426a-11e7-8bd3-e40465e2509e.jpg)
 8 | 
 9 | 
10 | ## Installation
11 | 
12 | ```
13 | 	npm install vue-img-preview --save
14 | ```
15 | 
16 | ## Import
17 | 
18 | ```
19 | import Vue from 'vue'
20 | import {vueImgPreview} from 'vue-img-preview'
21 | 
22 | Vue.component('vue-img-preview', vueImgPreview)
23 | 
24 | ```
25 | 
26 | ## Browser Usage
27 | 
28 | ```
29 | <script src="path/to/vue/vue.js"></script>
30 | <script src="path/to/dist/vue-img-preview.js"></script>
31 | 
32 | <script>
33 | 
34 |   Vue.component('vue-img-preview', vueImgPreview)
35 | 
36 |   const vm = new Vue({
37 |     ...
38 |   });
39 | 
40 | </script>
41 | 
42 | ```
43 | 
44 | ## Then:
45 | 
46 | ```
47 | <vue-img-preview
48 | 
49 | 	input-name= "profile_picture"
50 | 	default-image= "https://placehold.it/350x150"
51 | 	bg-color= "#ffffff"
52 | 	text-color= "#000000"
53 | 	alt-text="profile picture"
54 |     button-text="Choose image"
55 |     picker-style="regular"
56 | 
57 | ></vue-img-preview>
58 | ```
59 | 
60 | ## Or Just:
61 | 
62 | ```
63 | <vue-img-preview></vue-img-preview>
64 | 
65 | ```
66 | 
67 | ## Props
68 | 
69 | | Name | Default | Type | Decsription |
70 | |------|:--------:|------|-------------|
71 | | input-name | file |String| name of the file input field
72 | | default-image |  |String| an image to display when the component loads before the user clicks the file input
73 | | bg-color | #037B38 |String| background color of the select button
74 | | text-color | #ffffff | String| color of the select text
75 | | alt-text | vue img preview | String| alternative text for the image
76 | | button-text | Choose an image | String| text to show on the button
77 | | picker-style | Regular | String | how the image picker should be displayed. Button-text, text-color & bg-color won't work with this.
78 | 


--------------------------------------------------------------------------------
/dist/vue-img-preview.js:
--------------------------------------------------------------------------------
1 | !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var r=t();for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=2)}([function(e,t,r){r(7);var n=r(5)(r(1),r(6),null,null);e.exports=n.exports},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{defaultImage:{type:String,default:""},inputName:{type:String,default:"file"},bgColor:{type:String,default:"#037B38"},textColor:{type:String,default:"#ffffff"},altText:{type:String,default:"vue img preview"},buttonText:{type:String,default:"Choose an image"},pickerStyle:{type:String,default:"regular"}},data:function(){return{setImage:null,buttonStyle:{backgroundColor:this.bgColor,color:this.textColor}}},computed:{getSetImage:function(){return null!==this.setImage?this.setImage:this.defaultImage}},methods:{chooseImage:function(e){var t=this,r=e.target.files;if(0===r.length)return void(this.setImage=null);var n=new FileReader;n.onload=function(e){t.setImage=e.target.result},n.readAsDataURL(r[0])}}}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(0),o=r.n(n);r.d(t,"vueImgPreview",function(){return o.a})},function(e,t,r){t=e.exports=r(4)(),t.push([e.i,"@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css);",""]),t.push([e.i,".vue-img-preview,.vue-img-preview-container{height:100%;width:100%}.vue-img-preview{margin-bottom:5px}#vue-img-preview-button{margin-top:5px;position:relative;overflow:hidden}#vue-img-preview-button input{width:100%;cursor:pointer;position:absolute;top:0;bottom:0;left:0;right:0;opacity:.001}#vue-img-preview-regular{border:1px solid #ccc}#vue-img-preview-regular input{margin-top:10px;margin-bottom:10px;margin-left:10px}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var r=this[t];r[2]?e.push("@media "+r[2]+"{"+r[1]+"}"):e.push(r[1])}return e.join("")},e.i=function(t,r){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(n[i]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&n[a[0]]||(r&&!a[2]?a[2]=r:r&&(a[2]="("+a[2]+") and ("+r+")"),e.push(a))}},e}},function(e,t){e.exports=function(e,t,r,n){var o,i=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(o=e,i=e.default);var s="function"==typeof i?i.options:i;if(t&&(s.render=t.render,s.staticRenderFns=t.staticRenderFns),r&&(s._scopeId=r),n){var u=Object.create(s.computed||null);Object.keys(n).forEach(function(e){var t=n[e];u[e]=function(){return t}}),s.computed=u}return{esModule:o,exports:i,options:s}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"vue-img-preview-container"},[e.getSetImage?r("img",{staticClass:"vue-img-preview",attrs:{src:e.getSetImage,alt:e.altText}}):e._e(),e._v(" "),"regular"!==e.pickerStyle?r("button",{style:[e.buttonStyle],attrs:{id:"vue-img-preview-button"}},[r("input",{attrs:{type:"file",accept:"image/*",name:e.inputName},on:{change:e.chooseImage}}),e._v(" "),r("span",[e._v(e._s(e.buttonText))])]):e._e(),e._v(" "),"regular"===e.pickerStyle?r("div",{staticClass:"form-group"},[r("input",{staticClass:"form-control",attrs:{type:"file",accept:"image/*",name:e.inputName},on:{change:e.chooseImage}})]):e._e()])},staticRenderFns:[]}},function(e,t,r){var n=r(3);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);r(8)("403010ae",n,!0)},function(e,t,r){function n(e){for(var t=0;t<e.length;t++){var r=e[t],n=p[r.id];if(n){n.refs++;for(var o=0;o<n.parts.length;o++)n.parts[o](r.parts[o]);for(;o<r.parts.length;o++)n.parts.push(i(r.parts[o]));n.parts.length>r.parts.length&&(n.parts.length=r.parts.length)}else{for(var a=[],o=0;o<r.parts.length;o++)a.push(i(r.parts[o]));p[r.id]={id:r.id,refs:1,parts:a}}}}function o(){var e=document.createElement("style");return e.type="text/css",c.appendChild(e),e}function i(e){var t,r,n=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(n){if(g)return v;n.parentNode.removeChild(n)}if(m){var i=d++;n=f||(f=o()),t=a.bind(null,n,i,!1),r=a.bind(null,n,i,!0)}else n=o(),t=s.bind(null,n),r=function(){n.parentNode.removeChild(n)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else r()}}function a(e,t,r,n){var o=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=h(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function s(e,t){var r=t.css,n=t.media,o=t.sourceMap;if(n&&e.setAttribute("media",n),o&&(r+="\n/*# sourceURL="+o.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var u="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!u)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var l=r(9),p={},c=u&&(document.head||document.getElementsByTagName("head")[0]),f=null,d=0,g=!1,v=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,r){g=r;var o=l(e,t);return n(o),function(t){for(var r=[],i=0;i<o.length;i++){var a=o[i],s=p[a.id];s.refs--,r.push(s)}t?(o=l(e,t),n(o)):o=[];for(var i=0;i<r.length;i++){var s=r[i];if(0===s.refs){for(var u=0;u<s.parts.length;u++)s.parts[u]();delete p[s.id]}}}};var h=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var r=[],n={},o=0;o<t.length;o++){var i=t[o],a=i[0],s=i[1],u=i[2],l=i[3],p={id:e+":"+o,css:s,media:u,sourceMap:l};n[a]?n[a].parts.push(p):r.push(n[a]={id:a,parts:[p]})}return r}}])});
2 | //# sourceMappingURL=vue-img-preview.js.map


--------------------------------------------------------------------------------
/dist/vue-img-preview.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///vue-img-preview.js","webpack:///webpack/bootstrap 0b657439e952c239a53b","webpack:///./src/vue-img-preview.vue","webpack:///vue-img-preview.vue","webpack:///./src/vue-img-preview.vue?58d2","webpack:///./~/css-loader/lib/css-base.js","webpack:///./~/vue-loader/lib/component-normalizer.js","webpack:///./src/vue-img-preview.vue?942c","webpack:///./src/vue-img-preview.vue?1f35","webpack:///./~/vue-style-loader/lib/addStylesClient.js","webpack:///./~/vue-style-loader/lib/listToStyles.js"],"names":["root","factory","exports","module","define","amd","a","i","this","modules","__webpack_require__","moduleId","installedModules","l","call","m","c","value","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","Component","__webpack_exports__","props","defaultImage","type","String","default","inputName","bgColor","textColor","altText","buttonText","pickerStyle","data","setImage","buttonStyle","backgroundColor","color","computed","getSetImage","methods","chooseImage","e","_this","files","target","length","reader","FileReader","onload","result","readAsDataURL","__WEBPACK_IMPORTED_MODULE_0__vue_img_preview_vue__","__WEBPACK_IMPORTED_MODULE_0__vue_img_preview_vue___default","push","list","toString","item","join","mediaQuery","alreadyImportedModules","id","rawScriptExports","compiledTemplate","scopeId","cssModules","esModule","scriptExports","options","render","staticRenderFns","_scopeId","create","keys","forEach","key","_vm","_h","$createElement","_c","_self","staticClass","attrs","src","alt","_e","_v","style","accept","on","change","_s","content","locals","addStylesToDom","styles","domStyle","stylesInDom","refs","j","parts","addStyle","createStyleElement","styleElement","document","createElement","head","appendChild","obj","update","remove","querySelector","isProduction","noop","parentNode","removeChild","isOldIE","styleIndex","singletonCounter","singletonElement","applyToSingletonTag","bind","applyToTag","newObj","css","media","sourceMap","index","styleSheet","cssText","replaceText","cssNode","createTextNode","childNodes","insertBefore","setAttribute","sources","btoa","unescape","encodeURIComponent","JSON","stringify","firstChild","hasDocument","DEBUG","Error","listToStyles","getElementsByTagName","navigator","test","userAgent","toLowerCase","parentId","_isProduction","newList","mayRemove","textStore","replacement","filter","Boolean","newStyles","part"],"mappings":"CAAA,SAAAA,EAAAC,GACA,mBAAAC,UAAA,gBAAAC,QACAA,OAAAD,QAAAD,QACA,sBAAAG,gBAAAC,IACAD,UAAAH,OACA,CACA,GAAAK,GAAAL,GACA,QAAAM,KAAAD,IAAA,gBAAAJ,iBAAAF,GAAAO,GAAAD,EAAAC,KAECC,KAAA,WACD,MCAgB,UAAUC,GCN1B,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAT,OAGA,IAAAC,GAAAS,EAAAD,IACAJ,EAAAI,EACAE,GAAA,EACAX,WAUA,OANAO,GAAAE,GAAAG,KAAAX,EAAAD,QAAAC,IAAAD,QAAAQ,GAGAP,EAAAU,GAAA,EAGAV,EAAAD,QAvBA,GAAAU,KA+DA,OAnCAF,GAAAK,EAAAN,EAGAC,EAAAM,EAAAJ,EAGAF,EAAAH,EAAA,SAAAU,GAA2C,MAAAA,IAG3CP,EAAAQ,EAAA,SAAAhB,EAAAiB,EAAAC,GACAV,EAAAW,EAAAnB,EAAAiB,IACAG,OAAAC,eAAArB,EAAAiB,GACAK,cAAA,EACAC,YAAA,EACAC,IAAAN,KAMAV,EAAAiB,EAAA,SAAAxB,GACA,GAAAiB,GAAAjB,KAAAyB,WACA,WAA2B,MAAAzB,GAAA,SAC3B,WAAiC,MAAAA,GAEjC,OADAO,GAAAQ,EAAAE,EAAA,IAAAA,GACAA,GAIAV,EAAAW,EAAA,SAAAQ,EAAAC,GAAsD,MAAAR,QAAAS,UAAAC,eAAAlB,KAAAe,EAAAC,IAGtDpB,EAAAuB,EAAA,SAGAvB,IAAAwB,EAAA,KDgBM,SAAU/B,EAAQD,EAASQ,GE9EjCA,EAAA,EAEA,IAAAyB,GAAAzB,EAAA,GAEAA,EAAA,GAEAA,EAAA,GAEA,KAEA,KAGAP,GAAAD,QAAAiC,EAAAjC,SFuFM,SAAUC,EAAQiC,EAAqB1B,GAE7C,YACAY,QAAOC,eAAea,EAAqB,cAAgBnB,OAAO,IAqBrCmB,EAA6B,SAEzDC,OAECC,cACCC,KGzGHC,OH0GGC,QGvGH,IH0GEC,WACCH,KGzGHC,OH0GGC,QGvGH,QH0GEE,SACCJ,KGzGHC,OH0GGC,QGvGH,WH0GEG,WACCL,KGzGHC,OH0GGC,QGvGH,WH0GEI,SACCN,KGzGHC,OH0GGC,QGvGH,mBH0GEK,YACCP,KGzGHC,OH0GGC,QGvGH,mBH0GEM,aACCR,KGzGHC,OH0GGC,QGrGH,YH0GCO,KAAM,WACL,OACCC,SGzGH,KH0GGC,aACCC,gBAAiB3C,KGzGrBmC,QH0GIS,MAAO5C,KGvGXoC,aH6GCS,UACCC,YAAa,WACZ,MAAyB,QAAlB9C,KAAKyC,SAAoBzC,KAAKyC,SAAWzC,KGzGnD8B,eH6GCiB,SACCC,YAAa,SAAqBC,GGtGpC,GAAAC,GAAAlD,KHyGOmD,EAAQF,EAAEG,OGvGjBD,KHyGG,IAAqB,IAAjBA,EAAME,OGtGb,YHuGIrD,KAAKyC,SGxGT,KH4GG,IAAIa,GAAS,GGxGhBC,WHyGGD,GAAOE,OAAS,SAAUP,GACzBC,EAAMT,SAAWQ,EAAEG,OGxGvBK,QH2GGH,EAAOI,cAAcP,EGvGxB,QH+GM,SAAUxD,EAAQiC,EAAqB1B,GAE7C,YACAY,QAAOC,eAAea,EAAqB,cAAgBnB,OAAO,GAC7C,IAAIkD,GAAqDzD,EAAoB,GACzE0D,EAA6D1D,EAAoBiB,EAAEwC,EAC3DzD,GAAoBQ,EAAEkB,EAAqB,gBAAiB,WAAa,MAAOgC,GAA2D9D,KAMtL,SAAUH,EAAQD,EAASQ,GI5NjCR,EAAAC,EAAAD,QAAAQ,EAAA,KAEAR,EAAAmE,MAAAlE,EAAAI,EAAA,6GAAoI,KAGpIL,EAAAmE,MAAAlE,EAAAI,EAAA,yaAAgc,MJqO1b,SAAUJ,EAAQD,GKrOxBC,EAAAD,QAAA,WACA,GAAAoE,KA0CA,OAvCAA,GAAAC,SAAA,WAEA,OADAN,MACA1D,EAAA,EAAgBA,EAAAC,KAAAqD,OAAiBtD,IAAA,CACjC,GAAAiE,GAAAhE,KAAAD,EACAiE,GAAA,GACAP,EAAAI,KAAA,UAAAG,EAAA,OAAwCA,EAAA,QAExCP,EAAAI,KAAAG,EAAA,IAGA,MAAAP,GAAAQ,KAAA,KAIAH,EAAA/D,EAAA,SAAAE,EAAAiE,GACA,gBAAAjE,KACAA,IAAA,KAAAA,EAAA,KAEA,QADAkE,MACApE,EAAA,EAAgBA,EAAAC,KAAAqD,OAAiBtD,IAAA,CACjC,GAAAqE,GAAApE,KAAAD,GAAA,EACA,iBAAAqE,KACAD,EAAAC,IAAA,GAEA,IAAArE,EAAA,EAAYA,EAAAE,EAAAoD,OAAoBtD,IAAA,CAChC,GAAAiE,GAAA/D,EAAAF,EAKA,iBAAAiE,GAAA,IAAAG,EAAAH,EAAA,MACAE,IAAAF,EAAA,GACAA,EAAA,GAAAE,EACKA,IACLF,EAAA,OAAAA,EAAA,aAAAE,EAAA,KAEAJ,EAAAD,KAAAG,MAIAF,ILkPM,SAAUnE,EAAQD,GM/RxBC,EAAAD,QAAA,SACA2E,EACAC,EACAC,EACAC,GAEA,GAAAC,GACAC,EAAAL,QAGAtC,QAAAsC,GAAApC,OACA,YAAAF,GAAA,aAAAA,IACA0C,EAAAJ,EACAK,EAAAL,EAAApC,QAIA,IAAA0C,GAAA,kBAAAD,GACAA,EAAAC,QACAD,CAcA,IAXAJ,IACAK,EAAAC,OAAAN,EAAAM,OACAD,EAAAE,gBAAAP,EAAAO,iBAIAN,IACAI,EAAAG,SAAAP,GAIAC,EAAA,CACA,GAAA3B,GAAA/B,OAAAiE,OAAAJ,EAAA9B,UAAA,KACA/B,QAAAkE,KAAAR,GAAAS,QAAA,SAAAC,GACA,GAAAvF,GAAA6E,EAAAU,EACArC,GAAAqC,GAAA,WAAmC,MAAAvF,MAEnCgF,EAAA9B,WAGA,OACA4B,WACA/E,QAAAgF,EACAC,aN2SM,SAAUhF,EAAQD,GO3VxBC,EAAAD,SAAgBkF,OAAA,WAAmB,GAAAO,GAAAnF,KAAaoF,EAAAD,EAAAE,eAA0BC,EAAAH,EAAAI,MAAAD,IAAAF,CAC1E,OAAAE,GAAA,OACAE,YAAA,8BACGL,EAAA,YAAAG,EAAA,OACHE,YAAA,kBACAC,OACAC,IAAAP,EAAArC,YACA6C,IAAAR,EAAA9C,WAEG8C,EAAAS,KAAAT,EAAAU,GAAA,iBAAAV,EAAA5C,YAAA+C,EAAA,UACHQ,OAAAX,EAAAzC,aACA+C,OACArB,GAAA,4BAEGkB,EAAA,SACHG,OACA1D,KAAA,OACAgE,OAAA,UACApF,KAAAwE,EAAAjD,WAEA8D,IACAC,OAAAd,EAAAnC,eAEGmC,EAAAU,GAAA,KAAAP,EAAA,QAAAH,EAAAU,GAAAV,EAAAe,GAAAf,EAAA7C,iBAAA6C,EAAAS,KAAAT,EAAAU,GAAA,iBAAAV,EAAA5C,YAAA+C,EAAA,OACHE,YAAA,eACGF,EAAA,SACHE,YAAA,eACAC,OACA1D,KAAA,OACAgE,OAAA,UACApF,KAAAwE,EAAAjD,WAEA8D,IACAC,OAAAd,EAAAnC,iBAEGmC,EAAAS,QACFf,qBPiWK,SAAUlF,EAAQD,EAASQ,GQlYjC,GAAAiG,GAAAjG,EAAA,EACA,iBAAAiG,SAAAxG,EAAAI,EAAAoG,EAAA,MACAA,EAAAC,SAAAzG,EAAAD,QAAAyG,EAAAC,OAEAlG,GAAA,cAAAiG,GAAA,IR2YM,SAAUxG,EAAQD,EAASQ,GSjUjC,QAAAmG,GAAAC,GACA,OAAAvG,GAAA,EAAiBA,EAAAuG,EAAAjD,OAAmBtD,IAAA,CACpC,GAAAiE,GAAAsC,EAAAvG,GACAwG,EAAAC,EAAAxC,EAAAI,GACA,IAAAmC,EAAA,CACAA,EAAAE,MACA,QAAAC,GAAA,EAAqBA,EAAAH,EAAAI,MAAAtD,OAA2BqD,IAChDH,EAAAI,MAAAD,GAAA1C,EAAA2C,MAAAD,GAEA,MAAYA,EAAA1C,EAAA2C,MAAAtD,OAAuBqD,IACnCH,EAAAI,MAAA9C,KAAA+C,EAAA5C,EAAA2C,MAAAD,IAEAH,GAAAI,MAAAtD,OAAAW,EAAA2C,MAAAtD,SACAkD,EAAAI,MAAAtD,OAAAW,EAAA2C,MAAAtD,YAEK,CAEL,OADAsD,MACAD,EAAA,EAAqBA,EAAA1C,EAAA2C,MAAAtD,OAAuBqD,IAC5CC,EAAA9C,KAAA+C,EAAA5C,EAAA2C,MAAAD,IAEAF,GAAAxC,EAAAI,KAA8BA,GAAAJ,EAAAI,GAAAqC,KAAA,EAAAE,WAK9B,QAAAE,KACA,GAAAC,GAAAC,SAAAC,cAAA,QAGA,OAFAF,GAAA/E,KAAA,WACAkF,EAAAC,YAAAJ,GACAA,EAGA,QAAAF,GAAAO,GACA,GAAAC,GAAAC,EACAP,EAAAC,SAAAO,cAAA,2BAAAH,EAAA/C,GAAA,KAEA,IAAA0C,EAAA,CACA,GAAAS,EAGA,MAAAC,EAOAV,GAAAW,WAAAC,YAAAZ,GAIA,GAAAa,EAAA,CAEA,GAAAC,GAAAC,GACAf,GAAAgB,MAAAjB,KACAO,EAAAW,EAAAC,KAAA,KAAAlB,EAAAc,GAAA,GACAP,EAAAU,EAAAC,KAAA,KAAAlB,EAAAc,GAAA,OAGAd,GAAAD,IACAO,EAAAa,EAAAD,KAAA,KAAAlB,GACAO,EAAA,WACAP,EAAAW,WAAAC,YAAAZ,GAMA,OAFAM,GAAAD,GAEA,SAAAe,GACA,GAAAA,EAAA,CACA,GAAAA,EAAAC,MAAAhB,EAAAgB,KACAD,EAAAE,QAAAjB,EAAAiB,OACAF,EAAAG,YAAAlB,EAAAkB,UACA,MAEAjB,GAAAD,EAAAe,OAEAb,MAcA,QAAAU,GAAAjB,EAAAwB,EAAAjB,EAAAF,GACA,GAAAgB,GAAAd,EAAA,GAAAF,EAAAgB,GAEA,IAAArB,EAAAyB,WACAzB,EAAAyB,WAAAC,QAAAC,EAAAH,EAAAH,OACG,CACH,GAAAO,GAAA3B,SAAA4B,eAAAR,GACAS,EAAA9B,EAAA8B,UACAA,GAAAN,IAAAxB,EAAAY,YAAAkB,EAAAN,IACAM,EAAAvF,OACAyD,EAAA+B,aAAAH,EAAAE,EAAAN,IAEAxB,EAAAI,YAAAwB,IAKA,QAAAT,GAAAnB,EAAAK,GACA,GAAAgB,GAAAhB,EAAAgB,IACAC,EAAAjB,EAAAiB,MACAC,EAAAlB,EAAAkB,SAcA,IAZAD,GACAtB,EAAAgC,aAAA,QAAAV,GAGAC,IAGAF,GAAA,mBAAAE,EAAAU,QAAA,SAEAZ,GAAA,uDAAyDa,KAAAC,SAAAC,mBAAAC,KAAAC,UAAAf,MAAA,OAGzDvB,EAAAyB,WACAzB,EAAAyB,WAAAC,QAAAL,MACG,CACH,KAAArB,EAAAuC,YACAvC,EAAAY,YAAAZ,EAAAuC,WAEAvC,GAAAI,YAAAH,SAAA4B,eAAAR,KA9MA,GAAAmB,GAAA,mBAAAvC,SAEA,uBAAAwC,gBACAD,EACA,SAAAE,OACA,0JAKA,IAAAC,GAAAvJ,EAAA,GAeAsG,KAQAS,EAAAqC,IAAAvC,SAAAE,MAAAF,SAAA2C,qBAAA,YACA5B,EAAA,KACAD,EAAA,EACAN,GAAA,EACAC,EAAA,aAIAG,EAAA,mBAAAgC,YAAA,eAAAC,KAAAD,UAAAE,UAAAC,cAEAnK,GAAAD,QAAA,SAAAqK,EAAAjG,EAAAkG,GACAzC,EAAAyC,CAEA,IAAA1D,GAAAmD,EAAAM,EAAAjG,EAGA,OAFAuC,GAAAC,GAEA,SAAA2D,GAEA,OADAC,MACAnK,EAAA,EAAmBA,EAAAuG,EAAAjD,OAAmBtD,IAAA,CACtC,GAAAiE,GAAAsC,EAAAvG,GACAwG,EAAAC,EAAAxC,EAAAI,GACAmC,GAAAE,OACAyD,EAAArG,KAAA0C,GAEA0D,GACA3D,EAAAmD,EAAAM,EAAAE,GACA5D,EAAAC,IAEAA,IAEA,QAAAvG,GAAA,EAAmBA,EAAAmK,EAAA7G,OAAsBtD,IAAA,CACzC,GAAAwG,GAAA2D,EAAAnK,EACA,QAAAwG,EAAAE,KAAA,CACA,OAAAC,GAAA,EAAuBA,EAAAH,EAAAI,MAAAtD,OAA2BqD,IAClDH,EAAAI,MAAAD,WAEAF,GAAAD,EAAAnC,OAwFA,IAAAqE,GAAA,WACA,GAAA0B,KAEA,iBAAA7B,EAAA8B,GAEA,MADAD,GAAA7B,GAAA8B,EACAD,EAAAE,OAAAC,SAAArG,KAAA,WTucM,SAAUtE,EAAQD,GU3mBxBC,EAAAD,QAAA,SAAAqK,EAAAjG,GAGA,OAFAwC,MACAiE,KACAxK,EAAA,EAAiBA,EAAA+D,EAAAT,OAAiBtD,IAAA,CAClC,GAAAiE,GAAAF,EAAA/D,GACAqE,EAAAJ,EAAA,GACAmE,EAAAnE,EAAA,GACAoE,EAAApE,EAAA,GACAqE,EAAArE,EAAA,GACAwG,GACApG,GAAA2F,EAAA,IAAAhK,EACAoI,MACAC,QACAC,YAEAkC,GAAAnG,GAGAmG,EAAAnG,GAAAuC,MAAA9C,KAAA2G,GAFAlE,EAAAzC,KAAA0G,EAAAnG,IAAmCA,KAAAuC,OAAA6D,KAKnC,MAAAlE","file":"vue-img-preview.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse {\n\t\tvar a = factory();\n\t\tfor(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];\n\t}\n})(this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse {\n\t\tvar a = factory();\n\t\tfor(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];\n\t}\n})(this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// identity function for calling harmony imports with the correct context\n/******/ \t__webpack_require__.i = function(value) { return value; };\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"/dist/\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 2);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\n/* styles */\n__webpack_require__(7)\n\nvar Component = __webpack_require__(5)(\n  /* script */\n  __webpack_require__(1),\n  /* template */\n  __webpack_require__(6),\n  /* scopeId */\n  null,\n  /* cssModules */\n  null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n/* 1 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n\n\tprops: {\n\n\t\tdefaultImage: {\n\t\t\ttype: String,\n\t\t\tdefault: \"\"\n\t\t},\n\n\t\tinputName: {\n\t\t\ttype: String,\n\t\t\tdefault: \"file\"\n\t\t},\n\n\t\tbgColor: {\n\t\t\ttype: String,\n\t\t\tdefault: \"#037B38\"\n\t\t},\n\n\t\ttextColor: {\n\t\t\ttype: String,\n\t\t\tdefault: \"#ffffff\"\n\t\t},\n\n\t\taltText: {\n\t\t\ttype: String,\n\t\t\tdefault: \"vue img preview\"\n\t\t},\n\n\t\tbuttonText: {\n\t\t\ttype: String,\n\t\t\tdefault: \"Choose an image\"\n\t\t},\n\n\t\tpickerStyle: {\n\t\t\ttype: String,\n\t\t\tdefault: \"regular\"\n\t\t}\n\n\t},\n\n\tdata: function data() {\n\t\treturn {\n\t\t\tsetImage: null,\n\t\t\tbuttonStyle: {\n\t\t\t\tbackgroundColor: this.bgColor,\n\t\t\t\tcolor: this.textColor\n\t\t\t}\n\t\t};\n\t},\n\n\n\tcomputed: {\n\t\tgetSetImage: function getSetImage() {\n\t\t\treturn this.setImage !== null ? this.setImage : this.defaultImage;\n\t\t}\n\t},\n\n\tmethods: {\n\t\tchooseImage: function chooseImage(e) {\n\t\t\tvar _this = this;\n\n\t\t\tvar files = e.target.files;\n\n\t\t\tif (files.length === 0) {\n\t\t\t\tthis.setImage = null;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tvar reader = new FileReader();\n\t\t\treader.onload = function (e) {\n\t\t\t\t_this.setImage = e.target.result;\n\t\t\t};\n\n\t\t\treader.readAsDataURL(files[0]);\n\t\t}\n\t}\n\n});\n\n/***/ }),\n/* 2 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__vue_img_preview_vue__ = __webpack_require__(0);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__vue_img_preview_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__vue_img_preview_vue__);\n/* harmony reexport (default from non-hamory) */ __webpack_require__.d(__webpack_exports__, \"vueImgPreview\", function() { return __WEBPACK_IMPORTED_MODULE_0__vue_img_preview_vue___default.a; });\n\n\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports, __webpack_require__) {\n\nexports = module.exports = __webpack_require__(4)();\n// imports\nexports.push([module.i, \"@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css);\", \"\"]);\n\n// module\nexports.push([module.i, \".vue-img-preview,.vue-img-preview-container{height:100%;width:100%}.vue-img-preview{margin-bottom:5px}#vue-img-preview-button{margin-top:5px;position:relative;overflow:hidden}#vue-img-preview-button input{width:100%;cursor:pointer;position:absolute;top:0;bottom:0;left:0;right:0;opacity:.001}#vue-img-preview-regular{border:1px solid #ccc}#vue-img-preview-regular input{margin-top:10px;margin-bottom:10px;margin-left:10px}\", \"\"]);\n\n// exports\n\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports) {\n\n/*\r\n\tMIT License http://www.opensource.org/licenses/mit-license.php\r\n\tAuthor Tobias Koppers @sokra\r\n*/\r\n// css base code, injected by the css-loader\r\nmodule.exports = function() {\r\n\tvar list = [];\r\n\r\n\t// return the list of modules as css string\r\n\tlist.toString = function toString() {\r\n\t\tvar result = [];\r\n\t\tfor(var i = 0; i < this.length; i++) {\r\n\t\t\tvar item = this[i];\r\n\t\t\tif(item[2]) {\r\n\t\t\t\tresult.push(\"@media \" + item[2] + \"{\" + item[1] + \"}\");\r\n\t\t\t} else {\r\n\t\t\t\tresult.push(item[1]);\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn result.join(\"\");\r\n\t};\r\n\r\n\t// import a list of modules into the list\r\n\tlist.i = function(modules, mediaQuery) {\r\n\t\tif(typeof modules === \"string\")\r\n\t\t\tmodules = [[null, modules, \"\"]];\r\n\t\tvar alreadyImportedModules = {};\r\n\t\tfor(var i = 0; i < this.length; i++) {\r\n\t\t\tvar id = this[i][0];\r\n\t\t\tif(typeof id === \"number\")\r\n\t\t\t\talreadyImportedModules[id] = true;\r\n\t\t}\r\n\t\tfor(i = 0; i < modules.length; i++) {\r\n\t\t\tvar item = modules[i];\r\n\t\t\t// skip already imported module\r\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\r\n\t\t\t//  when a module is imported multiple times with different media queries.\r\n\t\t\t//  I hope this will never occur (Hey this way we have smaller bundles)\r\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\r\n\t\t\t\tif(mediaQuery && !item[2]) {\r\n\t\t\t\t\titem[2] = mediaQuery;\r\n\t\t\t\t} else if(mediaQuery) {\r\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\r\n\t\t\t\t}\r\n\t\t\t\tlist.push(item);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\treturn list;\r\n};\r\n\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports) {\n\n// this module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle\n\nmodule.exports = function normalizeComponent (\n  rawScriptExports,\n  compiledTemplate,\n  scopeId,\n  cssModules\n) {\n  var esModule\n  var scriptExports = rawScriptExports = rawScriptExports || {}\n\n  // ES6 modules interop\n  var type = typeof rawScriptExports.default\n  if (type === 'object' || type === 'function') {\n    esModule = rawScriptExports\n    scriptExports = rawScriptExports.default\n  }\n\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (compiledTemplate) {\n    options.render = compiledTemplate.render\n    options.staticRenderFns = compiledTemplate.staticRenderFns\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = scopeId\n  }\n\n  // inject cssModules\n  if (cssModules) {\n    var computed = Object.create(options.computed || null)\n    Object.keys(cssModules).forEach(function (key) {\n      var module = cssModules[key]\n      computed[key] = function () { return module }\n    })\n    options.computed = computed\n  }\n\n  return {\n    esModule: esModule,\n    exports: scriptExports,\n    options: options\n  }\n}\n\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _c('div', {\n    staticClass: \"vue-img-preview-container\"\n  }, [(_vm.getSetImage) ? _c('img', {\n    staticClass: \"vue-img-preview\",\n    attrs: {\n      \"src\": _vm.getSetImage,\n      \"alt\": _vm.altText\n    }\n  }) : _vm._e(), _vm._v(\" \"), (_vm.pickerStyle !== 'regular') ? _c('button', {\n    style: ([_vm.buttonStyle]),\n    attrs: {\n      \"id\": \"vue-img-preview-button\"\n    }\n  }, [_c('input', {\n    attrs: {\n      \"type\": \"file\",\n      \"accept\": \"image/*\",\n      \"name\": _vm.inputName\n    },\n    on: {\n      \"change\": _vm.chooseImage\n    }\n  }), _vm._v(\" \"), _c('span', [_vm._v(_vm._s(_vm.buttonText))])]) : _vm._e(), _vm._v(\" \"), (_vm.pickerStyle === 'regular') ? _c('div', {\n    staticClass: \"form-group\"\n  }, [_c('input', {\n    staticClass: \"form-control\",\n    attrs: {\n      \"type\": \"file\",\n      \"accept\": \"image/*\",\n      \"name\": _vm.inputName\n    },\n    on: {\n      \"change\": _vm.chooseImage\n    }\n  })]) : _vm._e()])\n},staticRenderFns: []}\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports, __webpack_require__) {\n\n// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = __webpack_require__(3);\nif(typeof content === 'string') content = [[module.i, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = __webpack_require__(8)(\"403010ae\", content, true);\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports, __webpack_require__) {\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n  Modified by Evan You @yyx990803\n*/\n\nvar hasDocument = typeof document !== 'undefined'\n\nif (typeof DEBUG !== 'undefined' && DEBUG) {\n  if (!hasDocument) {\n    throw new Error(\n    'vue-style-loader cannot be used in a non-browser environment. ' +\n    \"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.\"\n  ) }\n}\n\nvar listToStyles = __webpack_require__(9)\n\n/*\ntype StyleObject = {\n  id: number;\n  parts: Array<StyleObjectPart>\n}\n\ntype StyleObjectPart = {\n  css: string;\n  media: string;\n  sourceMap: ?string\n}\n*/\n\nvar stylesInDom = {/*\n  [id: number]: {\n    id: number,\n    refs: number,\n    parts: Array<(obj?: StyleObjectPart) => void>\n  }\n*/}\n\nvar head = hasDocument && (document.head || document.getElementsByTagName('head')[0])\nvar singletonElement = null\nvar singletonCounter = 0\nvar isProduction = false\nvar noop = function () {}\n\n// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n// tags it will allow on a page\nvar isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase())\n\nmodule.exports = function (parentId, list, _isProduction) {\n  isProduction = _isProduction\n\n  var styles = listToStyles(parentId, list)\n  addStylesToDom(styles)\n\n  return function update (newList) {\n    var mayRemove = []\n    for (var i = 0; i < styles.length; i++) {\n      var item = styles[i]\n      var domStyle = stylesInDom[item.id]\n      domStyle.refs--\n      mayRemove.push(domStyle)\n    }\n    if (newList) {\n      styles = listToStyles(parentId, newList)\n      addStylesToDom(styles)\n    } else {\n      styles = []\n    }\n    for (var i = 0; i < mayRemove.length; i++) {\n      var domStyle = mayRemove[i]\n      if (domStyle.refs === 0) {\n        for (var j = 0; j < domStyle.parts.length; j++) {\n          domStyle.parts[j]()\n        }\n        delete stylesInDom[domStyle.id]\n      }\n    }\n  }\n}\n\nfunction addStylesToDom (styles /* Array<StyleObject> */) {\n  for (var i = 0; i < styles.length; i++) {\n    var item = styles[i]\n    var domStyle = stylesInDom[item.id]\n    if (domStyle) {\n      domStyle.refs++\n      for (var j = 0; j < domStyle.parts.length; j++) {\n        domStyle.parts[j](item.parts[j])\n      }\n      for (; j < item.parts.length; j++) {\n        domStyle.parts.push(addStyle(item.parts[j]))\n      }\n      if (domStyle.parts.length > item.parts.length) {\n        domStyle.parts.length = item.parts.length\n      }\n    } else {\n      var parts = []\n      for (var j = 0; j < item.parts.length; j++) {\n        parts.push(addStyle(item.parts[j]))\n      }\n      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }\n    }\n  }\n}\n\nfunction createStyleElement () {\n  var styleElement = document.createElement('style')\n  styleElement.type = 'text/css'\n  head.appendChild(styleElement)\n  return styleElement\n}\n\nfunction addStyle (obj /* StyleObjectPart */) {\n  var update, remove\n  var styleElement = document.querySelector('style[data-vue-ssr-id~=\"' + obj.id + '\"]')\n\n  if (styleElement) {\n    if (isProduction) {\n      // has SSR styles and in production mode.\n      // simply do nothing.\n      return noop\n    } else {\n      // has SSR styles but in dev mode.\n      // for some reason Chrome can't handle source map in server-rendered\n      // style tags - source maps in <style> only works if the style tag is\n      // created and inserted dynamically. So we remove the server rendered\n      // styles and inject new ones.\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  if (isOldIE) {\n    // use singleton mode for IE9.\n    var styleIndex = singletonCounter++\n    styleElement = singletonElement || (singletonElement = createStyleElement())\n    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)\n    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)\n  } else {\n    // use multi-style-tag mode in all other cases\n    styleElement = createStyleElement()\n    update = applyToTag.bind(null, styleElement)\n    remove = function () {\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  update(obj)\n\n  return function updateStyle (newObj /* StyleObjectPart */) {\n    if (newObj) {\n      if (newObj.css === obj.css &&\n          newObj.media === obj.media &&\n          newObj.sourceMap === obj.sourceMap) {\n        return\n      }\n      update(obj = newObj)\n    } else {\n      remove()\n    }\n  }\n}\n\nvar replaceText = (function () {\n  var textStore = []\n\n  return function (index, replacement) {\n    textStore[index] = replacement\n    return textStore.filter(Boolean).join('\\n')\n  }\n})()\n\nfunction applyToSingletonTag (styleElement, index, remove, obj) {\n  var css = remove ? '' : obj.css\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = replaceText(index, css)\n  } else {\n    var cssNode = document.createTextNode(css)\n    var childNodes = styleElement.childNodes\n    if (childNodes[index]) styleElement.removeChild(childNodes[index])\n    if (childNodes.length) {\n      styleElement.insertBefore(cssNode, childNodes[index])\n    } else {\n      styleElement.appendChild(cssNode)\n    }\n  }\n}\n\nfunction applyToTag (styleElement, obj) {\n  var css = obj.css\n  var media = obj.media\n  var sourceMap = obj.sourceMap\n\n  if (media) {\n    styleElement.setAttribute('media', media)\n  }\n\n  if (sourceMap) {\n    // https://developer.chrome.com/devtools/docs/javascript-debugging\n    // this makes source maps inside style tags work properly in Chrome\n    css += '\\n/*# sourceURL=' + sourceMap.sources[0] + ' */'\n    // http://stackoverflow.com/a/26603875\n    css += '\\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'\n  }\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = css\n  } else {\n    while (styleElement.firstChild) {\n      styleElement.removeChild(styleElement.firstChild)\n    }\n    styleElement.appendChild(document.createTextNode(css))\n  }\n}\n\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports) {\n\n/**\n * Translates the list format produced by css-loader into something\n * easier to manipulate.\n */\nmodule.exports = function listToStyles (parentId, list) {\n  var styles = []\n  var newStyles = {}\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i]\n    var id = item[0]\n    var css = item[1]\n    var media = item[2]\n    var sourceMap = item[3]\n    var part = {\n      id: parentId + ':' + i,\n      css: css,\n      media: media,\n      sourceMap: sourceMap\n    }\n    if (!newStyles[id]) {\n      styles.push(newStyles[id] = { id: id, parts: [part] })\n    } else {\n      newStyles[id].parts.push(part)\n    }\n  }\n  return styles\n}\n\n\n/***/ })\n/******/ ]);\n});\n\n\n// WEBPACK FOOTER //\n// vue-img-preview.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/dist/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 2);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 0b657439e952c239a53b","\n/* styles */\nrequire(\"!!vue-style-loader!css-loader?minimize!../node_modules/vue-loader/lib/style-compiler/index?{\\\"id\\\":\\\"data-v-43d37150\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./vue-img-preview.vue\")\n\nvar Component = require(\"!../node_modules/vue-loader/lib/component-normalizer\")(\n  /* script */\n  require(\"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./vue-img-preview.vue\"),\n  /* template */\n  require(\"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-43d37150\\\"}!../node_modules/vue-loader/lib/selector?type=template&index=0!./vue-img-preview.vue\"),\n  /* scopeId */\n  null,\n  /* cssModules */\n  null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/vue-img-preview.vue\n// module id = 0\n// module chunks = 0","<template>\n\n    <div class=\"vue-img-preview-container\">\n\n        <img class=\"vue-img-preview\" :src=getSetImage :alt=altText v-if=\"getSetImage\">\n\n       \t<button id=\"vue-img-preview-button\" :style=\"[buttonStyle]\" v-if=\"pickerStyle !== 'regular'\">\n\t        <input type=\"file\" accept=\"image/*\" :name=inputName @change=\"chooseImage\">\n\t\t    <span>{{ buttonText }}</span>\n\t\t</button>\n\n\t\t<div class=\"form-group\" v-if=\"pickerStyle === 'regular'\">\n\t        <input type=\"file\" accept=\"image/*\" class=\"form-control\" :name=inputName @change=\"chooseImage\">\n        </div>\n\n    </div>\n\n</template>\n\n<script>\n\texport default {\n\n\t\tprops: {\n\n\t\t\tdefaultImage: {\n\t\t  \t\ttype: String,\n\t\t    \tdefault: \"\",\n\t\t  \t},\n\n\t\t  \tinputName: {\n\t\t  \t\ttype: String,\n\t\t  \t\tdefault: \"file\",\n\t\t  \t},\n\n\t\t  \tbgColor: {\n\t\t  \t\ttype: String,\n\t\t  \t\tdefault: \"#037B38\"\n\t\t  \t},\n\n\t\t  \ttextColor: {\n\t\t  \t\ttype: String,\n\t\t  \t\tdefault: \"#ffffff\"\n\t\t  \t},\n\n\t\t  \taltText: {\n\t\t  \t\ttype: String,\n\t\t  \t\tdefault: \"vue img preview\"\n\t\t  \t},\n\n\t\t  \tbuttonText: {\n\t\t  \t\ttype: String,\n\t\t  \t\tdefault: \"Choose an image\"\n\t\t  \t},\n\n\t\t  \tpickerStyle: {\n\t\t  \t\ttype: String,\n\t\t  \t\tdefault: \"regular\"\n\t\t  \t}\n\n\t\t},\n\n\t\tdata () {\n\t\t\treturn {\n\t\t\t\tsetImage: null,\n\t\t\t\tbuttonStyle: {\n\t\t\t\t\tbackgroundColor: this.bgColor,\n\t\t\t\t\tcolor: this.textColor,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tcomputed: {\n\n\t\t\tgetSetImage () {\n\t\t\t\treturn this.setImage !== null ? this.setImage : this.defaultImage\n\t\t\t},\n\n\t\t},\n\n\t    methods: {\n\n\t        chooseImage (e) {\n\n\t        \tlet files = e.target.files;\n\n\t        \tif(files.length === 0) {\n\t        \t\tthis.setImage = null\n\t        \t\treturn\n\t        \t}\n\n\t        \tlet reader = new FileReader();\n\t        \treader.onload = (e) => {\n                    this.setImage = e.target.result;\n                }\n\n                reader.readAsDataURL(files[0]);\n\n\t        },\n\n\t    },\n\n\t}\n</script>\n\n<style>\n\n\t@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css);\n\n\t/**\n\t * the container div for\n\t * the whole plugin template\n\t */\n\t.vue-img-preview-container {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t/**\n\t * the class target the\n\t * preview image\n\t */\n\t.vue-img-preview {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmargin-bottom: 5px;\n\t}\n\n\t#vue-img-preview-button {\n\t    margin-top: 5px;\n\t    position: relative;\n\t    overflow: hidden;\n\n\t}\n\n\t#vue-img-preview-button input {\n\t\twidth: 100%;\n\t    cursor: pointer;\n\t    position: absolute;\n\t    top: 0;\n\t    bottom: 0;\n\t    left: 0;\n\t    right: 0;\n\t    opacity: 0.001\n\t}\n\n\t/**\n\t * the normal file picker input\n\t * setting border and color\n\t */\n\t#vue-img-preview-regular {\n\n\t\tborder-style: solid;\n\t\tborder-color: #cccccc;\n\t\tborder-width: 1px;\n\n\t}\n\n\t/**\n\t * the normal file picker input\n\t * setting the margins\n\t */\n\t#vue-img-preview-regular input {\n\n\t\tmargin-top: 10px;\n\t\tmargin-bottom: 10px;\n\t\tmargin-left: 10px;\n\n\t}\n\n</style>\n\n\n// WEBPACK FOOTER //\n// vue-img-preview.vue?72afef30","exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")();\n// imports\nexports.push([module.id, \"@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css);\", \"\"]);\n\n// module\nexports.push([module.id, \".vue-img-preview,.vue-img-preview-container{height:100%;width:100%}.vue-img-preview{margin-bottom:5px}#vue-img-preview-button{margin-top:5px;position:relative;overflow:hidden}#vue-img-preview-button input{width:100%;cursor:pointer;position:absolute;top:0;bottom:0;left:0;right:0;opacity:.001}#vue-img-preview-regular{border:1px solid #ccc}#vue-img-preview-regular input{margin-top:10px;margin-bottom:10px;margin-left:10px}\", \"\"]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/css-loader?minimize!./~/vue-loader/lib/style-compiler?{\"id\":\"data-v-43d37150\",\"scoped\":false,\"hasInlineConfig\":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/vue-img-preview.vue\n// module id = 3\n// module chunks = 0","/*\r\n\tMIT License http://www.opensource.org/licenses/mit-license.php\r\n\tAuthor Tobias Koppers @sokra\r\n*/\r\n// css base code, injected by the css-loader\r\nmodule.exports = function() {\r\n\tvar list = [];\r\n\r\n\t// return the list of modules as css string\r\n\tlist.toString = function toString() {\r\n\t\tvar result = [];\r\n\t\tfor(var i = 0; i < this.length; i++) {\r\n\t\t\tvar item = this[i];\r\n\t\t\tif(item[2]) {\r\n\t\t\t\tresult.push(\"@media \" + item[2] + \"{\" + item[1] + \"}\");\r\n\t\t\t} else {\r\n\t\t\t\tresult.push(item[1]);\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn result.join(\"\");\r\n\t};\r\n\r\n\t// import a list of modules into the list\r\n\tlist.i = function(modules, mediaQuery) {\r\n\t\tif(typeof modules === \"string\")\r\n\t\t\tmodules = [[null, modules, \"\"]];\r\n\t\tvar alreadyImportedModules = {};\r\n\t\tfor(var i = 0; i < this.length; i++) {\r\n\t\t\tvar id = this[i][0];\r\n\t\t\tif(typeof id === \"number\")\r\n\t\t\t\talreadyImportedModules[id] = true;\r\n\t\t}\r\n\t\tfor(i = 0; i < modules.length; i++) {\r\n\t\t\tvar item = modules[i];\r\n\t\t\t// skip already imported module\r\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\r\n\t\t\t//  when a module is imported multiple times with different media queries.\r\n\t\t\t//  I hope this will never occur (Hey this way we have smaller bundles)\r\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\r\n\t\t\t\tif(mediaQuery && !item[2]) {\r\n\t\t\t\t\titem[2] = mediaQuery;\r\n\t\t\t\t} else if(mediaQuery) {\r\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\r\n\t\t\t\t}\r\n\t\t\t\tlist.push(item);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\treturn list;\r\n};\r\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/css-loader/lib/css-base.js\n// module id = 4\n// module chunks = 0","// this module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle\n\nmodule.exports = function normalizeComponent (\n  rawScriptExports,\n  compiledTemplate,\n  scopeId,\n  cssModules\n) {\n  var esModule\n  var scriptExports = rawScriptExports = rawScriptExports || {}\n\n  // ES6 modules interop\n  var type = typeof rawScriptExports.default\n  if (type === 'object' || type === 'function') {\n    esModule = rawScriptExports\n    scriptExports = rawScriptExports.default\n  }\n\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (compiledTemplate) {\n    options.render = compiledTemplate.render\n    options.staticRenderFns = compiledTemplate.staticRenderFns\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = scopeId\n  }\n\n  // inject cssModules\n  if (cssModules) {\n    var computed = Object.create(options.computed || null)\n    Object.keys(cssModules).forEach(function (key) {\n      var module = cssModules[key]\n      computed[key] = function () { return module }\n    })\n    options.computed = computed\n  }\n\n  return {\n    esModule: esModule,\n    exports: scriptExports,\n    options: options\n  }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/component-normalizer.js\n// module id = 5\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _c('div', {\n    staticClass: \"vue-img-preview-container\"\n  }, [(_vm.getSetImage) ? _c('img', {\n    staticClass: \"vue-img-preview\",\n    attrs: {\n      \"src\": _vm.getSetImage,\n      \"alt\": _vm.altText\n    }\n  }) : _vm._e(), _vm._v(\" \"), (_vm.pickerStyle !== 'regular') ? _c('button', {\n    style: ([_vm.buttonStyle]),\n    attrs: {\n      \"id\": \"vue-img-preview-button\"\n    }\n  }, [_c('input', {\n    attrs: {\n      \"type\": \"file\",\n      \"accept\": \"image/*\",\n      \"name\": _vm.inputName\n    },\n    on: {\n      \"change\": _vm.chooseImage\n    }\n  }), _vm._v(\" \"), _c('span', [_vm._v(_vm._s(_vm.buttonText))])]) : _vm._e(), _vm._v(\" \"), (_vm.pickerStyle === 'regular') ? _c('div', {\n    staticClass: \"form-group\"\n  }, [_c('input', {\n    staticClass: \"form-control\",\n    attrs: {\n      \"type\": \"file\",\n      \"accept\": \"image/*\",\n      \"name\": _vm.inputName\n    },\n    on: {\n      \"change\": _vm.chooseImage\n    }\n  })]) : _vm._e()])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-43d37150\"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/vue-img-preview.vue\n// module id = 6\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../node_modules/css-loader/index.js?minimize!../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"id\\\":\\\"data-v-43d37150\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue-img-preview.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"403010ae\", content, true);\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-style-loader!./~/css-loader?minimize!./~/vue-loader/lib/style-compiler?{\"id\":\"data-v-43d37150\",\"scoped\":false,\"hasInlineConfig\":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/vue-img-preview.vue\n// module id = 7\n// module chunks = 0","/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n  Modified by Evan You @yyx990803\n*/\n\nvar hasDocument = typeof document !== 'undefined'\n\nif (typeof DEBUG !== 'undefined' && DEBUG) {\n  if (!hasDocument) {\n    throw new Error(\n    'vue-style-loader cannot be used in a non-browser environment. ' +\n    \"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.\"\n  ) }\n}\n\nvar listToStyles = require('./listToStyles')\n\n/*\ntype StyleObject = {\n  id: number;\n  parts: Array<StyleObjectPart>\n}\n\ntype StyleObjectPart = {\n  css: string;\n  media: string;\n  sourceMap: ?string\n}\n*/\n\nvar stylesInDom = {/*\n  [id: number]: {\n    id: number,\n    refs: number,\n    parts: Array<(obj?: StyleObjectPart) => void>\n  }\n*/}\n\nvar head = hasDocument && (document.head || document.getElementsByTagName('head')[0])\nvar singletonElement = null\nvar singletonCounter = 0\nvar isProduction = false\nvar noop = function () {}\n\n// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n// tags it will allow on a page\nvar isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase())\n\nmodule.exports = function (parentId, list, _isProduction) {\n  isProduction = _isProduction\n\n  var styles = listToStyles(parentId, list)\n  addStylesToDom(styles)\n\n  return function update (newList) {\n    var mayRemove = []\n    for (var i = 0; i < styles.length; i++) {\n      var item = styles[i]\n      var domStyle = stylesInDom[item.id]\n      domStyle.refs--\n      mayRemove.push(domStyle)\n    }\n    if (newList) {\n      styles = listToStyles(parentId, newList)\n      addStylesToDom(styles)\n    } else {\n      styles = []\n    }\n    for (var i = 0; i < mayRemove.length; i++) {\n      var domStyle = mayRemove[i]\n      if (domStyle.refs === 0) {\n        for (var j = 0; j < domStyle.parts.length; j++) {\n          domStyle.parts[j]()\n        }\n        delete stylesInDom[domStyle.id]\n      }\n    }\n  }\n}\n\nfunction addStylesToDom (styles /* Array<StyleObject> */) {\n  for (var i = 0; i < styles.length; i++) {\n    var item = styles[i]\n    var domStyle = stylesInDom[item.id]\n    if (domStyle) {\n      domStyle.refs++\n      for (var j = 0; j < domStyle.parts.length; j++) {\n        domStyle.parts[j](item.parts[j])\n      }\n      for (; j < item.parts.length; j++) {\n        domStyle.parts.push(addStyle(item.parts[j]))\n      }\n      if (domStyle.parts.length > item.parts.length) {\n        domStyle.parts.length = item.parts.length\n      }\n    } else {\n      var parts = []\n      for (var j = 0; j < item.parts.length; j++) {\n        parts.push(addStyle(item.parts[j]))\n      }\n      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }\n    }\n  }\n}\n\nfunction createStyleElement () {\n  var styleElement = document.createElement('style')\n  styleElement.type = 'text/css'\n  head.appendChild(styleElement)\n  return styleElement\n}\n\nfunction addStyle (obj /* StyleObjectPart */) {\n  var update, remove\n  var styleElement = document.querySelector('style[data-vue-ssr-id~=\"' + obj.id + '\"]')\n\n  if (styleElement) {\n    if (isProduction) {\n      // has SSR styles and in production mode.\n      // simply do nothing.\n      return noop\n    } else {\n      // has SSR styles but in dev mode.\n      // for some reason Chrome can't handle source map in server-rendered\n      // style tags - source maps in <style> only works if the style tag is\n      // created and inserted dynamically. So we remove the server rendered\n      // styles and inject new ones.\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  if (isOldIE) {\n    // use singleton mode for IE9.\n    var styleIndex = singletonCounter++\n    styleElement = singletonElement || (singletonElement = createStyleElement())\n    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)\n    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)\n  } else {\n    // use multi-style-tag mode in all other cases\n    styleElement = createStyleElement()\n    update = applyToTag.bind(null, styleElement)\n    remove = function () {\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  update(obj)\n\n  return function updateStyle (newObj /* StyleObjectPart */) {\n    if (newObj) {\n      if (newObj.css === obj.css &&\n          newObj.media === obj.media &&\n          newObj.sourceMap === obj.sourceMap) {\n        return\n      }\n      update(obj = newObj)\n    } else {\n      remove()\n    }\n  }\n}\n\nvar replaceText = (function () {\n  var textStore = []\n\n  return function (index, replacement) {\n    textStore[index] = replacement\n    return textStore.filter(Boolean).join('\\n')\n  }\n})()\n\nfunction applyToSingletonTag (styleElement, index, remove, obj) {\n  var css = remove ? '' : obj.css\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = replaceText(index, css)\n  } else {\n    var cssNode = document.createTextNode(css)\n    var childNodes = styleElement.childNodes\n    if (childNodes[index]) styleElement.removeChild(childNodes[index])\n    if (childNodes.length) {\n      styleElement.insertBefore(cssNode, childNodes[index])\n    } else {\n      styleElement.appendChild(cssNode)\n    }\n  }\n}\n\nfunction applyToTag (styleElement, obj) {\n  var css = obj.css\n  var media = obj.media\n  var sourceMap = obj.sourceMap\n\n  if (media) {\n    styleElement.setAttribute('media', media)\n  }\n\n  if (sourceMap) {\n    // https://developer.chrome.com/devtools/docs/javascript-debugging\n    // this makes source maps inside style tags work properly in Chrome\n    css += '\\n/*# sourceURL=' + sourceMap.sources[0] + ' */'\n    // http://stackoverflow.com/a/26603875\n    css += '\\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'\n  }\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = css\n  } else {\n    while (styleElement.firstChild) {\n      styleElement.removeChild(styleElement.firstChild)\n    }\n    styleElement.appendChild(document.createTextNode(css))\n  }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-style-loader/lib/addStylesClient.js\n// module id = 8\n// module chunks = 0","/**\n * Translates the list format produced by css-loader into something\n * easier to manipulate.\n */\nmodule.exports = function listToStyles (parentId, list) {\n  var styles = []\n  var newStyles = {}\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i]\n    var id = item[0]\n    var css = item[1]\n    var media = item[2]\n    var sourceMap = item[3]\n    var part = {\n      id: parentId + ':' + i,\n      css: css,\n      media: media,\n      sourceMap: sourceMap\n    }\n    if (!newStyles[id]) {\n      styles.push(newStyles[id] = { id: id, parts: [part] })\n    } else {\n      newStyles[id].parts.push(part)\n    }\n  }\n  return styles\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-style-loader/lib/listToStyles.js\n// module id = 9\n// module chunks = 0"],"sourceRoot":""}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-img-preview",
 3 |   "description": "An image input preview component",
 4 |   "version": "1.1.1",
 5 |   "main": "dist/vue-img-preview.js",
 6 |   "author": "Dameety <djdamilola01@gmail.com>",
 7 |   "License": "MIT",
 8 |   "private": false,
 9 |   "scripts": {
10 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
11 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git@github.com:dameety/vue-image-preview.git"
16 |   },
17 |   "keywords": [
18 |     "vue image",
19 |     "vue image input",
20 |     "vue preview",
21 |     "vue image preview"
22 |   ],
23 |   "dependencies": {
24 |     "vue": "^2.2.1"
25 |   },
26 |   "devDependencies": {
27 |     "babel-core": "^6.0.0",
28 |     "babel-loader": "^6.0.0",
29 |     "babel-preset-latest": "^6.0.0",
30 |     "cross-env": "^3.0.0",
31 |     "css-loader": "^0.25.0",
32 |     "file-loader": "^0.9.0",
33 |     "vue-loader": "^11.1.4",
34 |     "vue-template-compiler": "^2.2.1",
35 |     "webpack": "^2.2.0",
36 |     "webpack-dev-server": "^2.2.0"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import vueImgPreview from './vue-img-preview.vue'
2 | export {vueImgPreview}
3 | 


--------------------------------------------------------------------------------
/src/vue-img-preview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 
  3 |     <div class="vue-img-preview-container">
  4 | 
  5 |         <img class="vue-img-preview" :src=getSetImage :alt=altText v-if="getSetImage">
  6 | 
  7 |        	<button id="vue-img-preview-button" :style="[buttonStyle]" v-if="pickerStyle !== 'regular'">
  8 | 	        <input type="file" accept="image/*" :name=inputName @change="chooseImage">
  9 | 		    <span>{{ buttonText }}</span>
 10 | 		</button>
 11 | 
 12 | 		<div class="form-group" v-if="pickerStyle === 'regular'">
 13 | 	        <input type="file" accept="image/*" class="form-control" :name=inputName @change="chooseImage">
 14 |         </div>
 15 | 
 16 |     </div>
 17 | 
 18 | </template>
 19 | 
 20 | <script>
 21 | 	export default {
 22 | 
 23 | 		props: {
 24 | 
 25 | 			defaultImage: {
 26 | 		  		type: String,
 27 | 		    	default: "",
 28 | 		  	},
 29 | 
 30 | 		  	inputName: {
 31 | 		  		type: String,
 32 | 		  		default: "file",
 33 | 		  	},
 34 | 
 35 | 		  	bgColor: {
 36 | 		  		type: String,
 37 | 		  		default: "#037B38"
 38 | 		  	},
 39 | 
 40 | 		  	textColor: {
 41 | 		  		type: String,
 42 | 		  		default: "#ffffff"
 43 | 		  	},
 44 | 
 45 | 		  	altText: {
 46 | 		  		type: String,
 47 | 		  		default: "vue img preview"
 48 | 		  	},
 49 | 
 50 | 		  	buttonText: {
 51 | 		  		type: String,
 52 | 		  		default: "Choose an image"
 53 | 		  	},
 54 | 
 55 | 		  	pickerStyle: {
 56 | 		  		type: String,
 57 | 		  		default: "regular"
 58 | 		  	}
 59 | 
 60 | 		},
 61 | 
 62 | 		data () {
 63 | 			return {
 64 | 				setImage: null,
 65 | 				buttonStyle: {
 66 | 					backgroundColor: this.bgColor,
 67 | 					color: this.textColor,
 68 | 				}
 69 | 			}
 70 | 		},
 71 | 
 72 | 		computed: {
 73 | 
 74 | 			getSetImage () {
 75 | 				return this.setImage !== null ? this.setImage : this.defaultImage
 76 | 			},
 77 | 
 78 | 		},
 79 | 
 80 | 	    methods: {
 81 | 
 82 | 	        chooseImage (e) {
 83 | 
 84 | 	        	let files = e.target.files;
 85 | 
 86 | 	        	if(files.length === 0) {
 87 | 	        		this.setImage = null
 88 | 	        		return
 89 | 	        	}
 90 | 
 91 | 	        	let reader = new FileReader();
 92 | 	        	reader.onload = (e) => {
 93 |                     this.setImage = e.target.result;
 94 |                 }
 95 | 
 96 |                 reader.readAsDataURL(files[0]);
 97 | 
 98 | 	        },
 99 | 
100 | 	    },
101 | 
102 | 	}
103 | </script>
104 | 
105 | <style>
106 | 
107 | 	@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css);
108 | 
109 | 	/**
110 | 	 * the container div for
111 | 	 * the whole plugin template
112 | 	 */
113 | 	.vue-img-preview-container {
114 | 		height: 100%;
115 | 		width: 100%;
116 | 	}
117 | 
118 | 	/**
119 | 	 * the class target the
120 | 	 * preview image
121 | 	 */
122 | 	.vue-img-preview {
123 | 		height: 100%;
124 | 		width: 100%;
125 | 		margin-bottom: 5px;
126 | 	}
127 | 
128 | 	#vue-img-preview-button {
129 | 	    margin-top: 5px;
130 | 	    position: relative;
131 | 	    overflow: hidden;
132 | 
133 | 	}
134 | 
135 | 	#vue-img-preview-button input {
136 | 		width: 100%;
137 | 	    cursor: pointer;
138 | 	    position: absolute;
139 | 	    top: 0;
140 | 	    bottom: 0;
141 | 	    left: 0;
142 | 	    right: 0;
143 | 	    opacity: 0.001
144 | 	}
145 | 
146 | 	/**
147 | 	 * the normal file picker input
148 | 	 * setting border and color
149 | 	 */
150 | 	#vue-img-preview-regular {
151 | 
152 | 		border-style: solid;
153 | 		border-color: #cccccc;
154 | 		border-width: 1px;
155 | 
156 | 	}
157 | 
158 | 	/**
159 | 	 * the normal file picker input
160 | 	 * setting the margins
161 | 	 */
162 | 	#vue-img-preview-regular input {
163 | 
164 | 		margin-top: 10px;
165 | 		margin-bottom: 10px;
166 | 		margin-left: 10px;
167 | 
168 | 	}
169 | 
170 | </style>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/index.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'vue-img-preview.js',
10 |     libraryTarget: 'umd'
11 |   },
12 |   module: {
13 |     rules: [
14 |       {
15 |         test: /\.vue$/,
16 |         loader: 'vue-loader',
17 |         options: {
18 |           loaders: {
19 |           }
20 |           // other vue-loader options go here
21 |         }
22 |       },
23 |       {
24 |         test: /\.js$/,
25 |         loader: 'babel-loader',
26 |         exclude: /node_modules/
27 |       },
28 |       {
29 |         test: /\.(png|jpg|gif|svg)$/,
30 |         loader: 'file-loader',
31 |         options: {
32 |           name: '[name].[ext]?[hash]'
33 |         }
34 |       }
35 |     ]
36 |   },
37 |   resolve: {
38 |     alias: {
39 |       'vue$': 'vue/dist/vue.esm.js'
40 |     }
41 |   },
42 |   devServer: {
43 |     historyApiFallback: true,
44 |     noInfo: true
45 |   },
46 |   performance: {
47 |     hints: false
48 |   },
49 |   devtool: '#eval-source-map'
50 | }
51 | 
52 | if (process.env.NODE_ENV === 'production') {
53 |   module.exports.devtool = '#source-map'
54 |   module.exports.plugins = (module.exports.plugins || []).concat([
55 |     new webpack.DefinePlugin({
56 |       'process.env': {
57 |         NODE_ENV: '"production"'
58 |       }
59 |     }),
60 |     new webpack.optimize.UglifyJsPlugin({
61 |       sourceMap: true,
62 |       compress: {
63 |         warnings: false
64 |       }
65 |     }),
66 |     new webpack.LoaderOptionsPlugin({
67 |       minimize: true
68 |     })
69 |   ])
70 | }
71 | 


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