vue upload image with preview

upload file image with preview and button remove base on vue.js

by oktaviardi pratama

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div id="DealsApp">
  <div class="form-group mb-3">
                  <label for="deal-name">Deal Banner <span class="text--alert">*</span></label>
                  <keep-alive>
                    <component-image-upload  :banner="newDeal.banner" /> 
                  </keep-alive>
                </div>
</div>

CSS

.w-100{width:100%}.w-50{width:50%}.text-none{text-align:none!important}.text-block{text-align:block!important}.text-inline-block{text-align:inline-block!important}.text-flex{text-align:flex!important}.text-decoration-0{text-decoration:none}.text-decoration-0:hover,.text-decoration-0:focus{text-decoration:none}.text-sm{font-size:13px!important;line-height:13px!important}.font-weight-bold{font-weight:700}.font-weight-normal{font-weight:400}.font-weight-light{font-weight:light}.text-shadow-none{text-shadow:none!important}.text-shadow-sm{text-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.text-shadow{text-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.text-shadow-lg{text-shadow:0 1rem 3rem...

JavaScript

let dummy_data = {
  status : ["Pending","Publish","Completed","Cancelled"],
  outlet_name : ["jakarta pusat","jakarta barat","jakarta timur","jakarta selatan","jakarta utara"],
  merchant_name : ["Mc. Donald's","KFC","Carls Burger","Ayam Sabana"],
  success_fee_percent:[10,20,30,40,50,60,70]

}

let rangeConfig = {
  "buttonClasses": "btn btn-sm",
  "applyButtonClasses": "btn-blue",
  "cancelClass": "btn-negative",
  "maxSpan": {
    "days": 30
  }
}



Vue.component('component-image-upload', {
	props:['banner','inputFileChanged'],
	template: `<div class="component component-banner-upload form-control" :class="{ 'is-filled': this.banner.path }"><input type="file" class="" name="deal-banner" id="deal-banner" aria-describedby="deal-banner" @change="uploadBanner()" required="required">
                      
  <button type="button" @click="removeBanner()" v-if="this.banner.path" class="btn btn-negative btn-sm button-remove"><div class="fa fa-trash"></div> remove</button>

  <div class="info">
    <article v-if="this.banner.path == ''" v-model="this.banner.path">
      <i class="fa fa-cloud-upload"></i>
      <span class="d-block checkable">Click to browse</span>
      <span class="d-block">
          We currently support JPG, JPEG and PNG.</span>
    </article>
    
    <article v-else class="d-none onhover">
        <span class="d-block checkable text--white" v-html="this.banner.name">
          name of file here
        </span>
        <span class="d-block">
            <small>Click to replace</small></span>
    </article>
  </div></div>`,
  created:function(){
  },
	mounted: function(){
  	var self = this;
    var input = $('input[name="deal-banner"]');
    input.on("change",function(event){
      self.$emit('inputFileChanged',self.banner);
    })
  },
  methods:{
    uploadBanner(){
      let self = this;
      let tag = event.target;
      let singleFile = event.target.files[0];
      self.banner.name =  singleFile.name.replace(/\s/g, '');
      
      if...