FileTrigger

Opens the file picker of the browser from a Button inside it.

No files yet.

<script>
  import { $signal } from 'brumate/signals';
  import Button from '@brumate/ui/Button.brm';
  import FileTrigger from '@brumate/ui/FileTrigger.brm';

  let picked = $signal('No files yet.');
  import Icon from '../../src/components/Icon.brm';
</script>

<FileTrigger
  allowsMultiple
  acceptedFileTypes=(['image/*'])
  onSelect=((files) => (picked = `${files?.length ?? 0} images picked.`))
>
  <Button class="ui-button"><Icon name="upload" /> Pick images</Button>
</FileTrigger>
<p>{picked}</p>

onSelect gets the files that the user picked.
acceptedFileTypes, allowsMultiple, defaultCamera and acceptDirectory set the input.
The input is hidden, so the picker needs scripts. For a form that must work without them, use a visible <input type="file">.