created()

in ui/src/main/frontend/js/cms.fields.js [23:168]

• 64 lines of code
• 7 McCabe index (conditional complexity)

    created() {
      const field = this;
      const close = field.closest("form").querySelector("a.close");

      function setProgress(m, progress) {
        const meter = m;
        meter.innerText = `${Math.round(progress)}%`;
        meter.value = Math.round(progress);
      }
      function uploadFile(meter, action, file) {
        const formData = new FormData();

        formData.append("*", file);
        formData.append("*@TypeHint", "sling:File");
        formData.append("_charset_", "utf-8");

        const xhr = new XMLHttpRequest();
        xhr.upload.addEventListener(
          "loadstart",
          () => {
            setProgress(meter, 0);
          },
          false
        );
        xhr.upload.addEventListener(
          "progress",
          (event) => {
            const percent = (event.loaded / event.total) * 100;
            setProgress(meter, percent);
          },
          false
        );
        xhr.upload.addEventListener(
          "load",
          () => {
            meter.classList.add("is-info");
          },
          false
        );
        xhr.addEventListener(
          "readystatechange",
          (event) => {
            let status;
            let text;
            let readyState;
            try {
              readyState = event.target.readyState;
              text = event.target.responseText;
              status = event.target.status;
            } catch (e) {
              meter.classList.add("is-danger");
            }
            if (readyState === 4) {
              meter.classList.remove("is-info");
              if (status === 200 && text) {
                meter.classList.add("is-success");
              } else {
                meter.classList.add("is-danger");
                console.warn(
                  "Failed to upload %s, recieved message %s",
                  file.name,
                  text
                ); // eslint-disable-line no-console
              }
            }
          },
          false
        );
        xhr.open("POST", action, true);
        xhr.send(formData);
      }
      function handleFile(scope, file) {
        const it = document.createElement("div");
        const ctr = scope
          .closest(".control")
          .querySelector(".file-item-container");
        let meter = null;
        it.innerHTML = document.querySelector(".file-item-template").innerHTML;
        meter = it.querySelector(".progress");
        it.querySelector(".file-item-name").innerText = file.name;
        ctr.classList.remove("is-hidden");
        ctr.appendChild(it);
        uploadFile(meter, scope.closest("form").action, file);
      }

      field.addEventListener(
        "dragover",
        (event) => {
          event.preventDefault();
        },
        false
      );
      field.addEventListener(
        "dragenter",
        (event) => {
          event.preventDefault();
          field.classList.add("is-primary");
        },
        false
      );
      field.addEventListener(
        "dragleave",
        (event) => {
          event.preventDefault();
          if (!field.contains(event.fromElement)) {
            field.classList.remove("is-primary");
          }
        },
        false
      );
      field.addEventListener(
        "drop",
        (event) => {
          event.preventDefault();
          field.classList.remove("is-primary");
          if (event.dataTransfer.items) {
            const { items } = event.dataTransfer;
            for (let i = 0; i < items.length; i++) {
              // eslint-disable-line no-plusplus
              if (items[i].kind === "file") {
                handleFile(field, items[i].getAsFile());
              }
            }
          } else {
            const { files } = event.dataTransfer;
            for (let i = 0; i < files.length; i++) {
              // eslint-disable-line no-plusplus
              handleFile(field, files[i]);
            }
          }
        },
        false
      );
      field.closest("form").querySelector("button[type=submit]").remove();
      close.innerText = "Done";
      close.addEventListener("click", () => {
        window.Sling.CMS.ui.reloadContext();
      });
      field.querySelector("input").addEventListener("change", (event) => {
        const { files } = event.target;
        for (let i = 0; i < files.length; i++) {
          // eslint-disable-line no-plusplus
          handleFile(field, files[i]);
        }
      });
    },