Upload

<ins-input-file 
  label="Sample Attachment" 
  max-files="3" 
  max-file-size="2" 
  accepted-files="image/*,.pdf,.csv"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-input-file>

<ins-input-file 
  label="Error Field" 
  has-error error-message="This is a required field">
</ins-input-file>

<ins-input-file 
  label="Disabled Field" 
  placeholder="This field is disabled" 
  disabled>
</ins-input-file>

<ins-input-file 
  id="directFieldEl">
</ins-input-file>

<script>
  var label = "Upload Image(s)";
  var value = [{
    name: "sample-image.jpg",
    size: 12412,
    type:"image/jpg",
    url: "https://uploads.staging.oregon.platform-os.com/instances/2182/uploads/images/custom_image/image/194/thumb_aromatic-beverage-caffeine-2074122.jpg"
  }]

  var field = document.getElementById('directFieldEl');
  field.addEventListener('didLoad', function(e){
    field.label = label;
    field.setFiles(value);
  });
</script>

<ins-input-file 
  label="Sample Attachment" 
  id="insFileEl" 
  max-files="10" 
  max-file-size="5"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-input-file>

<p id="errors" style="font-size: 12px; color:#f27474; "></p>


<ins-button 
  solid 
  label="get files" 
  id="getFiles">
</ins-button>

<ins-button 
  color="green" 
  solid 
  label="Add File Programmatically" 
  id="addFiles">
</ins-button>

<ins-button 
  color="negative" 
  solid 
  label="Clear" 
  id="clearFiles">
</ins-button>

<script>
  let insFileEl = document.getElementById("insFileEl");
  let errorMessage =  "";
  // Event for when a file has been 'added'
  insFileEl.addEventListener("fileAdded", (file) => {
    console.log('Event: fileAdded', file.detail);
  });

  // Event for when a file has been 'removed'
  insFileEl.addEventListener("fileRemoved", (file) => {
    console.log('Event: fileRemoved', file.detail);
  });

  //  Event when an 'error' encounted on attach / upload
  // (ie. file size too big or file type not allowed)
  insFileEl.addEventListener("fileError", (file) => {
    // Display error message on an HTML element
    document.getElementById('errors').innerHTML = "*"+file.detail.errorMessage;
    // Remove error message after 5sec
    setTimeout(() => {
      document.getElementById('errors').innerHTML = "";
    }, 5000);
  });

  // Button trigger to get files list
  document.getElementById('getFiles').addEventListener("insClick", () => {
    console.log("File(s) Attached", insFileEl.getFilesList());
    alert("Check console log for data");
  });

  // Button trigger to add files programmatically from URL
  document.getElementById('addFiles').addEventListener("insClick", () => {
    insFileEl.setFiles([
      // Example file object
      {
        name: "sample-image.jpg",
        size: 32343,
        type: "image/jpg",
        url: "https://uploads.staging.oregon.platform-os.com/instances/2182/uploads/images/custom_image/image/194/thumb_aromatic-beverage-caffeine-2074122.jpg"
      }
    ]);
  });

  // Button trigger to clear files list
  document.getElementById('clearFiles').addEventListener("insClick", () => {
    insFileEl.removeFiles();
    console.log("Files Removed", insFileEl.getFilesList());
  });
</script>

<ins-input-file
    id="autoUploadEl"
    max-files=3
    auto-upload
    accepted-files="image/*"
    label="Example Auto Upload"
    field-name="image_attachment"
    field-type="image"
    credentials-url="/api/reports/get-s3-credentials.json">
</ins-input-file>