hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.33k stars 285 forks source link

Type 'FileList' is not assignable to type '() => void'. #617

Open baitian752 opened 1 year ago

baitian752 commented 1 year ago
<script lang="ts">
  import Textfield from "@smui/textfield";
  import HelperText from "@smui/textfield/helper-text";
  import TextfieldIcon from "@smui/textfield/icon";

  const SMUI_VERSION = "7.0.0-beta.14";

  let files: FileList = null;
</script>

<main>
  <!-- Hint where we get fonts from. -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />

  <!-- Material Icons, Roboto, and Roboto Mono fonts -->
  <link
    href="https://fonts.googleapis.com/css2?family=Material+Icons&Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet"
  />

  <!-- SMUI Styles -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svelte-material-ui@{SMUI_VERSION}/bare.min.css" />

  <!-- SMUI Styles -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/svelte-material-ui@{SMUI_VERSION}/themes/svelte.min.css"
    media="(prefers-color-scheme: light)"
  />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/svelte-material-ui@{SMUI_VERSION}/themes/svelte-dark.min.css"
    media="screen and (prefers-color-scheme: dark)"
  />

  <Textfield
    bind:files
    style="width: 100%;"
    label="Files"
    type="file"
    required
    label$hidden={true}
    input$multiple={true}
    on:change={() => {}}
  >
    <TextfieldIcon class="material-icons" slot="leadingIcon">attach_file</TextfieldIcon>
    <HelperText validationMsg slot="helper">You should choose at least one file</HelperText>
  </Textfield>
</main>