VueJS re-read file input when selecting the same file

Question

What i am trying to achieve is to select a file and read its contents in a new dialog box.

I have it working until the point i try and select the same file as the previous loaded one, selecting a different file works perfectly.

I have tried clearing the file input which appears to work but it still doesn't select the file again.

See my example below, any help much appreciated!

Codepen

new Vue({
  el: "#app",
  data: () => ({
    importedData: null,
    dialogImport: false
  }),
  watch: {
    importedData: {
      handler() {
        this.checkData();
      },
      deep: true
    }
  },
  methods: {
    openFileExplorer() {
      this.$refs.fileInputImport.value = "";
      this.$refs.fileInputImport.click();
    },
    selectFile(e) {
      const self = this;
      const file = e.target.files[0];
      let reader = new FileReader();
      reader.onload = e => {
        self.importedData = reader.result;
        self.checkedData = true;
      };
      reader.readAsText(file);
    },
    checkData() {
      // check the file
      this.dialogImport = true;
    }
  }
});

<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">

      <input ref="fileInputImport" type="file" name="fileInputImport" @change="selectFile">

      <v-btn color="primary" @click.stop="openFileExplorer()">Choose file</v-btn>


      <v-dialog v-model="dialogImport" fullscreen transition="dialog-bottom-transition" :overlay="false" scrollable>
        <v-container class="ma-0 pa-0 white" style="max-width:100%">
          <v-layout row wrap justify-left>

            <v-card style="width:100%;">
              <v-toolbar class="amber lighten-1 elevation-0">
                <v-toolbar-title>Imported data</v-toolbar-title>
                <v-spacer></v-spacer>
                <div>
                  <v-flex xs12>
                    <v-container fluid>
                      <v-layout row align-center justify-center>

                        <v-flex>
                          <v-tooltip bottom close-delay="0">
                            <v-btn icon slot="activator" @click.native="dialogImport = false">
                              <v-icon>close</v-icon>
                            </v-btn>
                            <span>Close</span>
                          </v-tooltip>
                        </v-flex>

                      </v-layout>
                    </v-container>
                  </v-flex>
                </div>
              </v-toolbar>
              <div>{{ importedData }}</div>
            </v-card>
          </v-layout>
        </v-container>
      </v-dialog>

    </div>
  </v-app>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>

Jagan · Accepted Answer · 2017-12-20 07:33:15Z

1

I don't think watch is required. Here is the updated codepen

It was able to read the text and assigns it to importedData. But the importedData has the same content when you select same file, watch is not tried the this.checkData().

Either you reset importedData when your close the dialog or remove the watch as i did.

edited Dec 20, 2017 at 7:33

answered Dec 20, 2017 at 7:27

Jagan

5,2567 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS re-read file input when selecting the same file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related