id |
---|
img-input |
Form control for image linking and uploading.
- Paste, drag & drop, upload, or provide a URL, all with the same unified API!
- Inline preview (
nopreview
attribute to disable) - Uses
ElementInternals
to work like a built-in form element - Ultra light
multiple
attribute?- Retargeting of input attributes (
autofocus
,placeholder
etc)
Basic
<img-input></img-input>
By default, the preview is shown in the same element as the input.
There are two ways to customize this: using the preview
slot, or the preview
attribute.
You can set the preview
attribute to none
for no preview:
<img-input preview="none"></img-input>
You can also set it to a CSS selector pointing to another element:
<img-input preview="#preview"></img-input>
<img id="preview">
Alternatively, you can use the preview
slot to provide your own <img>
element:
<img-input>
<img slot="preview">
</img-input>
Please note that if the preview
attribute is set, the preview
slot will be ignored.
The attribute can be dynamic as well:
<img-input></img-input>
<button onclick="this.previousElementSibling.preview =
this.previousElementSibling.preview === 'none' ? '' : 'none'">
Toggle preview
</button>
input
,location
- The input element used for URL or filenamedropzone
The drop zonebutton
,browse-button
- The button used to open the file browserpreview
- The preview image
input
to replace the default input elementbrowse
to replace the default “Browse…” buttonpreview
to replace the default preview image