pk-image-uploader

Image Uploader Web Component

A side project for myself to create a reusable drag&drop image uploader web component and practice StencilJS.

You can check out a DEMO PEN here.

Properties

The component can receive the following properties as html attributes. Only the label is required. If the image is not set, the component will simply start off with an empty state (showing the drop box). All the requirement rule properties have default values thus they are not required.

Property	Attribute	Description	Type	Default
image	image	The URL of an already existing image	string	undefined
label*	label	Text label shown over the image box	string	undefined
maxFileSize	size-max	Maximum allowed file size in MB	number	5
maxImageHeight	height-max	Maximum allowed image height in pixel	number	4000
maxImageWidth	width-max	Maximum allowed image width in pixel	number	6000
minImageHeight	height-min	Minimum allowed image height in pixel	number	240
minImageWidth	width-min	Minimum allowed image width in pixel	number	320

For image dimensions (px) if either of the values are set to 0 that minimum or maximum size accordingly will NOT be validated.

Events

Every time the loaded image changes and the file is valid, an imagechange event is fired with the image file as the payload, or a null value if the images has been removed.

Event	Description	Type
imagechange	Payload: the selected file or null	`CustomEvent<File

Styles

• Component width is set to 100% of the parent element
• Component height is 350px by default but can be easily overwritten by simply assigning a new height in CSS for the pk-image-uploader element
• CSS variables can be set to overwrite some of the default settings:

CSS variable	Description	Default
--iu-primary-color	Color of the texts and borders	#00000099
--iu-dragging-color	Color of the border while dragging	#425AC9
--iu-error-color	Color of the border and the error message in case of invalid file	#D20000
--iu-border-radius	Border radius of the component box and buttons	5px