SiPhotoUploadComponent documentation¶
selector
si-photo-upload A component used to upload, edit, and delete a user's photo. The user can upload a photo either via file browser or a URL to the photo. You can set the source photo with the sourcePhoto Data URL input or the sourcePhotoUrl URL input. If you already have a cropped image you can set it with the croppedPhoto input. Cropping changes are emitted via the croppedPhotoChange output.
Input Properties¶
| Name | Type | Default | Description |
|---|---|---|---|
| acceptedUploadFormats ¶ | string | '.png, .jpg, .jpeg' | Accepted image formats for the file selection dialog. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept |
| applyEditText ¶ | TranslatableString | $localize`:@@SI_PHOTO_UPLOAD.APPLY_PHOTO:Apply` | Text for the button applying the edited photo. |
| autoColor ¶ | boolean | false | Automatically calculates the background color. If set, color will be ignored. |
| cancelEditText ¶ | TranslatableString | $localize`:@@SI_PHOTO_UPLOAD.CANCEL:Cancel` | Text for the button cancelling the editing process. |
| changePhotoText ¶ | TranslatableString | $localize`:@@SI_PHOTO_UPLOAD.CHANGE_PHOTO:Change` | Text for the button changing the photo. |
| color ¶ | number | undefined | The desired color index from $si-sys-color-data-categorical-* color tokens. This can be set to any kind of positive integer that is then mapped to a color index. A better way to set a pseudo-random color is to set autoColor to true . |
| croppedPhoto ¶ | string | The photo to be displayed and edited (when not readonly). | |
| cropperAspectRatio ¶ | number | 1 | The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...). |
| cropperContainWithinAspectRatio ¶ | boolean | false | When set to true, padding will be added around the image to make it fit to the aspect ratio. Be aware that this transformation will cause the loaded image to be a png file with an increased base64 string payload. |
| cropperFrameAriaLabel ¶ | TranslatableString | $localize`:@@SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL:Crop picture` | Cropper frame aria label. |
| cropperImageFormat ¶ | ("png" | "jpeg") | 'jpeg' | Output format of the edited image. |
| cropperMaintainAspectRatio ¶ | boolean | true | Whether to keep the width and height of the cropped image equal according to the aspectRatio. |
| cropperMaxHeight ¶ | number | 0 | The cropper´s height cannot be made bigger than this number of pixels. Default is 0 (disabled). |
| cropperMaxWidth ¶ | number | 0 | The cropper´s width cannot be made bigger than this number of pixels. Default is 0 (disabled). |
| cropperMinHeight ¶ | number | 50 | The cropper´s height cannot be made smaller than this number of pixels (relative to original image´s size). Will be ignored if cropperMaintainAspectRatio is set. (0 = disabled). |
| cropperMinWidth ¶ | number | 50 | The cropper´s width cannot be made smaller than this number of pixels (relative to original image´s size). (0 = disabled). |
| disabledCropping ¶ | boolean | false | Optionally disable image cropping. |
| maxFileSize ¶ | number | 2048 | Maximum allowed file size of the uploaded file in kilobytes. |
| modalDescription ¶ | TranslatableString | Text displayed as description of the editing modal. | |
| modalHeader ¶ | TranslatableString | $localize`:@@SI_PHOTO_UPLOAD.MODAL_TITLE:Profile picture` | Text displayed as header of the editing modal. |
| photoAltText ¶ | TranslatableString | '' | Alternative text for the photo. |
| placeholderAltText ¶ | TranslatableString | '' | Alternative text for the photo´s placeholder. The value will be used to calculate the background color when autoColor is true. |
| readonly ¶ | boolean | false | Indicate that changing or uploads are disabled. |
| removePhotoText ¶ | TranslatableString | $localize`:@@SI_PHOTO_UPLOAD.REMOVE:Remove` | Text for the button removing the photo. |
| roundImage ¶ | boolean | true | Set this to true for a round cropper. Resulting image will still be square, but visually clipped with a border-radius: 50% on the resulting image to show it as round. |
| sourcePhoto ¶ | string | The input photo to be used for cropping. A string in Data URL format with base64 encoding. | |
| sourcePhotoUrl ¶ | string | URL to a photo to be used for cropping. | |
| uploadErrorTooBig ¶ | TranslatableString | $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED:Current file size of {{mb}} MB exceeds file size of max. {{maxSizeMb}} MB` | If the uploaded file exceeds the allowed upload size, this error message will be displayed to the user. |
| uploadErrorWrongType ¶ | TranslatableString | $localize`:@@SI_PHOTO_UPLOAD.ERROR_FILE_TYPE:The image file is not valid. Please upload a PNG or JP(E)G.` | If the uploaded file is of an unsupported type, this error message will be displayed to the user. |
| uploadPhotoText ¶ | TranslatableString | $localize`:@@SI_PHOTO_UPLOAD.UPLOAD_PHOTO:Upload picture` | Text for the button uploading a photo. |
Output Properties¶
| Name | Type | Description |
|---|---|---|
| croppedPhotoChange ¶ | string | The photo to be displayed and edited (when not readonly). |
| sourcePhotoChange ¶ | string | The input photo to be used for cropping. A string in Data URL format with base64 encoding. |
Types Documentation¶
| Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality. |
|---|
Except where otherwise noted, content on this site is licensed under MIT License.