file-input elementThe <file-input> element was designed to package the collection, inspection, and clearing of files in a form simpler, and with a default style/layout that more closely aligns with other inputs.
It uses an <input type="file"/> element for its file handling which means that it works identically to the "file" type input.
The <file-input> element is activated like other input elements, either by click or by key input. Once activated, the user is prompted with a dialog to select an image from their local machine.
When the user selects an image, the image is processed into an <img> element and displayed in the input along with the "Clear Selection" and "View Full Size" options.
The "Clear Selection" option will clear the input, which ensures that any FormData generated from a wrapping <form> will not include the previously selected image.
The "View Full Size" option will provide the selected image's image data to the browser. In most browsers, this will open the image in a new context (Tab/Window) for full-size viewing.
The <file-input> element allows text customization for its placeholder content, its "View Document" link, and its "Clear Selection" link. Each of these can be customized using the element's <slot>s.
In this example the input has been given a placeholder attribute. Only the text is replaced.
In this example, each of the slots have been replaced with custom <span> elements
block ClassIn this example, the <file-input> element has been given a class of block, which provides a block-style layout for the input, rather than the inline-style layout that is the default.
The <file-input> element implements form handling so that all expected input functionality works as expected.
For example, adding a required attribute will prevent a form from submitting if the input isn't populated. It will also provide a validation message, in that case.
Similarly, collecting a <form> element's FormData during its submit event will provide the file data as a property labeled by the <file-input>'s name attribute value.
In this example, all of the FormData is logged in the event log, when the form is submitted. One of the <file-input> elements has been given a required attribute, and has been styled to indicate the :invalid state.
Additional form elements have been added for comparison. The text input rejects any numeric content, as a way to see an invalid text field for comparison.