File Upload Hds

<sl-file-upload-hds id="sfuAddFile" class="my-style"></sl-file-upload-hds>

<script type="module">
  const sfuAddFile = document.querySelector("sl-file-upload-hds#sfuAddFile.my-style");

  sfuAddFile.addEventListener('sl-upload-add', (event) => {
    console.log('!! sl-upload-add emitted !!');
    console.log('event.detail.manifest', event.detail.manifest);
    console.log('== sfuAddFile.files', sfuAddFile.files);
  });
</script>

<sl-file-upload-hds id="sfuAddFileMulti" class="my-style"></sl-file-upload-hds>

<script type="module">
  const sfuAddFileMulti = document.querySelector("sl-file-upload-hds#sfuAddFileMulti.my-style");

  sfuAddFileMulti.addEventListener('sl-upload-files', (event) => {
    console.log('!! sl-upload-files emitted !!');
    console.log('> event.detail.manifest', event.detail.manifests);
    console.log('> sfuAddFileMulti.files', sfuAddFileMulti.files);
    console.log('=== Q.E.D. ===');
  });
</script>

<sl-file-upload-hds id="sfuRemoveFile" class="my-style"></sl-file-upload-hds>

<script type="module">
  const sfuRemoveFile = document.querySelector("sl-file-upload-hds#sfuRemoveFile.my-style");

  sfuRemoveFile.addEventListener('sl-upload-remove', (event) => {
    console.log('!! sl-upload-remove emitted !!');
    console.log('> event.detail.manifest', event.detail.manifest);
    console.log('> sfuRemoveFile.files', sfuRemoveFile.files);
    console.log('=== Q.E.D. ===');
  });
</script>

<sl-file-upload-hds id="sfuFetch" class="my-style"></sl-file-upload-hds>

<script type="module">
  const uploadEndpoint = "https://your-upload-endpoint.com/upload";
  const sfuFetch = document.querySelector("sl-file-upload-hds#sfuFetch.my-style");

  // Map to store active fetch requests' AbortControllers keyed by the file manifest.
  const activeFetch = new Map();

  function uploadFile(fileManifest) {
    const fileManifest = uploadEvent.detail.manifest;
    const controller = new AbortController();
    activeFetch.set(fileManifest, controller);

    try {
      // Initiate the fetch request to upload the file.
      // Note: Fetch API doesn't provide upload progress events.
      const response = await fetch(uploadEndpoint, {
        method: "PUT",
        body: fileManifest.file,
        signal: controller.signal
      });
      activeFetch.delete(fileManifest);
      
      if (response.ok) {
        console.log("Upload successful with fetch!");
        fileManifest.status = 'loaded';
      } else {
        console.error("Upload failed:", response.statusText);
        sfuFetch.showError("Upload failed: " + response.statusText);
        fileManifest.status = 'error';
        fileManifest.error = response.statusText;
      }
    } catch (error) {
      activeFetch.delete(fileManifest);
      if (error.name === 'AbortError') {
        console.log("Upload aborted for file:", fileManifest.file.name);
      } else {
        console.error("Network error during fetch upload:", error);
        sfuFetch.showError("Network error during upload. File: " + fileManifest.file.name);
        fileManifest.status = 'error';
        fileManifest.error = "Network error";
      }
    }
  }

  function cancelUploadFile(fileManifest) {
    const controller = activeFetch.get(fileManifest);
    if (controller) {
      controller.abort();
      activeFetch.delete(fileManifest);
    }
  }

  sfuFetch.addEventListener('sl-upload-add', async (uploadEvent) => {
    uploadFile(uploadEvent.detail.manifest);
  });

  sfuFetch.addEventListener('sl-upload-remove', (removeEvent) => {
    cancelUploadFile(removeEvent.detail.manifest);
  });

</script>

<sl-file-upload-hds id="sfuXhr" class="my-style"></sl-file-upload-hds>

<script type="module">
  const uploadEndpoint = "https://your-upload-endpoint.com/upload";
  const sfuXhr = document.querySelector("sl-file-upload-hds#sfuXhr.my-style");

  // Map to keep track of active XHR requests, keyed by the file manifest.
  const activeXHR = new Map();

  function uploadFile(fileManifest) {
    const xhr = new XMLHttpRequest();
    activeXHR.set(fileManifest, xhr); // store the xhr associated with this file

    xhr.open("PUT", uploadEndpoint, true);

    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable) {
        const progress = (event.loaded / event.total) * 100;
        fileManifest.progress = progress;
        fileManifest.status = 'loading';
        console.log(`Upload progress: ${Math.round(progress)}%`);
      }
    };

    xhr.onload = () => {
      activeXHR.delete(fileManifest); // remove xhr from map on completion
      if (xhr.status === 200) {
        console.log("Upload successful!");
        fileManifest.status = 'loaded';
      } else {
        console.error("Upload failed:", xhr.statusText);
        sfuXhr.showError("Upload failed: " + xhr.statusText);
        fileManifest.status = 'error';
        fileManifest.error = xhr.statusText;
      }
    };

    xhr.onerror = () => {
      activeXHR.delete(fileManifest);
      console.error("Network error during upload.");
      sfuXhr.showError("Network error during upload. File: " + fileManifest.file.name);
      fileManifest.status = 'error';
      fileManifest.error = "Network error";
    };

    xhr.send(fileManifest.file);
  };

  function cancelUploadFile(fileManifest) {
    const xhr = activeXHR.get(fileManifest);
    if (xhr) {
      console.log("Aborting upload for file: " + fileManifest.file.name);
      xhr.abort();
      activeXHR.delete(fileManifest);
    }
  }

  sfuXhr.addEventListener('sl-upload-add', (uploadEvent) => {
    uploadFile(uploadEvent.detail.manifest);
  });

  sfuXhr.addEventListener('sl-upload-remove', (removeEvent) => {
    cancelUploadFile(removeEvent.detail.manifest);
  });

