`<img-input>`

Form control for image linking and uploading.

Features

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

TODO

multiple attribute?
Regargeting of input attributes (autofocus, placeholder etc)

Examples

Basic

<img-input></img-input>

No preview

<img-input nopreview></img-input>

CSS parts

input, location - The input element used for URL or filename
dropzone The drop zone
button, browse-button - The button used to open the file browser
preview - The preview image

Installation

Just include the component's JS file and you're good:

<script src="https://nudeui.com/img-input/img-input.js" type="module"></script>

In case you want to link to local files: CSS is fetched automatically, and assumed to be in the same directory as the JS file.