InputFile

Use InputFile to let shoppers upload files from a form, such as documents or images. It renders a styled label over a native file input and reports selections through the onChange callback.

Import

import { InputFile } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
accept	string	No	Restrict the selectable file types (for example, “.pdf,.jpg”).
onChange	(event: Event) => void	No	Called when the file selection changes.
label	string	No	The label text. Defaults to ‘Upload Document’.
multiple	boolean	No	Allow selecting multiple files.
icon	VNode<HTMLAttributes<SVGSVGElement>>	No	An optional icon shown before the label.

InputFile also accepts standard input HTML attributes (for example, id, name, and disabled), except type and icon.

Example

Render a file input that accepts documents and allows multiple selections.

import { InputFile, provider } from '/@dropins/tools/components.js';

await provider.render(InputFile, {
  label: 'Upload files',
  accept: '/.pdf,.jpg,.png',
  multiple: true,
  onChange: (event) => yourHandleFiles(event),
})(document.querySelector('.file-input'));

Related

• Input — a text input for form fields.
• InputPassword — a password field with a show/hide toggle.