0

I have a component that should to handle the upload file. It holds a bootstrap vue progress component. I would to handle file loading of filereader. This is part of vue.js component:

<b-form-file accept=".jpg, .png, .gif, jpeg" v-model="file" size="sm" @change="fileUpload"></b-form-file>
<b-progress :value="progress" :max="maxvalue" show-progress animated></b-progress>

This is my data:

  data () {
    return {
      ...
      file:null,
      progress:0,
      maxvalue:100
    }
  },

This is my code:

fileUpload(ev){
   var files = ev.target.files || ev.dataTransfer.files;
   const file=files[0];
   var reader = new FileReader();
   let _vue=this;
   reader.onprogress=function(e){
      let progress=Math.round((e.loaded / e.total) * 100);
      if(progress<100){_vue.progress=progress;}

   };

   reader.onload = function(event) {
      var dataURL = event.target.result;
      let image=new Image();
      if(file.size>3000000) {
        _vue.form.file=null;
        alert('Dimensioni file eccessive');
        return;
      }
      image.onload=function(){
         _vue.$refs.card.style.maxWidth='250px';
         _vue.$refs.card.style.width=`${this.width}px`;
      }
      image.src=dataURL;
      _vue.form.file=dataURL;
   };

 reader.readAsDataURL(file);
}

If I set an alert, I get the progress values else no. I noted if I setting two alert sequentially, I see the first alert for every value until the end and then the other one in reverse.

Sorry for my english

Kraken
  • 111
  • 11

1 Answers1

0

I resolved. The link that resolved my issue: link

Thanks

Kraken
  • 111
  • 11