<script>
  let text = 'Select File'

  export let file
  let input

  function validate() {
    if (!input || !input.files.length) return
    file = input.files[0]
    text = file.name
  }
</script>

<label class="btn">
  {text}
  <input bind:this={input} on:change={validate} class="input" accept="application/json" type="file" />
</label>

<style>
  label {
    width: 18em;
    max-width: 100%;
    display: inline-block;
  }
  label input[type='file'] {
    display: none;
  }
</style>
