Specify [type=file] to use an input element that can handle file uploads
Example
Compared with the native input it doesn't look all that different but you can actually
drag and drop files on it out of the box.
Once you've selected a few files you'll also notice that each file is added to a visible list
from where it can also be deleted again.
To upload multiple files you just specify the [multiple] attribute.
Min/Max Constraints
It is also possible to make such an input participate in the Constraints API by adding the [min]
and [max] attributes.
Example
Pattern constraint
You can make sure the uploaded files have names that conform to a pattern by using the [pattern]
attribute. Keep in mind that this has nothing to do with a files contents!
Example
Customizing the uploaded files list
Typically <uwc-input> gives you the option to customize how selected values appear by adding a <template>
element to the <ul[part=values]>.
Since there is no sane way for a file to be represented in the DOM Tree with <uwc-input[type=file]> you'll have to hide the
selected files list with css and control the .files property.
Specify
[type=file]to use an input element that can handle file uploadsExample
Compared with the native input it doesn't look all that different but you can actually drag and drop files on it out of the box.
Once you've selected a few files you'll also notice that each file is added to a visible list from where it can also be deleted again.
To upload multiple files you just specify the
[multiple]attribute.Min/Max Constraints
It is also possible to make such an input participate in the Constraints API by adding the
[min]and[max]attributes.Example
Pattern constraint
You can make sure the uploaded files have names that conform to a pattern by using the
[pattern]attribute. Keep in mind that this has nothing to do with a files contents!Example
Customizing the uploaded files list
Typically
<uwc-input>gives you the option to customize how selected values appear by adding a<template>element to the<ul[part=values]>.Since there is no sane way for a file to be represented in the DOM Tree with
<uwc-input[type=file]>you'll have to hide the selected files list with css and control the.filesproperty.