Image Upload
<esp-image-upload>
Used to upload images.
Uploading new images
The file-selected event detail provides the image
reference (the actual object in uploadedImages) plus
onProgress, onComplete, and onFailed callbacks
bound to it. The same shape is used for upload-retry.
Simulated upload progress demo
Select images to see simulated progress. The second file will fail — click Retry to re-upload it.
Editing with existing images
Pre-populate with server images via setExistingImages.
Existing images never show upload overlays.
Methods
<esp-image-upload> has the following methods:
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
Events
<esp-image-upload> emits the following events:
file-removed
file-removed is of type CustomEvent<EspalierUploadImage>.
Fired when an image has been removed by the user. Narrow on detail.source to distinguish newly selected images from pre-existing server images.
upload-retry
upload-retry is of type CustomEvent<UploadEventDetail>.
Fired when the user clicks Retry on a failed upload. detail.image is the same object reference; fresh callbacks are provided. The component automatically resets the image to indeterminate progress.
file-selected
file-selected is of type CustomEvent<UploadEventDetail>.
Fired when an image has been selected by the user. detail.image is the actual object stored in uploadedImages; detail.onProgress, detail.onComplete, and detail.onFailed are callbacks bound to that image.
images-reordered
images-reordered is of type CustomEvent<ImagesReorderedDetail>.
Fired after the user drags an image to a new position. detail.images is the reordered array (same references, new order).
CSS Properties
<esp-image-upload> has the following CSS properties:
--esp-image-upload-preview-background
The background color of the image preview area.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).