Explaining my dilemma with uploading images:
In my form, users can upload images using the following code snippet:
<input id="visualisation_upload" @change="onThumbnailChanged" name="visualisation_upload" accept="image/*" type="file" class="sr-only">
onThumbnailChanged (event) {
const file = event.target.files[0];
this.fields.thumbnail = file;
this.fields.thumbnailPreview = URL.createObjectURL(file);
},
To allow users to view and delete uploaded files, I utilize a component called uploadedFiles.
I include the component like this:
<uploadedFiles v-if="this.fields.thumbnail" :file="this.fields.thumbnail" :preview="this.fields.thumbnailPreview" @update-images="updateFiles"></uploadedFiles>
In the uploadedFiles component, I tried to clear both props directly in the component, resulting in the error Avoid Mutating a Prop Directly:
deleteFiles() {
this.file = ''
this.preview = null
}
Within the parent component, I attempted to empty the values through a method like this:
<a @click="$emit('update-images', file, preview), file = '', preview = null" class="hover:text-gray-900 cursor-pointer"></a>
updateFiles: function(file, preview) {
file = ''
preview = null
},
Despite my efforts, I am struggling to achieve the desired functionality. I aim to make the component dynamic to avoid redundant methods. How can I successfully clear both this.fields.thumbnail & file when the user clicks a button?