File reader doesn't load first time - VUE.JS

Question

I have a problem with a file reader, it load the file never the fist time, and it's like a queue. I mean: it start from the second time I select a file but it upload the first.

Can I solve this?

Here the code.

        <v-text-field
          v-if="switch1"
          label="Upload Fattura"
          @click='onPickFile'
          v-model='fatturaFileName'
          prepend-icon="mdi-paperclip"
        ></v-text-field>
        <input
          type="file"
          style="display: none"
          ref="fileInput"
          accept="text/xml"
          @change="onFilePicked"
        >


  onPickFile () {
    this.$refs.fileInput.click();
     }`

 onFilePicked (event) {
      if (event) event.preventDefault();
      var files = event.target.files[0];
      if (files !== undefined) {
        this.fatturaFileName = files.name;

        // If valid, continue
        const fr = new FileReader();
        fr.readAsText(files);
        fr.addEventListener('load', () => {
          this.fatturaUpload = fr.result;
        });
      } else {
         this.fatturaFileName = ''
         this.fatturaFileObject = null
      }
      console.log(this.fatturaUpload);
  }

i think you should do something like `fr.addEventListener('load', (e) => { this.fatturaUpload = e.target.result; });` — Boussadjra Brahim, Sep 01 '19 at 09:19
What about `fr.onloadend = () => {this.fatturaUpload = fr.result}` ? — talkhabi, Sep 01 '19 at 09:31
@BoussadjraBrahim always the same. Check here with a xml file: https://codepen.io/cenzowm/pen/bGbrOBd — cenzowm, Sep 01 '19 at 09:43

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

It works fine using the following code :

onFilePicked (event) {
      if (event) event.preventDefault();
      var fichier = event.target.files[0];
      if (fichier != undefined) {
           const fr = new FileReader();
        fr.readAsDataURL(fichier);
        var reader = new FileReader();
        let file = fichier;
        reader.readAsText(file, "UTF-8");
        reader.onload = evt => {
            console.log("1",evt.target.result)
        };
      } else {
        console.log("2",fichier)
         this.fatturaFileName = ''
         this.fatturaFileObject = null
      }
      console.log("3",this.fatturaUpload);
       this.fatturaFileName = '';
       this.fatturaFileObject = null;

    }

See the Pen Vuetify Template by boussadjra (@boussadjra) on CodePen.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 01 '19 at 09:57

Boussadjra Brahim

82,684
19
144
164

Can I have always (even the first time) the right value in a var? Because I need it! – cenzowm Sep 01 '19 at 10:07
i didn't understand what do you mean – Boussadjra Brahim Sep 01 '19 at 10:10
In this way I can print the right value, but it will be always "" out of the load scope!! – cenzowm Sep 01 '19 at 10:11
reader.onload = evt => { ciccio = evt.target.result; console.log("1",evt.target.result) }; I want a variable with the result out this peace of code – cenzowm Sep 01 '19 at 10:12
you could assign `this.fatturaUpload= evt.target.result` after `console.log('1',...)` and add computed property based on this value in order to keep that reactive – Boussadjra Brahim Sep 01 '19 at 10:16
I think the main problem is filereader is async – cenzowm Sep 01 '19 at 10:18
yes, for this you need another computed property based on `this.fatturaUpload` – Boussadjra Brahim Sep 01 '19 at 10:20
What I have to put in this computed property? – cenzowm Sep 01 '19 at 10:23
something like parsing the content of `this.fatturaUpload` – Boussadjra Brahim Sep 01 '19 at 10:24
Can u show me a little example on codepen? – cenzowm Sep 01 '19 at 10:27
check this https://codepen.io/boussadjra/pen/wvwqRda?editors=0011 and use that property in future needs like rendering content in DOM like `
{{parsedContent}}
` – Boussadjra Brahim Sep 01 '19 at 10:34
But I need it in JS not in the dom! – cenzowm Sep 01 '19 at 10:41
where ? please provide an use case – Boussadjra Brahim Sep 01 '19 at 10:41
https://codepen.io/cenzowm/pen/bGbrOBd?editors=1111 – cenzowm Sep 01 '19 at 10:44
why don't you put that logic inside async callback ? – Boussadjra Brahim Sep 01 '19 at 10:48

File reader doesn't load first time - VUE.JS

1 Answers1