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.">
</ins-image-picker>

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

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

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