S
SolidJS•2y ago
gubsey

How to create a signal for a webkitdirectory input

I have an app which looks like this: 
import { createSignal, type Component } from 'solid-js';

const App: Component = () => {
  const [files, setFiles] = createSignal(/* What do I put here? */)
  return (
    <main>
      <form onsubmit={(ev) => ev.preventDefault()}>
        {/* @ts-expect-error */}
        <input type="file" id='files' webkitdirectory directory multiple />
        <input type='submit' value="Submit" />
      </form>
    </main>
  );
};

export default App;
import { createSignal, type Component } from 'solid-js';

const App: Component = () => {
  const [files, setFiles] = createSignal(/* What do I put here? */)
  return (
    <main>
      <form onsubmit={(ev) => ev.preventDefault()}>
        {/* @ts-expect-error */}
        <input type="file" id='files' webkitdirectory directory multiple />
        <input type='submit' value="Submit" />
      </form>
    </main>
  );
};

export default App;
How do I extract the list of files from that input?
3 Replies
Alex Lohr
Alex Lohr•2y ago
There's a webkitEntries property that you can get after an onChange event that corresponds to the web filesystem API. Unfortunately, the filesystem primitive in our @solid-primitives collection does not yet allow inserting such an webkitEntries instance in order to simplify access with a node-like API, but if you give me until this evening, I'll add that capability. The API then will be something like makeWebAccessFileSystem({ webkitEntries }) and will return something very similar to node's fs/promises.
Alex Lohr
Alex Lohr•2y ago
Alex Lohr
Alex Lohr•2y ago
The PR is merged now, a new version of the filesystem primitive will be available in a few minutes.
Want results from more Discord servers?
Add your server