huply 0.4.13 → 0.4.15

package/dist/huply.es.js

@@ -4,7 +4,7 @@ function v(r) {
 function x(r) {
   return r instanceof Element;
 }
-function f(r) {
+function C(r) {
   return r !== void 0;
 }
 function y(r) {
@@ -13,7 +13,7 @@ function y(r) {
 function T(r) {
   return r != null && parseInt(r, 10) === r;
 }
-class C {
+class f {
   store;
   constructor(e) {
     this.store = e;
@@ -41,8 +41,8 @@ class b {
   sendChunkedFile(e, t, s = 0) {
     const i = this.store.options.chunkRetries ?? 3;
     if (this.store.options.chunkSize && e.size && e.data) {
-      const l = this.store.options.chunkSize * 1024 * 1024, n = t + l, a = n + 1, o = Math.min(n, e.size), g = e.data.slice(t, a);
-      let p = new C(this.store).request("POST", this.store.options.uploadUrl);
+      const a = this.store.options.chunkSize * 1024 * 1024, l = t + a, n = l + 1, o = Math.min(l, e.size), g = e.data.slice(t, n);
+      let p = new f(this.store).request("POST", this.store.options.uploadUrl);
       const m = "bytes " + t + "-" + o + "/" + e.size;
       p.setRequestHeader("Content-Range", m), p.addEventListener("load", () => {
         if (p.status === 200) {
@@ -50,7 +50,7 @@ class b {
             const u = JSON.parse(p.response);
             u.filename && (e.name = u.filename);
           }
-          e.size && (e.uploadProcess = Math.min(Math.ceil(n / e.size * 100), 100)), o === e.size ? (e.status = "uploaded", this.store.updateFileItem(e), this.upload()) : (this.store.updateFileItem(e), this.sendChunkedFile(e, a));
+          e.size && (e.uploadProcess = Math.min(Math.ceil(l / e.size * 100), 100)), o === e.size ? (e.status = "uploaded", this.store.updateFileItem(e), this.upload()) : (this.store.updateFileItem(e), this.sendChunkedFile(e, n));
         } else
           s < i ? this.sendChunkedFile(e, t, s + 1) : (e.status = "error", this.store.updateFileItem(e), this.upload());
       }), p.addEventListener("error", () => {
@@ -62,26 +62,26 @@ class b {
   }
   sendFile(e) {
     return e.status = "uploading", e.uploadProcess = 0, this.store.updateFileItem(e), new Promise((t, s) => {
-      let i = new C(this.store).request("POST", this.store.options.uploadUrl);
-      i.setRequestHeader("accept", "application/json"), i.upload.addEventListener("progress", (n) => {
-        e.uploadProcess = n.loaded / n.total * 100, this.store.updateFileItem(e);
+      let i = new f(this.store).request("POST", this.store.options.uploadUrl);
+      i.setRequestHeader("accept", "application/json"), i.upload.addEventListener("progress", (l) => {
+        e.uploadProcess = l.loaded / l.total * 100, this.store.updateFileItem(e);
       }), i.addEventListener("load", () => {
         if (i.status === 200) {
           if (t(i.response), i.response) {
-            const n = JSON.parse(i.response);
-            n.filename && (e.name = n.filename);
+            const l = JSON.parse(i.response);
+            l.filename && (e.name = l.filename);
           }
           e.status = "uploaded", this.store.updateFileItem(e), this.upload();
         } else
           s(i.response), e.status = "error", this.store.updateFileItem(e), this.upload();
       });
-      let l = new FormData();
-      e.data && l.append("file", e.data), this.store.options?.maxFileSize && l.append("max_file_size", this.store.options.maxFileSize * 1024), i.send(l);
+      let a = new FormData();
+      e.data && a.append("file", e.data), this.store.options?.maxFileSize && a.append("max_file_size", this.store.options.maxFileSize * 1024), i.send(a);
     });
   }
 }
 function d(r, e) {
-  if (f(window.huplyTranslations[r])) {
+  if (C(window.huplyTranslations[r])) {
     let t = window.huplyTranslations[r];
     return e && Object.entries(e).forEach((s) => {
       t = t.replace("{{" + s[0] + "}}", s[1]);
@@ -152,9 +152,11 @@ class c {
         status: "preloaded"
       };
       this.checkIfIsImage(e.name) && s.size && s.size <= this.store.maxSizeImageView && e.url ? this.getBlobFromUrl(e.url).then((i) => {
-        this.getDataUrlFromFile(i).then((l) => {
-          s.url = l, t(s);
+        this.getDataUrlFromFile(i).then((a) => {
+          s.url = a, t(s);
         });
+      }).catch(() => {
+        t(s);
       }) : t(s);
     });
   }
@@ -168,7 +170,7 @@ class c {
   }
   getBlobFromUrl(e) {
     return new Promise((t, s) => {
-      const i = new C(this.store).request("GET", e);
+      const i = new f(this.store).request("GET", e);
       i.responseType = "blob", i.send(), i.addEventListener("load", () => {
         i.status === 200 ? t(i.response) : s(!1);
       });
@@ -184,9 +186,9 @@ class M {
   constructor(e, t) {
     this.el = e.cloneNode(!0), this.el.setAttribute("name", `${e.getAttribute("name")}_real`), this.el.classList.add("huply-input"), t.options?.allowedFileTypes && this.el.setAttribute("accept", t.options?.allowedFileTypes.join(",")), this.el.addEventListener("change", (s) => {
       s.preventDefault(), s.target && [...s.target.files].forEach((i) => {
-        const n = new z(t).isValidFile(i);
-        new c(t).generateFileItemFromFile(i).then((a) => {
-          t.addFileItem(a), n.length !== 0 && (a.status = "error", a.statusMsg = n.map((o) => o.msg).join(", "), t.updateFileItem(a)), new b(t).upload();
+        const l = new z(t).isValidFile(i);
+        new c(t).generateFileItemFromFile(i).then((n) => {
+          t.addFileItem(n), l.length !== 0 && (n.status = "error", n.statusMsg = l.map((o) => o.msg).join(", "), t.updateFileItem(n)), new b(t).upload();
         });
       });
     });
@@ -262,7 +264,7 @@ let H = class {
     if (e.classList.add("huply-file-item-visual"), new c(this.store).checkIfIsImage(this.fileItem.name))
       if (this.fileItem.url) {
         const s = document.createElement("img");
-        s.classList.add("is-hidden"), e.appendChild(s), s.setAttribute("src", this.fileItem.url), setTimeout(() => {
+        s.setAttribute("draggable", "false"), s.classList.add("is-hidden"), e.appendChild(s), s.setAttribute("src", this.fileItem.url), setTimeout(() => {
           s.classList.remove("is-hidden");
         }, 5);
       } else
@@ -279,7 +281,7 @@ let H = class {
   }
   getDeleteAction() {
     const e = document.createElement("a");
-    return e.setAttribute("href", "#"), e.classList.add("huply-file-item-actions-delete"), e.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424 80C437.3 80 448 90.75 448 104C448 117.3 437.3 128 424 128H412.4L388.4 452.7C385.9 486.1 358.1 512 324.6 512H123.4C89.92 512 62.09 486.1 59.61 452.7L35.56 128H24C10.75 128 0 117.3 0 104C0 90.75 10.75 80 24 80H93.82L130.5 24.94C140.9 9.357 158.4 0 177.1 0H270.9C289.6 0 307.1 9.358 317.5 24.94L354.2 80H424zM177.1 48C174.5 48 171.1 49.34 170.5 51.56L151.5 80H296.5L277.5 51.56C276 49.34 273.5 48 270.9 48H177.1zM364.3 128H83.69L107.5 449.2C108.1 457.5 115.1 464 123.4 464H324.6C332.9 464 339.9 457.5 340.5 449.2L364.3 128z"/></svg>', e.addEventListener("click", (t) => {
+    return e.setAttribute("href", "#"), e.setAttribute("draggable", "false"), e.classList.add("huply-file-item-actions-delete"), e.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424 80C437.3 80 448 90.75 448 104C448 117.3 437.3 128 424 128H412.4L388.4 452.7C385.9 486.1 358.1 512 324.6 512H123.4C89.92 512 62.09 486.1 59.61 452.7L35.56 128H24C10.75 128 0 117.3 0 104C0 90.75 10.75 80 24 80H93.82L130.5 24.94C140.9 9.357 158.4 0 177.1 0H270.9C289.6 0 307.1 9.358 317.5 24.94L354.2 80H424zM177.1 48C174.5 48 171.1 49.34 170.5 51.56L151.5 80H296.5L277.5 51.56C276 49.34 273.5 48 270.9 48H177.1zM364.3 128H83.69L107.5 449.2C108.1 457.5 115.1 464 123.4 464H324.6C332.9 464 339.9 457.5 340.5 449.2L364.3 128z"/></svg>', e.addEventListener("click", (t) => {
       t.preventDefault(), this.store.deleteFileItem(this.fileItem);
     }), e;
   }
@@ -313,10 +315,10 @@ class D {
       e.classList.remove("is-drag-over");
     }), e.addEventListener("drop", (s) => {
       if (s.preventDefault(), e.classList.remove("is-drag-over"), this.dragSrcEl && this.dragSrcEl !== e) {
-        const i = Array.from(this.fileList.children), l = i.indexOf(this.dragSrcEl), n = i.indexOf(e);
-        l < n ? this.fileList.insertBefore(this.dragSrcEl, e.nextSibling) : this.fileList.insertBefore(this.dragSrcEl, e);
-        const a = Array.from(this.fileList.children).map((o) => o.dataset.fileId ?? "").filter((o) => o !== "");
-        this.store.reorderFiles(a);
+        const i = Array.from(this.fileList.children), a = i.indexOf(this.dragSrcEl), l = i.indexOf(e);
+        a < l ? this.fileList.insertBefore(this.dragSrcEl, e.nextSibling) : this.fileList.insertBefore(this.dragSrcEl, e);
+        const n = Array.from(this.fileList.children).map((o) => o.dataset.fileId ?? "").filter((o) => o !== "");
+        this.store.reorderFiles(n);
       }
     });
   }
@@ -356,9 +358,9 @@ class S {
         for (var s = 0; s < e.dataTransfer.items.length; s++) {
           const i = e.dataTransfer.items[s].getAsFile();
           if (i) {
-            const n = new z(this.store).isValidFile(i);
-            new c(this.store).generateFileItemFromFile(i).then((a) => {
-              this.store.addFileItem(a), n.length !== 0 && (a.status = "error", a.statusMsg = n.map((o) => o.msg).join(", "), this.store.updateFileItem(a)), t.upload();
+            const l = new z(this.store).isValidFile(i);
+            new c(this.store).generateFileItemFromFile(i).then((n) => {
+              this.store.addFileItem(n), l.length !== 0 && (n.status = "error", n.statusMsg = l.map((o) => o.msg).join(", "), this.store.updateFileItem(n)), t.upload();
             });
           }
         }
@@ -479,8 +481,8 @@ class P {
     e.appendChild(s);
     let i;
     this.store.options.dropzoneTheme === "sm" ? (i = new A(this.store), e.appendChild(i.render())) : (i = new U(this.store), e.appendChild(i.render()));
-    const l = new D(this.store);
-    return e.appendChild(l.render()), this.store.setComponent("input", t), this.store.setComponent("dropzone", i), this.store.setComponent("fileList", l), e;
+    const a = new D(this.store);
+    return e.appendChild(a.render()), this.store.setComponent("input", t), this.store.setComponent("dropzone", i), this.store.setComponent("fileList", a), e;
   }
 }
 const k = {
@@ -515,10 +517,10 @@ class V {
   constructor() {
   }
   subscribe(e, t) {
-    return f(this.events[e]) || (this.events[e] = []), this.events[e].push(t);
+    return C(this.events[e]) || (this.events[e] = []), this.events[e].push(t);
   }
   publish(e, t = {}) {
-    return f(this.events[e]) ? this.events[e].map((s) => s(t)) : [];
+    return C(this.events[e]) ? this.events[e].map((s) => s(t)) : [];
   }
 }
 class O {
@@ -548,7 +550,7 @@ class O {
   }
   deleteFileItem(e) {
     if (this.options.deleteUrl && e.status === "uploaded") {
-      let t = new C(this).request("DELETE", this.options.deleteUrl.replace("{{filename}}", encodeURI(e.name)));
+      let t = new f(this).request("DELETE", this.options.deleteUrl.replace("{{filename}}", encodeURI(e.name)));
       t.setRequestHeader("accept", "application/json");
       let s = new FormData();
       s.append("filename", e.name), t.send(s), t.addEventListener("load", () => {
@@ -561,7 +563,8 @@ class O {
     return {
       uploaded: this.getFilesUploaded(),
       preloaded: this.getFilesPreloaded(),
-      deleted: this.getFilesDeleted()
+      deleted: this.getFilesDeleted(),
+      order: this.files.filter((e) => e.status !== "deleted").map((e) => ({ id: e.id, name: e.name, status: e.status }))
     };
   }
   getFilesDeleted() {
@@ -582,7 +585,7 @@ class O {
   reorderFiles(e) {
     const t = [];
     e.forEach((s) => {
-      const i = this.files.find((l) => l.id === s);
+      const i = this.files.find((a) => a.id === s);
       i && t.push(i);
     }), this.files.forEach((s) => {
       e.includes(s.id) || t.push(s);
@@ -621,12 +624,12 @@ class q {
     s && (t.dropzoneTheme = s);
     const i = this.el?.getAttribute("data-max-concurrent-uploads");
     i && (t.maxConcurrentUploads = Number(i));
-    const l = this.el?.getAttribute("data-max-file-size");
-    l && (t.maxFileSize = Number(l));
-    const n = this.el?.getAttribute("data-upload-url");
-    n && (t.uploadUrl = n);
-    const a = this.el?.getAttribute("data-delete-url");
-    a && (t.deleteUrl = a);
+    const a = this.el?.getAttribute("data-max-file-size");
+    a && (t.maxFileSize = Number(a));
+    const l = this.el?.getAttribute("data-upload-url");
+    l && (t.uploadUrl = l);
+    const n = this.el?.getAttribute("data-delete-url");
+    n && (t.deleteUrl = n);
     const o = this.el?.getAttribute("data-headers");
     o && (t.headers = JSON.parse(o));
     const g = this.el?.getAttribute("data-preloaded-files");
@@ -678,8 +681,8 @@ class I {
     if (v(window.huplyTranslations))
       this.store.setTranslations(window.huplyTranslations);
     else {
-      const l = document.querySelector("html")?.getAttribute("lang");
-      l === "en" || l === "de" ? (window.huplyTranslations = i[this.options.lang], this.store.setTranslations(i[this.options.lang])) : (window.huplyTranslations = i.en, this.store.setTranslations(i.en));
+      const a = document.querySelector("html")?.getAttribute("lang");
+      a === "en" || a === "de" ? (window.huplyTranslations = i[this.options.lang], this.store.setTranslations(i[this.options.lang])) : (window.huplyTranslations = i.en, this.store.setTranslations(i.en));
     }
     return this;
   }
@@ -693,8 +696,10 @@ class I {
     }
     if (this.options?.preloadedFiles?.length) {
       const e = new c(this.store);
-      this.options.preloadedFiles.forEach((t) => {
-        e.generateFileItemFromPreloaded(t).then((s) => {
+      Promise.all(this.options.preloadedFiles.map(
+        (t) => e.generateFileItemFromPreloaded(t)
+      )).then((t) => {
+        t.forEach((s) => {
           this.store.addFileItem(s), s.status = "preloaded", this.store.updateFileItem(s);
         });
       });