When I upload the first time one image and then remove it from the input and try again to upload, the image doesn't upload.

The way I'm doing it is I'm using the following code in my component and and when uploading image I'm emitting event upload where I set the file in field.

When I click triggerFileVisibility it deletes the name of the image from the input but it doesn't let me upload the same image again.

<template>
  <div >
    <v-file-input
      v-bind="$props"
      ref="fileUpload"
      accept="image/png, image/jpeg, image/svg"
      :placeholder="fileName ? fileName : $t(labelType)"
      prepend-icon="mdi-camera"
      :disabled="!!fileName"
      :error-messages="getInvalidFeedback"
      v-on:change="uploadFiles"
      @focus="formFieldOnFocus"
    ></v-file-input>
    <v-icon v-if="!!fileName"  @click="triggerFileVisibility">
      mdi-close
    </v-icon>
  </div>
</template>

<script>
export default {
  name: 'FileUpload',
  props: {
    fileName: {
      default: '',
      type: String,
    },
    labelType: {
      default: 'organization.uploadFile',
      type: String,
    },
    invalidFeedback: {
      default: '',
      type: String,
    },
    required: {
      type: Boolean,
      default: true,
    },
    v: {
      type: Object,
      default: () => null,
    },
  },
  computed: {
    getUploadedImage() {
      console.log('getUploadedImage');
      return this.fileName;
    },
    getInvalidFeedback() {
      console.log('getInvalidFeedback')
      if (this.v && this.v.$error) {
        return this.invalidFeedback;
      }
      return '';
    },
  },
  watch: {
    fileName: function(value, oldValue) {
      console.log(`fileName: new ${value} and OLD ${oldValue}`);
      this.$forceUpdate();
    },
    getFieldError: function(value) {
      if (value && this.v) {
        this.v.$touch();
      }
    },
  },
  methods: {
    clear() {
      this.$refs.fileUpload.reset();
      this.$emit('onchange', '');
    },
    uploadFiles(selectedFile) {
      console.log('UPLOAD');
      this.$emit('upload', selectedFile);
    },
    formFieldOnFocus(value) {
      console.log('formFieldOnFocus', this.$props);
      this.$emit('focus', value);
      if (this.v) {
        this.v.$reset();
      }
    },
    triggerFileVisibility() {
      console.log('triggerFileVisibility')
      this.$emit('upload', '');
    },
  },
};
</script>

<style scoped>
.file-upload-wrapper {
  position: relative;
}

.close-icon {
  position: absolute;
  top: 27%;
  right: 0;
  cursor: pointer;
}
</style>

CodePudding user response：

simple way you should use

v-model

in your code and after delete it clear this value

CodePudding user response：

My solution:

<v-file-input
  v-bind="$props"
  ref="fileUpload"
  accept="image/png, image/jpeg, image/svg"
  :placeholder="fileName ? fileName : $t(labelType)"
  prepend-icon="mdi-camera"
  :disabled="!!fileName"
  :error-messages="getInvalidFeedback"
  @change="uploadFiles"
  @focus="formFieldOnFocus"
></v-file-input>

added :key="componentKey" and increasing it value when deleting the image