Greetings! I am a newcomer to Vue.js and I have encountered a problem that I need help with. In my component, there is a hidden input for files. When I click a button, the browser displays a window for importing files from my PC. Once I choose a file, I want to retrieve that file, check if it is an image, and display that image in an img tag.
My issue is that I am unsure how to make the code wait until I select my file. Currently, if I try to console.log something, it does not wait for my upload.
<template>
<div id="insert-component">
<div id="insert-new" >
<h2 class="text-md-left">New Category</h2>
<div class="mt-2">
<a href="#" id="img-button" class=" d-flex flex-wrap">
<img src="/storage/images/no_image.png" alt="logo">
<input type="file" class="d-none" id="load-category-image">
<button class="btn btn-dark btn-block" v-on:click="loadImage($event)">Add Image</button>
</a>
</div>
<div class="form-group mt-2 text-left">
<label for="name">Category Name:</label>
<input type="text" name="name" class="form-control">
<label for="description" class="mt-2">Category Description:</label>
<textarea name="description" class="form-control" rows="4">
</textarea>
</div>
</div>
<button class="btn btn-success btn-block my-2" v-on:click="submit($event)">Add Category</button>
</div>
</template>
<script>
export default {
name: "InsertComponent",
data: function () {
return {
state: 0
}
},
methods: {
loadImage($e){
$e.preventDefault();
document.getElementById('load-category-image').click();
console.log("MY PROBLEM IS HERE, code normal continue");
},
test(){
alert('HI');
}
},
}
</script>