Upload Deprecated

<duet-layout center margin="none">
  <div slot="main">
    <duet-card heading="Notes on example">
      <duet-paragraph>
        This upload demonstrator has files prefilled from the "serverside" (mocked via javascript)
      </duet-paragraph>
      <duet-paragraph>
        It also has some in page source javascript that enables / disables the submit button if the upload list
        contains files with errors (this behaviour is entirely up to you to control, depending on your UX demands)
      </duet-paragraph>
      <duet-paragraph>
        In order to simulate an upload you can remove the erroneous files and click upload (to get the list of files
        that needs uploading)
      </duet-paragraph>

      <duet-paragraph>
        You can set the actions and groups through element.actions / element.groups instead of directly on the
        element as shown here
      </duet-paragraph>
    </duet-card>

    <duet-card heading="Upload Demonstrator">
      <form action="www.duetds.com" id="duet-upload-form" method="post" name="duet-upload-form-name">
        <duet-upload
          allowed-extensions="png,gif,jpg,jpeg,svg,pdf"
          allowed-mimetypes="image/*,video/*"
          external
          max-bytes="2048000"
          max-files="20"
          hide-upload-button
          show-links
          external-upload-button-id="externalUploadButton"
          caption-on-bottom
          hide-table-labels
          show-uploaded-items-header
          hide-header
          link-click-event
          action-button-titles='{
          "cancel":{"fi":"[fi] cancel","sv":"[sv] cancel","en":"[en] cancel"},
          "delete":{"fi":"[fi] delete","sv":"[sv] delete","en":"[en] delete"}
          }'
          rename-duplicates
        >
          <div slot="filefooter">This text is in filefooter slot</div>

          <div slot="uploadfooter">
            <duet-select
              expand
              items='[
                  { "label": "Category 1", "value": "1" },
                  { "label": "Category 2", "value": "2" },
                  { "label": "Category 3", "value": "3" },
                  { "label": "Category 4", "value": "4" }
               ]'
              label="Kaupunki"
              placeholder="Choose a category"
            ></duet-select>
            <duet-paragraph role="alert" id="empty-category-error" size="small" margin="none" color="danger">
              You must select category first.
            </duet-paragraph>
          </div>

          <div slot="afterfooter">
            <duet-alert id="category-alert" variation="warning" icon="messaging-alert">
              Bbb
            </duet-alert>

            <duet-button
              fixed
              icon="action-add-circle"
              id="externalUploadButton"
              size="small"
              variation="secondary"
            >
              Choose Files
            </duet-button>
          </div>

        </duet-upload>
        <duet-button disabled="true" fixed id="submit" variation="primary"> Submit</duet-button>
        <duet-button fixed id="cancel"> Cancel</duet-button>
      </form>
    </duet-card>
  </div>
