Upload

<ins-input-file label="Sample Attachment" max-files="3" max-file-size="2" accepted-files="image/*,.pdf,.csv"></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"></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>