Overview
The <image-input>
element is intended to be used in forms for collecting 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.
image-input
elementThe <image-input>
element is intended to be used in forms for collecting 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 <image-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 <image-input>
element allows text customization for its placeholder content, its "View Full Size" 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 <image-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 <image-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 <image-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 <image-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.