Image Picker

<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>

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

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

<script>
  var image = 'https://uploads.prod01.sydney.platformos.com/instances/630/property_uploads/modules/insites_assets/assets_upload/asset/dc48131b-09d7-451a-82b2-c624a970d5df/logo-3@2x.png?updated=1721870946';
  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>

<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>