appwrite/public/scripts/views/forms/upload.js

(function(window) {
  "use strict";

  window.ls.container.get("view").add({
    selector: "data-forms-upload",
    controller: function(element, container, alerts, expression, env) {
      var scope = element.dataset["scope"];
      var labelButton = element.dataset["labelButton"] || "Upload";
      var labelLoading = element.dataset["labelLoading"] || "Uploading...";
      var previewWidth = element.dataset["previewWidth"] || 200;
      var previewHeight = element.dataset["previewHeight"] || 200;
      var accept = element.dataset["accept"] || "";
      var required = element.dataset["required"] || false;
      var multiple = element.dataset["multiple"] || false;
      var className = element.dataset["class"] || "upload";
      var max = parseInt(element.dataset["max"] || 4);
      var sdk =
        scope === "sdk" ? container.get("sdk") : container.get("console");
      var output = element.value
        ? multiple
          ? JSON.parse(element.value)
          : [element.value]
        : [];
      var total = 0;

      var wrapper = document.createElement("div");
      var input = document.createElement("input");
      var upload = document.createElement("div"); // Fake button
      var preview = document.createElement("ul");
      var progress = document.createElement("div");
      var count = document.createElement("div");

      wrapper.className = className;

      input.type = "file";
      input.accept = accept;
      input.required = required;
      input.multiple = multiple;
      input.tabIndex = -1;

      count.className = "count";

      upload.className = "button reverse margin-bottom";
      upload.innerHTML = '<i class="icon icon-upload"></i> ' + labelButton;
      upload.tabIndex = 0;

      preview.className = "preview";

      progress.className = "progress";
      progress.style.width = "0%";
      progress.style.display = "none";

      var humanFileSize = function(bytes, si) {
        var thresh = si ? 1000 : 1024;

        if (Math.abs(bytes) < thresh) {
          return bytes + " B";
        }

        var units = si
          ? ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
          : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];

        var u = -1;

        do {
          bytes /= thresh;
          ++u;
        } while (Math.abs(bytes) >= thresh && u < units.length - 1);

        return bytes.toFixed(1) + " " + units[u];
      };

      var onComplete = function(message) {
        alerts.remove(message);

        input.disabled = false;
        upload.classList.remove("disabled");
        progress.style.width = "0%";
        progress.style.display = "none";
      };

      var render = function(files) {
        // Generate image previews + remove buttons + input array (array only when multiple is on)
        if (!Array.isArray(files)) {
          // Support single file
          files = [files];
        }

        preview.innerHTML = "";

        count.innerHTML = "0 / " + max;

        files.map(function(obj) {
          var file = document.createElement("li");
          var image = document.createElement("img");

          image.src = image.src =
            env.API +
            "/storage/files/" +
            obj +
            "/preview?width=" +
            previewWidth +
            "&height=" +
            previewHeight +
            "&project=console";

          file.className = "file avatar";
          file.tabIndex = 0;
          file.appendChild(image);

          count.innerHTML = files.length + " / " + max;

          preview.appendChild(file);

          if (files.length >= max) {
            input.disabled = true;
            upload.classList.add("disabled");
          } else {
            input.disabled = false;
            upload.classList.remove("disabled");
          }

          var remove = (function(obj) {
            return function(event) {
              output = Array.isArray(output)
                ? output.filter(function(e) {
                    return e !== obj;
                  })
                : [];

              render(output);
            };
          })(obj);

          file.addEventListener("click", remove);
          file.addEventListener("keypress", remove);

          element.value = multiple ? JSON.stringify(output) : output[0];
        });
      };

      input.addEventListener("change", function() {
        var message = alerts.add({ text: labelLoading, class: "" }, 0);
        var files = input.files;
        var read = JSON.parse(
          expression.parse(element.dataset["read"] || "[]")
        );
        var write = JSON.parse(
          expression.parse(element.dataset["write"] || "[]")
        );

        if (!multiple) {
          output = [];
        }

        sdk.storage.createFile(files[0], read, write, 1).then(
          function(response) {
            response.map(function(obj) {
              if (!Array.isArray(output)) {
                // Support single file
                throw new Error("Can't append new file to non array value");
              }

              output[output.length] = obj["$uid"];
            });

            onComplete(message);

            render(output);
          },
          function(error) {
            alerts.add({ text: "An error occurred!", class: "" }, 3000); // File(s) uploaded.
            onComplete(message);
          }
        );

        input.disabled = true;
      });

      element.addEventListener("change", function() {
        if (!element.value) {
          return;
        }
        output = multiple ? JSON.parse(element.value) : [element.value];
        render(output);
      });

      upload.addEventListener("keypress", function() {
        input.click();
      });

      element.parentNode.insertBefore(wrapper, element);

      wrapper.appendChild(preview);
      wrapper.appendChild(progress);
      wrapper.appendChild(upload);

      if (multiple) {
        wrapper.appendChild(count);
      }

      upload.appendChild(input);

      render(output);
    }
  });
})(window);