Image Picker

Published on February 17, 2021, updated on June 01, 2021

Element: <ins-image-picker>

Defines an image input field and preview. Field supports `image/jpeg` and `image/png` type files.

Complete Example

Code Snippet

<ins-image-picker
  img-type="Image"
  button-color="green"
  placeholder="Drag image here"
  upload-img-container="rectangle"
  upload-img-rec-width="100"
  upload-img-rec-height="100"
  upload-img-rec-file-size="10"
  upload-img-rec-file-size-type="MB"
  upload-img-file-formats="JPG or PNG"
  error-message="Please choose a valid image file."
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-image-picker>

Default State

Code Snippet

<ins-image-picker></ins-image-picker>

Direct Value Set

Code Snippet

<ins-image-picker 
  id="directSetImage">
</ins-image-picker>

<script>
  var image = 'https://s3-us-west-2.amazonaws.com/ins-styleguide/assets/images/logo-3%402x.png';
  var fileName = 'Sample Logo';
  var imageField = document.getElementById('directSetImage');
  imageField.addEventListener('didLoad', function(e){
    imageField.imgType = "Icon";
    imageField.buttonColor = "green";
    imageField.uploadImgContainer = "square";
    imageField.value = image;
    imageField.fileName = fileName;
  });
</script>

Events

Code Snippet

<ins-image-picker 
  id="eventImageField">
</ins-image-picker>

<script>
  let field = document.getElementById('eventImageField');
  field.addEventListener('insValueChange', event => {
    console.log("filename", event.detail.filename);
    console.log("base64", event.detail.base64);
    alert("check console logs for file data");
  });
</script>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
img-type	string	"picture"	any	Defines the button label text as "Add/Change" + img-type value
button-color	string	"blue"	any	Defines outline color of button
placeholder	string	"Drag and drop the file or add an image"	any	Defines the field placeholder
not-image-file	boolean	false	true, false	Attribute to display error on the modal input field if file being attached is not an image
upload-img-container	string	""	square, rectangle	Make the image picker to be rectangular
upload-img-rec-width	number	120	integer	Define the text for recommended image width in px
upload-img-rec-height	number	120	integer	Define the text for recommended image height in px
upload-img-rec-file-size	number	25	integer	Define the text for recommended file size
upload-img-rec-file-size-type	string	KB	KB or MB	Define the text for recommended file size type
value	any	""	any	Defines the field image value
upload-img-file-formats	string	"JPG, JPEG, PNG or SVG"	JPG, JPEG, PNG or SVG	Defines the accepted image format
error-message	string	"Invalid image file."	any	Defines the error message.
file-name	any	""	any	Defines the file name value
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content

Events

EVENT	OBJECT	DESCRIPTION
insValueChange	base64, filename	Emits image base64 and filename on field value change

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.