{"version":3,"sources":["webpack:///./src/components/core/UPhotoUpload.vue?48f3","webpack:///./src/components/core/UPhotoUpload.vue?d134","webpack:///src/components/core/UPhotoUpload.vue","webpack:///./src/components/core/UPhotoUpload.vue?82c2","webpack:///./src/components/core/UPhotoUpload.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","disabled","ref","hovering","style","backgroundImage","directives","name","rawName","value","preview","expression","staticStyle","_v","attrs","on","handleImage","$event","staticRenderFns","props","methods","file","formData","FormData","append","$emit","res","data","event","files","target","length","reader","FileReader","onload","result","uploadImage","readAsDataURL","computed","image","component"],"mappings":"kHAAA,yBAAqe,EAAG,G,mECAxe,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,gBAAgBC,MAAMP,EAAIQ,SAAW,WAAa,WAAW,CAACJ,EAAG,MAAM,CAACK,IAAI,WAAWH,YAAY,WAAWC,MAAM,CAACG,SAAUV,EAAIU,UAAUC,MAAM,CAAEC,gBAAiBZ,EAAIY,kBAAmB,CAACR,EAAG,OAAO,CAACS,WAAW,CAAC,CAACC,KAAK,OAAOC,QAAQ,SAASC,QAAShB,EAAIgB,OAAShB,EAAIiB,SAAUC,WAAW,wBAAwBZ,YAAY,sBAAsBa,YAAY,CAAC,MAAQ,UAAU,CAACnB,EAAIoB,GAAG,mBAAmBhB,EAAG,MAAMJ,EAAIoB,GAAG,eAAehB,EAAG,MAAMJ,EAAIoB,GAAG,oBAAoBhB,EAAG,QAAQ,CAACE,YAAY,aAAae,MAAM,CAAC,KAAO,OAAO,SAAWrB,EAAIQ,UAAUc,GAAG,CAAC,OAAStB,EAAIuB,YAAY,UAAY,SAASC,GAAQxB,EAAIU,UAAW,GAAM,UAAY,SAASc,GAAQxB,EAAIU,UAAW,WACzxBe,EAAkB,G,qBCqFtB,GACEC,MAAO,CAAC,QAAS,WAAY,QAC7BC,QAAS,CACP,YAAYC,GACV,MAAMC,EAAW,IAAIC,SACrBD,EAASE,OAAO,OAAQH,GACxBC,EAASE,OAAO,KAAM,IACtB,EAAN,iDACA,EACA,CACQ,QAAR,CACU,eAAV,sBACU,gBAAV,kCAGA,SACQ9B,KAAK+B,MAAM,WAAYC,EAAIC,SAG/B,YAAYC,GACV,GAAIlC,KAAKO,SACP,OAEF,IAAI4B,EAAQD,EAAME,OAAOD,MACzB,GAAqB,IAAjBA,EAAME,OACR,OAEF,IAAIC,EAAS,IAAIC,WACjBD,EAAOE,OAAS,IACdxC,KAAKgB,QAAUkB,EAAME,OAAOK,OAC5BzC,KAAK+B,MAAM,QAASI,EAAM,IAC1BnC,KAAK0C,YAAYP,EAAM,KAEzBG,EAAOK,cAAcR,EAAM,MAG/B,OACE,MAAO,CACL1B,UAAU,EACVO,QAAS,OAGb4B,SAAU,CACR,kBACE,IAAIC,EAAQ7C,KAAKgB,SAAWhB,KAAKe,MACjC,OAAK8B,EAGE,QAAQA,MAFN,QCpIsV,I,wBCQjWC,EAAY,eACd,EACAhD,EACA0B,GACA,EACA,KACA,KACA,MAIa,aAAAsB,E","file":"js/chunk-28a4e4ef.31b61cfb.js","sourcesContent":["import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UPhotoUpload.vue?vue&type=style&index=0&lang=css&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UPhotoUpload.vue?vue&type=style&index=0&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"photo-upload \",class:_vm.disabled ? 'disabled' : 'enabled'},[_c('div',{ref:\"uploader\",staticClass:\"uploader\",class:{hovering: _vm.hovering},style:({backgroundImage: _vm.backgroundImage})},[_c('span',{directives:[{name:\"show\",rawName:\"v-show\",value:(!(_vm.value || _vm.preview)),expression:\"!(value || preview)\"}],staticClass:\"upload-instructions\",staticStyle:{\"color\":\"black\"}},[_vm._v(\" Click or drag \"),_c('br'),_vm._v(\" file here \"),_c('br'),_vm._v(\" to upload... \")]),_c('input',{staticClass:\"file-photo\",attrs:{\"type\":\"file\",\"disabled\":_vm.disabled},on:{\"change\":_vm.handleImage,\"dragenter\":function($event){_vm.hovering = true},\"dragleave\":function($event){_vm.hovering = false}}})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"photo-upload \" :class=\"disabled ? 'disabled' : 'enabled'\">\n    <div class=\"uploader\" :class=\"{hovering: hovering}\" :style=\"{backgroundImage: backgroundImage}\" ref=\"uploader\">\n      <span v-show=\"!(value || preview)\" class=\"upload-instructions\" style=\"color: black;\">\n        Click or drag\n        <br>\n        file here\n        <br>\n        to upload...\n      </span>\n      <input class=\"file-photo\" type=\"file\" @change=\"handleImage\" @dragenter=\"hovering = true\"\n             @dragleave=\"hovering = false\" :disabled=\"disabled\"/>\n      <!--          <div class=\"image-border text-center\">-->\n      <!--            <div class=\"img-border-container\">-->\n      <!--             <img src=\"https://source.unsplash.com/random-->\n      <!--             \" alt=\"\" style=\"width:51px; height:38px\">   -->\n      <!--            <h6>-->\n      <!--              Drop your photo here or -->\n      <!--              <Span>   -->\n      <!--               Browse-->\n      <!--              </Span> -->\n      <!--            </h6>-->\n\n      <!--              <h6>-->\n      <!--               [Tip: This picture will be used to make your workshop poster. The recommended dimensions for this are -->\n      <!--               -->\n      <!--               <span>-->\n      <!--                 -->\n      <!--                 1800px X 1800px]-->\n      <!--              </span> -->\n      <!--              </h6>-->\n      <!--            </div>-->\n      <!--          </div>-->\n    </div>\n  </div>\n</template>\n\n<style>\n.uploader {\n  position: relative;\n  overflow: hidden;\n  width: 300px;\n  height: 250px;\n  background-color: #f3f3f3;\n  background-size: contain;\n  background-position: center center;\n  background-repeat: no-repeat;\n  border: 2px dashed #e8e8e8;\n}\n.enabled .uploader.hovering {\n  background-color: #bbb;\n}\n.enabled .uploader:hover {\n  background-color: skyblue;\n}\n.upload-instructions {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n  text-align: center;\n}\n.file-photo {\n  position: absolute;\n  width: 300px;\n  height: 400px;\n  top: -50px;\n  left: 0;\n  z-index: 2;\n  opacity: 0;\n}\n.enabled .file-photo {\n  cursor: pointer;\n}\n.uploader img {\n  position: absolute;\n  width: 100%;\n  top: -1px;\n  left: -1px;\n  z-index: 1;\n  border: none;\n}\n</style>\n\n<script>\nimport axios from \"axios\"\nexport default {\n  props: ['value', 'disabled', 'type'],\n  methods: {\n    uploadImage(file) {\n      const formData = new FormData();\n      formData.append(\"file\", file);\n      formData.append(\"id\", 75);\n      axios.post(this.$upskill.trainerUpload+\"/\"+this.type,\n          formData,\n          {\n            headers: {\n              'Content-Type': 'multipart/form-data',\n              'X-Auth-Secret': localStorage.getItem(\"ctoken\")\n            }\n          }\n      ).then((res) => {\n        this.$emit(\"uploaded\", res.data)\n      })\n    },\n    handleImage(event) {\n      if (this.disabled) {\n        return;\n      }\n      let files = event.target.files;\n      if (files.length === 0){\n        return;\n      }\n      let reader = new FileReader();\n      reader.onload = (event) => {\n        this.preview = event.target.result;\n        this.$emit('input', files[0]);\n        this.uploadImage(files[0])\n      };\n      reader.readAsDataURL(files[0]);\n    }\n  },\n  data() {\n    return {\n      hovering: false,\n      preview: null\n    }\n  },\n  computed: {\n    backgroundImage() {\n      let image = this.preview || this.value;\n      if (!image) {\n        return null;\n      }\n      return `url('${image}')`;\n    }\n  }\n}\n</script>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UPhotoUpload.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UPhotoUpload.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./UPhotoUpload.vue?vue&type=template&id=f43f47d4&\"\nimport script from \"./UPhotoUpload.vue?vue&type=script&lang=js&\"\nexport * from \"./UPhotoUpload.vue?vue&type=script&lang=js&\"\nimport style0 from \"./UPhotoUpload.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}