Why the value of input file missing when I input the another input on the vue component?

Question

I have two component

My first component (parent component) like this :

From the parent component, it will call child component (form input component)

My child component are input type text, input type date, input type file and input type number. I combine all of them into 1 component

The child component like this :

Because I merge into 1 komponent, I get a new problem

If I input the input type file, the value of file will show in the input type file

But if I input in the input type text, the value of input type file missing

Why the value of input type file missing?

Demo:

Vue.component('form-input', {
  template: "#form-input-tpl",
  name: "form-input",
  props: {
    'id': String,
    'name': String,
    'isRequired': {type: Boolean, default: true},
    'type': { type: String, default () {if (this.type == 'number') {return 'number'} else {return 'text'}}},
    'value': { type: [String, Number] }
  },
  methods: {
    applySelected(e) { this.$emit('triggerChange', e) }
  }
});

new Vue({
  el: '#app',
  data: {
    name: null,
    birthDate: null,
    mobileNumber: null
  },
  methods: {
    onFileChange(e) {
      // ...
    }
  }
})






  Select a file, then type a name. The file will be reset.
  
    Name
    Date of Birth
    Avatar
    Mobile Number

acdcjunior · Accepted Answer

So the problem is:

After you have chosen a file in the , if you type something in the , the erases. Why is that?

This happens because when you edit , Vue will "repaints" the components.

And when it repaints the , it will go back to "Nothing selected" because it is a new .

Solution: Keeping the files' values

As Kaiido points in the comments, in latest versions of browsers, you can set the files of a in a standard way.

So this is what the code below does. It watches for the value property (that comes when the parent uses v-model and sets its value to the .files property of the .

We have to use two (with v-if/v-else) because when it is a , the :value property can be set, the event handler should be different (@change="$emit('input', $event.target.files)") and we want to keep a ref so we can set the files.

Full working demo below.

Vue.component('form-input', {
  template: "#form-input-tpl",
  name: "form-input",
  props: {
    'id': String,
    'name': String,
    'isRequired': {type: Boolean, default: true},
    'type': {type: String, default: 'text'},
    'value': {type: [String, Number, FileList, DataTransfer]}
  },
  mounted() {
    // set files upon creation or update if parent's value changes
    this.$watch('value', () => {
      if (this.type === "file") { this.$refs.inputFile.files = this.value; }
    }, { immediate: true });
  }
});

new Vue({
  el: '#app',
  data: {
    name: null,
    birthDate: null,
    mobileNumber: null,
    files: null
  }
})






  
    Name
    Date of Birth
    Avatar
    Mobile Number

Using your file-change event and validate function:

Vue.component('form-input', {
  template: "#form-input-tpl",
  name: "form-input",
  props: {
    'id': String,
    'name': String,
    'isRequired': {type: Boolean, default: true},
    'type': {type: String, default: 'text'},
    'value': {type: [String, Number, FileList, DataTransfer]}
  },
  mounted() {
    // set files upon creation or update if parent's value changes
    this.$watch('value', () => {
      if (this.type === "file") { this.$refs.inputFile.files = this.value; }
    }, { immediate: true });
  }
});

new Vue({
  el: '#app',
  data: {
    name: null,
    birthDate: null,
    mobileNumber: null,
    filesVModel: null,
    allowableTypes: ['jpg', 'jpeg', 'png'],
    maximumSize: 1000,
    files: null
  },
  methods: {
    onFileChange(e) {
      console.log('onfilechange!');
      let self = this
      this.validate(e.target.files[0])
        .then(function(res) {
          let files = e.target.files,
            reader = new FileReader()
          // if any values
          if (files.length) {
            self.removeErrorMessageUpload()
            self.files = files[0]
            reader.onload = (e) => {
              self.updateProfileAvatar(e.target.result)
            }
            reader.readAsDataURL(files[0])
          }
        })
        .catch(function(err) {
          // do something in the case where the image is not valid
          self.displayErrorMessageUpload(err)
        })
    },
    validate(image) {
      let self = this
      return new Promise(function(resolve, reject) {
        // validation file type
        if (!self.allowableTypes.includes(image.name.split(".").pop().toLowerCase())) {
          reject("Type " + image.name.split(".").pop().toLowerCase() + " is not allowed.")
        }
        // validation file size
        if (image.size > self.maximumSize) {
          reject("Image size " + image.size + " is larger than allowed " + self.maximumSize + ".")
        }
        // validation image resolution
        let img = new Image()
        img.src = window.URL.createObjectURL(image)
        img.onload = function() {
          let width = img.naturalWidth,
            height = img.naturalHeight

          window.URL.revokeObjectURL(img.src)

          if (width != 100  && height != 100) {
            reject("Width and height are " + width + " and " + height + " and not both 100")
          } else {
            resolve()
          }
        }
      })
    },
    displayErrorMessageUpload(msg) {
      console.log('displayErrorMessageUpload', msg);
    },
    removeErrorMessageUpload() {
      console.log('removeErrorMessageUpload');
    },
    updateProfileAvatar(result) {
      console.log('updateProfileAvatar', result);
    }
  }
})






  
    Name
    Date of Birth
    Avatar
    Mobile Number

Why the value of input file missing when I input the another input on the vue component?

Demo:

Answers (1)

Solution: Keeping the files' values

Related Questions