• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

207
Views
How to upload the same image in vue

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 class="file-upload-wrapper">
    <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" class="close-icon" @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>
about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

simple way you should use

v-model

in your code and after delete it clear this value

about 3 years ago · Juan Pablo Isaza Report

0

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

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error