<script>
  let files;

  $: if (files) {
    // Note that `files` is of type `FileList`, not an Array:
    // https://developer.mozilla.org/en-US/docs/Web/API/FileList
    console.log(files);

    for (const file of files) {
      console.log(`${file.name}: ${file.size} bytes`);
    }
  }
</script>

<label for="avatar">Upload a picture:</label>
<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />

<label for="many">Upload multiple files of any type:</label>
<input bind:files id="many" multiple type="file" />

{#if files}
  <h2>Selected files:</h2>
  {#each Array.from(files) as file}
    <p>{file.name} ({file.size} bytes)</p>
  {/each}
{/if}

function handleDrop(e) {
  e.stopPropagation(); e.preventDefault();
  var f = e.dataTransfer.files[0];
  /* f is a File */
  var reader = new FileReader();
  reader.onload = function(e) {
    var data = e.target.result;
    /* reader.readAsArrayBuffer(file) -> data will be an ArrayBuffer */
    var workbook = XLSX.read(data);

    /* DO SOMETHING WITH workbook HERE */
  };
  reader.readAsArrayBuffer(f);
}
drop_dom_element.addEventListener("drop", handleDrop, false);

<script>
  import * as XLSX from "xlsx";

  let input_files;

  $: if (input_files) {
    try {
      // Get the first file
      const input_file = event.target.files[0];
      // Print file name & size
      console.log(`${input_file.name}: ${input_file.size} bytes`);
      // Set file reader
      const reader = new FileReader();

      // Set onload function and call file reader
      reader.onload = function (e) {
        var data = e.target.result;
        /* reader.readAsArrayBuffer(file) -> data will be an ArrayBuffer */
        var LoadedXLSX = XLSX.read(data);
        // Transform first sheet to json
        const load_data_list = XLSX.utils.sheet_to_json(
          LoadedXLSX.Sheets[LoadedXLSX.SheetNames[0]],
        );
        console.log(load_data_list);
      };

      reader.readAsArrayBuffer(input_file);
    } catch (error) {
      console.log(error);
      alert("Read file failure");
    }
  }
</script>

<input bind:files={input_files} id="file_input" name="file_input" type="file" />