I'm stuck: newItems.slice is not a function with signal and For/Index

[nlfiedler]

Howdy, I'm translating code I wrote with Rust/Leptos to JS/Solid and I'm befuddled by this error:

Uncaught TypeError: newItems.slice is not a function
    at chunk-INA37EIZ.js?v=66293670:1207:26
    at untrack (chunk-INA37EIZ.js?v=66293670:462:12)
    at Object.fn (chunk-INA37EIZ.js?v=66293670:1141:12)
    at runComputation (chunk-INA37EIZ.js?v=66293670:734:22)
    at updateComputation (chunk-INA37EIZ.js?v=66293670:717:3)
    at runTop (chunk-INA37EIZ.js?v=66293670:827:7)
    at runQueue (chunk-INA37EIZ.js?v=66293670:901:42)
    at completeUpdates (chunk-INA37EIZ.js?v=66293670:856:10)
    at runUpdates (chunk-INA37EIZ.js?v=66293670:845:5)
    at writeSignal (chunk-INA37EIZ.js?v=66293670:690:7)

The code is below. I can choose a file once, and the table shows the details, but the second time I get that error. If I change the For to Index (and the file to file()) then the error happens the first and every time. What am I doing wrong?

function Upload() {
  const datefmt = new Intl.DateTimeFormat()
  const [selected, setSelected] = createSignal([])
  const filesSeleced = (event) => {
    setSelected(event.target.files)
  }
  const hasFiles = createMemo(() => {
    return selected().length > 0
  })

  return (
    <>
      <div class="container">
        <nav class="level">
          <div class="level-right">
            <div class="level-item">
              <div class="card">
                <div class="field is-grouped">
                  <div class="file">
                    <label class="file-label">
                      <input
                        class="file-input"
                        type="file"
                        multiple
                        name="uploads"
                        on:change={filesSeleced}
                      />
                      <span class="file-cta">
                        <span class="file-icon">
                          <i class="fas fa-upload"></i>
                        </span>
                        <span class="file-label">Choose Files</span>
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>

      <section class="section">
        <p>You can drop files into the drop zone below.</p>
        <div class="content" style="border-style: dashed; min-height: 14em;">
          <Show when={hasFiles()} fallback={<></>}>
            <table class="table is-fullwidth">
              <tbody>
                <For each={selected()}>
                  {(file) => (
                    <tr>
                      <td>{file.name}</td>
                      <td>{file.type}</td>
                      <td>{file.size}</td>
                      <td>{datefmt.format(file.lastModifiedDate)}</td>
                    </tr>
                  )}
                </For>
              </tbody>
            </table>
          </Show>
        </div>
      </section>
    </>
  )
}

Thank you.

[nlfiedler]

Ah, and of course I search for "solidjs multiple file upload form" and Google generates the solution. Thank you, Google. Sorry I didn't try that 5 minutes ago.

FYI, the event.target.files looks like an array/list but it is not, and Array.from(event.target.files) makes it so. That's what I get for spending too much time in other languages.