vwc-file-picker is a composite component that enables to perform files selection on from the users environment.

vwc-file-picker allows to pick files either by opening a file selection dialog of the operating system, or via drag'n'drop of the file onto the component's surface.

Example:

<vwc-file-picker label="Avatar image" helper="select image of max 1Mb">
  <input type="file" name="some-file" />
</vwc-file-picker>

vwc-file-picker's structure is quite flexible and customizable. In general we have the following particles:

• label, text to appear above the component ('Pick your favorite' in the picture above)
• helper message, textual hint with optional error icon; located below the component ('single file of any type' in the picture above)
• drag'n'drop surface (the dashed area in the picture above)
• drag'n'drop textual hint, which appears centered within the surface ('Drag & Drop files here' in the picture above)
• button, triggering file input dialog

The component structure can be simple to rich, as following list (in the ascending order of complexity):

• drag'n'drop surface only: only drag and drop files allowed here; can optionally add a textual hint via the dd-hint slot (see API slots section below):

   <vwc-file-picker label="Avatar image" helper="select image of max 1Mb">
   	<p slot="dd-hint">Drop the amazing files here!</p>
   	<input type="file" name="some-file" />
   </vwc-file-picker>

• button only: providing a custom vwc-button via the button slot (see API slots section below) and disabling drop zone (see API properties section below); the button then triggers the file input operating system dialog:

   <vwc-file-picker label="Avatar image" helper="select image of max 1Mb" drop-zone="false">
   	<vwc-button slot="button">Upload</vwc-button>
   	<input type="file" name="some-file" />
   </vwc-file-picker>

• drag'n'drop surface with button: this flavor has both, the drag'n'drop surface and the button; here, as well, the drag'n'drop hint text can be customized or removed:

   <vwc-file-picker label="Avatar image" helper="select image of max 1Mb">
   	<vwc-button slot="button">Upload</vwc-button>
   	<input type="file" name="some-file" />
   </vwc-file-picker>

In addition to those major variations, there are the label and the helper message, mentioned above, which are customizable as well.

Most of the slots below are for the customization purposes, but one of them, input-file-slot is essential, required and is worthy a special treatment here.

Thus, input-file-slot requires provision of the input element (native) from the consumer. This element MUST have type="file". This element MAY have name, multiple and accept attributes, all as specced out here. Moreover, consumer will use this, his own provided input, in order to listen to change events and/or take the file/s when needed.