File Upload Hds

<sl-file-upload-hds full-screen-drag></sl-file-upload-hds>

<sl-file-upload-hds id="file-upload-deleted"></sl-file-upload-hds>

<script type="module">
  const fileUploadDeleted = document.querySelector("#file-upload-deleted");

  fileUploadDeleted.addEventListener('sl-remove', () => {
      console.log('fileUploadDeleted', fileUploadDeleted.deletedFileForCapture)
  });
</script>

<sl-file-upload-hds id="file-upload-fileset"></sl-file-upload-hds>

<script type="module">
  const fileUploadFileSet = document.querySelector("#file-upload-fileset");

  fileUploadFileSet.addEventListener('sl-input', () => {
      console.log('fileUploadFileSet', fileUploadFileSet.selectedFilesSet)
  });
</script>

<sl-file-upload-hds id="file-upload-be-error"></sl-file-upload-hds>

<script type="module">
  const fileUploadError = document.querySelector("#file-upload-be-error");
  const errorMessage = 'The backend rejected this file because of its content.';

  fileUploadError.addEventListener('sl-input', () => {
      fileUploadError.setFileError(fileUploadError.fileDetails.name, errorMessage);
  });
</script>

<sl-file-upload-hds id="file-upload-1"></sl-file-upload-hds>

<script type="module">
  const fileUpload1 = document.querySelector("#file-upload-1");

  fileUpload1.addEventListener('sl-input', () => {
      console.log("File content: ", fileUpload1.value);
      console.log('fileUpload1', fileUpload1.selectedFilesSet)
  });
</script>

<sl-file-upload-hds id="file-upload-22" upload-component-size="small"></sl-file-upload-hds>

<sl-file-upload-hds id="file-upload-22" upload-component-size="large">
  <slot name="large">
    <div>Read more on how to <a href="#c">get the most out of bulk uploading.</a></div>
  </slot>
</sl-file-upload-hds>

  <sl-file-upload-hds disabled></sl-file-upload-hds>

<sl-file-upload-hds id="file-upload-2" output-type="text" allowed-types='["txt"]' unsupported-type-message="Only text files are allowed here!">
  Drop a text file here and check the console log
</sl-file-upload-hds>

<script type="module">
  const fileUpload2 = document.querySelector("#file-upload-2");

  fileUpload2.addEventListener('sl-input', () => {
      console.log("File content: ", fileUpload2.value);
  });
</script>

<sl-file-upload-hds id="file-upload-3"></sl-file-upload-hds>

<script type="module">
  const fileUpload3 = document.querySelector("#file-upload-3");

  fileUpload3.addEventListener('sl-input', () => {
      console.log("File meta data: ", fileUpload3.fileDetails);
  });
</script>

<sl-file-upload-hds
    id="branding-logo-file-upload"
    allowed-types='["svg", "png"]'
    unsupported-type-message="Only SVG and PNG files are supported here!!!!"
    output-type="data-url"

    >
  <p>Only SVG and PNG files are allowed here</p>
</sl-file-upload-hds>

<script>
  (() => {
    const fileUpload = document.querySelector('#branding-logo-file-upload');

    fileUpload.addEventListener('sl-input', () => {
      console.log("file uploaded", fileUpload.value);
      document.querySelector('#branding-logo-upload-complete-alert').toast();
    });
  })();
</script>