Overview
The <fileimage-input> element is intended to be used in forms for collecting files or images from a user.
It uses an <input type="file"/> element for its file handling which means that it works identically to the "file" type input.
The fileimage-input element
Basic Example
The <fileimage-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 a file or an image from their local machine.
If the user selects an image, the image is processed into an <img> element and displayed in the input. The element will also provide the "Clear Selection" and "View Selection" options, when a selection has been made.
The "Clear Selection" option will clear the input, which ensures that any FormData generated from a wrapping <form> will not include the previously selected file/image.
The "View Selection" option will provide the selected file's data to the browser. In most browsers, this will open the image in a new context (Tab/Window) for full-size viewing, as well as open text-based files as their text content. Binary files are loaded by the browser as text, which is mostly useless to users.
Customization
The <fileimage-input> element allows text customization for its placeholder content, its "View Selection" link, and its "Clear Selection" link. Each of these can be customized using the element's <slot>s.
Placeholder Attribute
In this example the input has been given a placeholder attribute. Only the text is replaced.
Slots
In this example, each of the slots have been replaced with custom <span> elements
block Class
In this example, the <fileimage-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.
Form Data
The <fileimage-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 image data as a property labeled by the <fileimage-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 <fileimage-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.