CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuex
Евгений Тимченко
Евгений Тимченко

Reputation: 183

How to clean input in Vue.Js

im have little problem with clean input after functions complete Can someone tell me what im do wrong After functions is complete im try to clean the input But i dont have any result with this this is my code in Vue Component

<form role="form">
  <div class="card-body">
    <div class="form-group">
      <label for="file">Upload File</label>
      <div class="input-group">
        <div class="custom-file">
          <input
            type="file"
            class="custom-file-input"
            id="file"
            ref="file"
            v-on:change="handleFileUpload"
          />
          <label class="custom-file-label" for="file">Choose file</label>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <button v-on:click="onClickUploadAccounts" class="btn btn-primary">Upload</button>
    <button v-on:click="onClickSetLoader" class="btn btn-primary">Loader</button>
  </div>
</form>

methods: {
        handleFileUpload(){
            this.file = this.$refs.file.files[0]
        },
        onClickUploadAccounts(){
            let formData = new FormData();
            formData.append('file', this.file);
            this.$store.commit('imports/setIsLoad', true)
            axios.post( '/admin-account-import',
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
            ).then(() => {
                console.log('SUCCESS!!')
                this.$store.commit('imports/setIsLoad', false)
                this.file = ''
                formData.delete('file')
                formData.append('file', this.file = '')
            })
                .catch(() => {
                    console.log('FAILURE!!');
                });
        },
        onClickSetLoader()
        {
            this.$refs.file.files = ''
        },

    },

Upvotes: 1

Views: 435

Answers (1)

Birante
Birante

Reputation: 709

You need to set this.file to null. in your data

 data: function () { 
  return {
   file: null 
 }
}

And you can remove in your methods

this.file = ''
formData.delete('file')
formData.append('file', this.file = '')

Upvotes: 2

Related Questions