Image Uploader

Sticker Sheet Storybook

Example

<vega-image-uploader id="mock-uploading"></vega-image-uploader>
    const uploader = document.querySelector('#mock-uploading');

    uploader.addEventListener('vegaChange', async e => {
        if (e.detail) {
            uploader.status = 'uploading';
            setTimeout(() => {
                uploader.status = 'done';
            }, 3000);
        }
    });

Usage

The image uploader is a tool which allows end-users to upload an image file directly from their computer into the interface.

There are several states available for the image uploader:

  • Default state
  • Uploading
  • Filled or Uploaded

Each of these states has a hover state. The filled or uploaded state will show a thumbnail of the image that has been uploaded.

Properties

Name Description Default
accept File types that can be accepted. See Input accept attribute
string		 .jpg,.png,.jpeg
status Upload status
uploading, done		 -
show-preview-button Indicates whether to show the preview button
boolean		 true
show-remove-button Indicates whether to remove the preview button
boolean		 true
disabled Indicates if the uploader field is disabled.
boolean		 false
required Indicates whether the vega-image-uploader is required.
boolean		 false
auto-validation Indicates whether to automatically validate the value.
boolean		 true
validation-rules The array Custom validation rule for attaching to the input takes the following format:
Array<{canEvaluate: (input: string, status: FormFieldStatusMeta, statusChanged: (keyof FormFieldStatusMeta)[]) => boolean, shouldShowError: (status: FormFieldStatusMeta, statusChanged: (keyof FormFieldStatusMeta)[]) => boolean, evaluate: (input: string) => EvaluateResult}>
value Uploaded file value
VegaFile		 -

Events

The following events are available for vega-image-uploader:

  • vegaChange - dispatched when the value is changed.
document.getElementById("vega-image-uploader").addEventListener("vegaChange", (e) => { })
  • vegaRemove- dispatched when the value is removed.
document.getElementById("vega-image-uploader").addEventListener("vegaRemove", (e) => { })
  • vegaCancel - dispatched when the Cancel button is clicked.
document.getElementById("vega-image-uploader").addEventListener("vegaCancel", (e) => { })

Types

There are two types of files defined:

  • vegaFile
type VegaFile = VegaUploadedFile | File;
  • vegaUploadedFile
type VegaUploadedFile = {
    url: string;
    name?: string;
};

For more details, view in Storybook.

Accessibility

  • Elements must have sufficient color contrast
  • id attribute value must be unique