Assing uploaded file value to input field multiple times using vue.js

Question

Assign filename to input field on upload and then show success message working fine,but when i try to delete file and upload again it's not working!

new Vue({
  el: "#app",
  data() {
    return {
      form: {
        message: '',
        fileurl: ''
      },
      loading: false
    }
  },
  methods: {


    uploadImage(event) {

      this.form.fileurl = 'uploaded!'
    },
    deleteFile(furl) {

      this.form.fileurl = ''
    }

  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

span {
  color: red;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>


<div id="app">
  <h3>
    File Upload / remove Demo
  </h3>
  <hr />

  <div class="custom-file attach_file" v-show="!form.fileurl">

    <input type="file" id="file" name="file" @change="uploadImage($event)">

    <input type="text" v-model="form.fileurl">

  </div>

  <p v-if="form.fileurl"> {{ form.fileurl }} <span @click="deleteFile(form.fileurl)">Delete</span></p>

</div>

I am not getting any console error as well.

This is what i have tried so far. Can you guys please have a look at this!

ittus · Accepted Answer · 2018-05-18 10:46:42Z

The problem is that @change is not trigger when you choose the same file. The simplest solution is reset value of input when you click delete

this.$refs.fileToUpload.value = '';

new Vue({
  el: "#app",
  data() {
    return {
      form: {
        message: '',
        fileurl: ''
      },
      loading: false
    }
  },
  methods: {


    uploadImage(event) {

      this.form.fileurl = 'uploaded!'
    },
    deleteFile(furl) {

      this.form.fileurl = ''
      this.$refs.fileToUpload.value = '';
    }

  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

span {
  color: red;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>


<div id="app">
  <h3>
    File Upload / remove Demo
  </h3>
  <hr />

  <div class="custom-file attach_file" v-show="!form.fileurl">

        <input type="file" id="file" name="file"  class="custom-file-input" @change="uploadImage($event)" ref="fileToUpload">

    <input type="text" v-model="form.fileurl">

  </div>

  <p v-if="form.fileurl"> {{ form.fileurl }} <span @click="deleteFile(form.fileurl)">Delete</span></p>

</div>

Asim Shahzad · Accepted Answer · 2018-05-18 10:17:12Z

0

You need to clear you input field first.

Update your upload method with this.

 uploadImage(event) {
     this.form.fileurl =  'uploaded!'
     this.success = false
     this.$nextTick(() => {
     this.success = true
 })

Have a look at this working demo

https://jsfiddle.net/asimshahzad/8c9pcfys/

answered May 18, 2018 at 10:17

Asim Shahzad

1,60912 silver badges18 bronze badges

Collectives™ on Stack Overflow

Assing uploaded file value to input field multiple times using vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related