How to display files with file api?

Question

JavaScript

I want that when uploading files and creating folders, they are displayed in the body of the site, and receive their icons according to their extension. At the moment I have output information to the console, I can’t figure out how to proceed further, because the header, main and footer are components. I’ll show you a piece of the header where the download button is located, I also created a separate component where I wrote which icons someone has, if necessary, I’ll show it.

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