Insites Docs Web Components V1Data EntryImage Picker

Image Picker

Last updated on August 02, 2024.

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.">
</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('valueChange', 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

 

Events

 

EVENT OBJECT DESCRIPTION
valueChange 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.