Как вывести файлы при file api?

Question

[Lalka99]

Хочу чтобы при загрузке файлов и создании папок, они отображались в теле сайта, и получали свои иконки согласно своему расширению. На данный момент сделал вывод инфы в консоль, дальше не могу понять как действовать, ибо header, main и footer, являются компонентами. Покажу кусок header где и находится кнопка загрузки, так же создал отдельный компонент где написал какие у кого иконки если нужно покажу.

<template>
  <div class="header">
    <div class="header__main">
      <div class="header__logo">
        <img src="../assets/Frame.svg" alt="logo"/>
      </div>
      <div class="header__btns">
        <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>
          <label class="header__delete"><img class="iii" src="../assets/Trash.svg"/><img class="ioi"
                                                                                         src="../assets/Trash2.svg"/><input
              type="button" id="header__delete"/></label>
          <label class="header__folder"><img src="../assets/qw.png"/><input type="button" id="class__folder"/></label>
        </form>
      </div>
      <div class="header__search">
        <label class="search-label"><input type="text" id="search" placeholder="Search"/><img
            src="../assets/search.svg"/></label>
        <img src="../assets/Group.png" alt="home"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Head",
  data () {
    return {

    }
  },
  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>

<style lang="css">
@import "../assets/header.css";
</style>