0

I've build a file input with BootstrapVue. I'm saving the v-model in a vuex state. Checking the values via the devtools the values seems to be saved just fine.

The problem is that input is inside a multistep form, where each step is a dynamic component. If I switch to another step and then return to the one containing this input, it shown as no file have been uploaded.

Unfortunately, I can't use keep-alive as solution, as the form is validated with vee-validate:as noted this related issue deactivated are still validated. So, for example, if I insert invalid data on step 3 and then return back on step 2, I can't proceed anymore on step 3 because of that invalid data.

Any idea on what I'm doing wrong? As final note I'd add that I've used the same logic for other kind of field (textfield, radiofield) and those just work fine.

<template>
  <b-form-group>
    <b-form-file
      v-model="fileValue"
      ref="file-input"
      placeholder="Seleziona i file"
      drop-placeholder="Drop file here..."
      :multiple="multiple ? true : false"
      accept=".jpg,.jpeg,.gif,.png,.pdf"
    />
    <b-button
      @click="clearFiles"
      :disabled="Object.keys(fileValue).length === 0"
      >Rimuovi i file
    </b-button>
  </b-form-group>
</template>

<script>
export default {
  components: {},
  props: {
    multiple: {
      type: Boolean,
      default: true
    },
    getterName: {
      type: String,
      required: true
    },
    setterName: {
      type: String,
      required: true
    }
  },
  computed: {
    fileValue: {
      get() {
        return this.$store.getters["form/files"];
      },
      set(value) {
        this.$store.dispatch(this.setterName, value);
      }
    }
  },
  methods: {
    clearFiles() {
      const emptyValue = this.multiple ? [] : "";
      this.$store.dispatch(this.setterName, emptyValue);
    }
  }
};
</script>
Giuseppe
  • 379
  • 4
  • 13
  • 1
    That is because `` inputs do not allow you to _set_ its value, other than setting it to `null` or empty string. `` is just a wrapper for native `` input. When your component with the file input is removed from DOM (destroyed), and then restored, it rejects the file (or array of files) that you are trying to set it back to. – Troy Morehouse Apr 02 '20 at 19:17
  • Thank you, I obviously didn't know that! That was right on the point. Btw, I'm testing filepond as solution and it allows to preload a list of files. – Giuseppe Apr 06 '20 at 07:22

0 Answers0