S
SolidJS13mo 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 Lohr13mo 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 Lohr13mo ago
The PR is merged now, a new version of the filesystem primitive will be available in a few minutes.