Cuando subo una imagen por primera vez y luego la elimino de la entrada e intento cargarla nuevamente, la imagen no se carga.
La forma en que lo hago es que estoy usando el siguiente código en mi componente y, al cargar la imagen, estoy emitiendo una upload
de eventos donde configuro el archivo en el campo.
Cuando hago clic en triggerFileVisibility
, elimina el nombre de la imagen de la entrada, pero no me permite volver a cargar la misma imagen.
<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>
manera simple que debes usar
modelo v
en su código y después de eliminarlo borre este valor
Mi solución:
<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>
agregó: clave = "componentKey" y aumentó su valor al eliminar la imagen