How do I add data about uploaded files to an array of objects and use the data in other components? Doing on vue Now I have made the output of the necessary data to the console, but I do not understand how to add it to the array of objects, and then use it in other components, for example: I will need to give it my icon based on the type of the loaded file.
<form action="#" class="header__form">
<div class="input-file-container">
<img src="../assets/cir.png"/>
<input class="input-file" id="my-file" type="file" multiple
@change="loadFile"
>
<label tabindex="0" for="my-file" class="input-file-trigger">UPLOAD</label>
</div>
</form>
<script>
export default {
name: "Head",
data() {
return {
files: [],
}
},
methods: {
loadFile(ev) {
const files = ev.target.files[0];
const reader = new FileReader();
reader.onload = e => this.$emit("load", e.target.result);
console.log(`Filename: ${files.name}`)
console.log(`Size: ${files.size}`)
}
}
};
</script>