Vue component to upload text file (styled with bootstrap). Press button to choose file or drag&drop it. With refactoring can be used for multiple file.

UploadFileComponent.vue

// Child (UploadFileComponent.vue)
// TODO: finish setActive and setInactive methods

<template>
  <div
    id="upload-zone"
    class="col-1 mt-2 py-5 border w-100 bg-light rounded"
    @dragover.prevent
    @dragenter="setActive"
    @dragleave="setInactive"
    @drop.stop.prevent="readFile"
  >
    <div class="text-muted col align-self-center text-center">
      <p>Drag & Drop or</p>
      <input
        type="button"
        value="touch me"
        class="btn btn-link text-muted border-0"
        @click="metaClick"
      />
      <input
        class="d-none"
        type="file"
        id="file-selector"
        accept="*/*"
        @change="readFile"
        multiple
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "UploadFile",
  props: {},
  emits: ["uploadFile"],
  data: () => ({
    uploadedFile: "",
  }),
  methods: {
    setActive: function() {},
    setInactive: function() {},

    metaClick: function () {
      document.getElementById("file-selector").click();
    },

    readFile: async function (event) {
      const file = {
        drop: (event) => event.dataTransfer.files[0],
        change: (event) => event.target.files[0],
      }[event.type](event)

      let vue_this = this;
      let reader = new FileReader();
      reader.readAsText(file, "UTF-8");
      reader.onload = function (event) {
        vue_this.$emit("uploadFile", event.target.result);
      };
    },
  },
};
</script>

// --- Parent
// <script setup>
// import UploadFile from "./components/UploadFile.vue";
// </script>
// <tempplate>
//  <UploadFile @uploadFile="parseUplodedData" />
// </tempplate>