</duet-layout>
<script>
  // Select the above duet-upload component
  var element = document.querySelector("duet-upload");
  var selector = document.querySelector("duet-select");
  var submitButton = document.getElementById("submit");
  var uploadBn = element.querySelector("#externalUploadButton");
  var categoryAlert = document.querySelector("#category-alert");
  var emptyCategoryError = document.querySelector("#empty-category-error");
  categoryAlert.style.display = "none";
  emptyCategoryError.style.display = "none"

  //simple debounce helper to throttle the duetChange events
  function debounce(func, timeout) {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, args);
      }, timeout);
    };
  }

  //add click event handler to the upload button
  uploadBn.addEventListener("click", function(event) {
    //prevent the default action of the button
    event.preventDefault();

    if(!selector.value){
      emptyCategoryError.style.display = "block";
      return;
    } else {
      emptyCategoryError.style.display = "none";
    }

    const metaData = [
      undefined,
      {
        //badges is a special metaData value, and the only one that has an effect (adds badges to filelist text)
        badges: ["Category 1", "other"],
        randomData: Math.random(),
      }, {
        badges: ["Different label"],
        otherData: Math.random(),
      }, {
        badges: ["Category 3"],
      }, {
        badges: ["Category 4"],
      },
    ];
    // get duet-selector value
    const meta = metaData[selector.value];
    //call the upload method of the component and add metaData from selector
    element.upload(meta);
  });

  submitButton.onclick = function() {
    uploadFiles(element.files);
  };

  function toggleButton(valid) {
    console.log("is element valid?", valid);
    if (valid) {
      submitButton.disabled = false;
    } else {
      submitButton.disabled = true;
    }
  }

  selector.addEventListener("change", (e) => {
    const alerts = [
      undefined,
      undefined,
      "Category 2 alert",
      undefined,
      "Category 4 alert"
    ]

    if(e.target.value) {
      emptyCategoryError.style.display = "none"
    }

    const alert = alerts[+e.target.value]

    if(!alert){
      categoryAlert.style.display = "none"
    } else {
      categoryAlert.innerHTML = alert;
      categoryAlert.style.display = "block";

    }
  })

  // listen to the events from the component
  element.addEventListener("duetActionEvent", (e) => {
    console.log("got action", e.detail.action);

    if (e.detail.action === "edit") {
      console.log("edit file details", e.detail);

      console.log("use", e.detail.keyName, "and", e.detail.uid, "to control/edit item in the element.files");
    }

  });
  // duetChange event listener
  element.addEventListener("duetChange", debounce(function(e) {

    console.log("duet-upload-change", element.files);
    // even though the event (e) actually carries the files list inside the details object
    // you should always take the properties as current state

    //you can upload files right after the user has chosen them in the filebrowser (best ux)
    //or you can create a scenario where files get uploaded when a button is clicked / form submitted (see startUpload function below)

    // duetChange fires on each file that was added, in real life you would probably debounce the script you use to upload with

    const filesUploaded = [];
    const filesThatNeedsToBeUploaded = [];
    element.files.forEach((file) => {
      if (file.progress === 0) {
        filesThatNeedsToBeUploaded.push(file);
      } else {
        filesUploaded.push(file);
      }
      // call you upload function here, use xmlHTTPrequest so that you can support Progress
      // update the fileMap via .set(filename,fileItem) onProgress and OnUploadComplete
      // dummy uploadFunction and deleteFunction has been added at the bottom of this file (dont use fetch as shown here :) )
      // the file will NOT appear in the editable list unless progress is anything other than 0

      simulateUploadOnFiles(filesThatNeedsToBeUploaded);
    });
    toggleButton(element.valid);

    console.log("----files that should be uploaded", filesThatNeedsToBeUploaded.length, "----");
    console.log("uploading:", filesThatNeedsToBeUploaded);
    console.log("-------------");

  }, 100));

  // duetDelete event listener
  element.addEventListener("duetDelete", function(e) {
    console.log("duet-upload-delete", e);
    deleteFiles(e.detail.data.deletion.uid);
    toggleButton(element.valid);
  });


  // duetDelete event listener
  element.addEventListener("duetUpload", function(e) {
    console.log("duet-upload-button-pressed", e);
    e.preventDefault();
  });

  // add duetDone event listener
  element.addEventListener("duetDone", function(e) {
    console.log("duet-upload-done", e);
    toggleButton(element.valid);
  });

  // add duetCancel event listener
  element.addEventListener("duetCancel", function(e) {
    console.log("duet-upload-cancel", e);
    toggleButton(element.valid);
  });

  // add duetCancel event listener
  element.addEventListener("duetState", function(e) {
    console.log("native change", e);
    toggleButton(element.valid);
  });

  // add linkClick event listener
  element.addEventListener("linkClick", function(e) {
    console.log("lick clicked!", e.detail);
  });

  //demo upload functionality
  function uploadFiles(selectedFiles) {
    if (selectedFiles) {
      selectedFiles.forEach(async (item) => {
        let data = new FormData();
        data.append("file", item);
        data.append("metadata", JSON.stringify({
          some: "metadata",
          types: "types",
        }));

        const response = await fetch("/uploads", {
          method: "POST",
          body: data,
        });
        console.log(response);
      });
    }
  }

  //demo delete functionality
  async function deleteFiles(uid) {
    if (uid) {
      console.log("the following files needs to be deleted", uid);
      let data = new FormData();
      data.append("uid", uid);
      data.append("metadata", JSON.stringify({
        some: "metadata",
        types: "types",
      }));

      const response = await fetch("/uploads", {
        method: "DELETE",
        body: data,
      });
      console.log(response);
    }
  }

  //simulation of an upload
  function simulateUploadOnFiles(selectedFiles) {

    if (selectedFiles) {
      selectedFiles.forEach(async (data) => {
        console.log("item passed client validation rules", data.valid);
        //duet upload will handle all clientside validations for you, (types, sizes etc)
        //and display them as erroneous, if you want to handle them yourself, you can do so by modifying the files map
        if (data.valid) {
          console.log("simulating upload of:", data.item.name);
          let progress = 0;
          // get the correct map item for the files Map
          const filesElement = element.files.get(data.item.name);

          // starts a timer with a bit of randomness to simulate an upload
          const interval = setInterval(() => {
            progress += Math.floor(Math.random() * 11);
            if (progress > 100) {
              progress = 100;
              element.updateValue(data.item.name, "progress", progress);
              element.updateValue(data.item.name, "uploaded", true);
              element.updateValue(data.item.name, "url", "fakeUrl");
              clearInterval(interval);
            } else {
              // update the progress value on the item
              element.updateValue(data.item.name, "progress", progress);
            }
          }, 250);
        }
      });
    }

  }
</script>