</script>

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

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

  sfuSetError.addEventListener('sl-upload-files', (event) => {
    const file0 = event.detail.manifests[0];
    setTimeout(() => {
      file0.status = 'error';
      file0.error = errorMessage;
    }, 3000);
  });
</script>

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

<script type="module">
  const sfuDataUrl = document.querySelector("#sfuDataUrl");

  sfuDataUrl.addEventListener('sl-upload-files', async (event) => {
    const fileManifest = event.detail.manifests[0];
    const dataUrl = await sfuDataUrl.readFileAsDataURL(fileManifest);
    console.log("File name: ", fileManifest.file.name);
    console.log("File content Data URL: ", dataUrl);
  });
</script>

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

<script type="module">
  const sfuArrayBuffer = document.querySelector("#sfuArrayBuffer");

  sfuArrayBuffer.addEventListener('sl-upload-files', async () => {
    const fileManifest = sfuArrayBuffer.files[0];
    const arrayBuffer = await sfuArrayBuffer.readFileAsArrayBuffer(fileManifest);
    console.log("File name: ", fileManifest.file.name);
    console.log("File content array buffer: ", arrayBuffer);
  });
</script>

<sl-file-upload-hds id="sfuSmall" 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="branding-logo-file-upload"
    allowed-types='["svg", "png"]'
    unsupported-type-message="Only SVG and PNG files are supported here!!!!"
    >
  <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-upload-files', () => {
      console.log("file uploaded", fileUpload.files);
      document.querySelector('#branding-logo-upload-complete-alert').toast();
    });
  })();
</script>

<script type="module" src="http://localhost:7001/dist/shoelace-autoloader.js"></script>
<sl-switch id="chkFullScreenDrop" size="medium"
  style="margin: var(--hds-space-2x) 0">enable full screen capture</sl-switch>
<!-- <sl-file-upload-hds full-screen-drop></sl-file-upload-hds> -->
<sl-file-upload-hds id="sfuFullScreenDrop"></sl-file-upload-hds>
<script>
  const chkFullScreenDrop = document.querySelector("sl-switch#chkFullScreenDrop");
  const sfuFullScreenDrop = document.querySelector("sl-file-upload-hds#sfuFullScreenDrop");
  chkFullScreenDrop.addEventListener(
    "sl-change",
    () => chkFullScreenDrop.checked
       ? sfuFullScreenDrop.setAttribute('full-screen-drop', true)
       : sfuFullScreenDrop.removeAttribute('full-screen-drop')
  );
</script>

<sl-file-upload-hds id="sfuAccessFiles" class="my-style"></sl-file-upload-hds>

<script type="module">

window.addEventListener('DOMContentLoaded', async () => {
  await customElements.whenDefined('sl-file-upload-hds');

  const sfuAccessFiles = document.querySelector("sl-file-upload-hds#sfuAccessFiles.my-style");
  await sfuAccessFiles.updateComplete;

  const dummyContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  const fileOptions = { type: "text/plain", lastModified: Date.now() };
  const file0 = new File([dummyContent], "file0.txt", fileOptions);
  const file1 = new File([dummyContent], "file1.txt", fileOptions);
  const file2 = new File([dummyContent], "file2.txt", fileOptions);
  const file3 = new File([dummyContent], "file3.txt", fileOptions);
  const file4 = new File([dummyContent], "file4.txt", fileOptions);

  sfuAccessFiles.addFile(file0);

  // hold onto manifest1: FileManifest as addFile() returns it
  const manifest1 = sfuAccessFiles.addFile(file1);

  // using addFiles() adding array of files
  sfuAccessFiles.addFiles([file2, file3, file4]);

  // configure manifest metadata directly via manifest object
  manifest1.status = 'loading';
  manifest1.progress = 68.0;

  // accessing file manifest via sl-file-upload instance
  sfuAccessFiles.files[2].status = 'error';
  sfuAccessFiles.files[2].error = 'Network error, unable to upload.';
  sfuAccessFiles.files[3].status = 'loaded';

});
</script>