@idds/js 1.0.58 → 1.0.59

package/dist/index.iife.js

@@ -998,18 +998,10 @@ var InaUI = (() => {
         filesContainer.className = `${PREFIX}-file-upload__files`;
         container.appendChild(filesContainer);
       }
-      let errorsContainer = container.querySelector(
-        `.${PREFIX}-file-upload__errors`
-      );
-      if (!errorsContainer) {
-        errorsContainer = document.createElement("div");
-        errorsContainer.className = `${PREFIX}-file-upload__errors`;
-        container.appendChild(errorsContainer);
-      }
       if (!input || !dropzone) return;
       const maxFiles = parseInt(container.getAttribute("data-max-files")) || 0;
       const maxSize = parseInt(container.getAttribute("data-max-size")) || 0;
-      const allowedExtensions = (container.getAttribute("data-allowed-extensions") || "").split(",").filter(Boolean);
+      const allowedExtensions = (container.getAttribute("data-allowed-extensions") || "").toLowerCase().split(",").map((ext) => ext.trim()).filter(Boolean);
       const multiple = input.hasAttribute("multiple");
       let uploadedFiles = [];
       const formatFileSize = (bytes) => {
@@ -1023,7 +1015,7 @@ var InaUI = (() => {
       const validateFile = (file) => {
         if (allowedExtensions.length > 0) {
           const ext = file.name.split(".").pop().toLowerCase();
-          if (!allowedExtensions.includes(ext.toLowerCase())) {
+          if (!allowedExtensions.includes(ext)) {
             return {
               valid: false,
               error: `Ekstensi file harus: ${allowedExtensions.join(", ")}`
@@ -1040,7 +1032,11 @@ var InaUI = (() => {
       };
       const renderFiles = () => {
         filesContainer.innerHTML = "";
-        errorsContainer.innerHTML = "";
+        if (uploadedFiles.length > 0) {
+          filesContainer.style.display = "flex";
+        } else {
+          filesContainer.style.display = "none";
+        }
         uploadedFiles.forEach((f, index) => {
           const fileEl = document.createElement("div");
           fileEl.className = `${PREFIX}-file-upload__file`;
@@ -1085,59 +1081,63 @@ var InaUI = (() => {
         });
       };
       const addFiles = (newFiles) => {
-        const validNewFiles = [];
-        const errors = [];
+        const addedFiles = [];
         Array.from(newFiles).forEach((file) => {
           const validation = validateFile(file);
           if (!validation.valid) {
-            errors.push({ file, error: validation.error });
+            addedFiles.push({
+              file,
+              status: "error",
+              error: validation.error,
+              id: generateId()
+            });
           } else {
-            validNewFiles.push({
+            addedFiles.push({
               file,
               status: "idle",
-              // In vanilla we might simulate upload or just set success immediately
               id: generateId()
             });
           }
         });
+        const existingValidCount = uploadedFiles.filter(
+          (f) => f.status !== "error"
+        ).length;
+        const newValidCount = addedFiles.filter(
+          (f) => f.status !== "error"
+        ).length;
         if (multiple && maxFiles > 0) {
-          if (uploadedFiles.length + validNewFiles.length > maxFiles) {
-            const spaceLeft = maxFiles - uploadedFiles.length;
-            if (spaceLeft > 0) {
-              validNewFiles.splice(spaceLeft);
-            } else {
-              validNewFiles.length = 0;
+          if (existingValidCount + newValidCount > maxFiles) {
+            let validFiles = addedFiles.filter((f) => f.status !== "error");
+            let errorFiles = addedFiles.filter((f) => f.status === "error");
+            const spaceLeft = maxFiles - existingValidCount;
+            if (spaceLeft < validFiles.length) {
+              validFiles = validFiles.slice(0, spaceLeft);
             }
+            const limitedAddedFiles = [...errorFiles, ...validFiles];
           }
         }
         if (!multiple) {
-          uploadedFiles = validNewFiles.slice(0, 1);
+          uploadedFiles = addedFiles.slice(0, 1);
         } else {
-          uploadedFiles = [...uploadedFiles, ...validNewFiles];
+          uploadedFiles = [...uploadedFiles, ...addedFiles];
         }
-        errorsContainer.innerHTML = "";
-        errors.forEach((err) => {
-          const errEl = document.createElement("div");
-          errEl.className = `${PREFIX}-file-upload__error-message`;
-          errEl.textContent = `${err.file.name}: ${err.error}`;
-          errorsContainer.appendChild(errEl);
-        });
         renderFiles();
         container.dispatchEvent(
           new CustomEvent("file-upload:change", {
             detail: {
               files: uploadedFiles.map((f) => f.file),
-              errors
+              errors: uploadedFiles.filter((f) => f.status === "error").map((f) => ({ file: f.file, error: f.error }))
             },
             bubbles: true
           })
         );
-        validNewFiles.forEach((f) => {
+        const filesToUpload = uploadedFiles.filter((f) => f.status === "idle");
+        filesToUpload.forEach((f) => {
           f.status = "uploading";
         });
         renderFiles();
         setTimeout(() => {
-          validNewFiles.forEach((f) => {
+          filesToUpload.forEach((f) => {
             f.status = "success";
           });
           renderFiles();

package/dist/index.js

@@ -1001,18 +1001,10 @@ function initFileUpload(rootSelector = `.${PREFIX}-file-upload`) {
       filesContainer.className = `${PREFIX}-file-upload__files`;
       container.appendChild(filesContainer);
     }
-    let errorsContainer = container.querySelector(
-      `.${PREFIX}-file-upload__errors`
-    );
-    if (!errorsContainer) {
-      errorsContainer = document.createElement("div");
-      errorsContainer.className = `${PREFIX}-file-upload__errors`;
-      container.appendChild(errorsContainer);
-    }
     if (!input || !dropzone) return;
     const maxFiles = parseInt(container.getAttribute("data-max-files")) || 0;
     const maxSize = parseInt(container.getAttribute("data-max-size")) || 0;
-    const allowedExtensions = (container.getAttribute("data-allowed-extensions") || "").split(",").filter(Boolean);
+    const allowedExtensions = (container.getAttribute("data-allowed-extensions") || "").toLowerCase().split(",").map((ext) => ext.trim()).filter(Boolean);
     const multiple = input.hasAttribute("multiple");
     let uploadedFiles = [];
     const formatFileSize = (bytes) => {
@@ -1026,7 +1018,7 @@ function initFileUpload(rootSelector = `.${PREFIX}-file-upload`) {
     const validateFile = (file) => {
       if (allowedExtensions.length > 0) {
         const ext = file.name.split(".").pop().toLowerCase();
-        if (!allowedExtensions.includes(ext.toLowerCase())) {
+        if (!allowedExtensions.includes(ext)) {
           return {
             valid: false,
             error: `Ekstensi file harus: ${allowedExtensions.join(", ")}`
@@ -1043,7 +1035,11 @@ function initFileUpload(rootSelector = `.${PREFIX}-file-upload`) {
     };
     const renderFiles = () => {
       filesContainer.innerHTML = "";
-      errorsContainer.innerHTML = "";
+      if (uploadedFiles.length > 0) {
+        filesContainer.style.display = "flex";
+      } else {
+        filesContainer.style.display = "none";
+      }
       uploadedFiles.forEach((f, index) => {
         const fileEl = document.createElement("div");
         fileEl.className = `${PREFIX}-file-upload__file`;
@@ -1088,59 +1084,63 @@ function initFileUpload(rootSelector = `.${PREFIX}-file-upload`) {
       });
     };
     const addFiles = (newFiles) => {
-      const validNewFiles = [];
-      const errors = [];
+      const addedFiles = [];
       Array.from(newFiles).forEach((file) => {
         const validation = validateFile(file);
         if (!validation.valid) {
-          errors.push({ file, error: validation.error });
+          addedFiles.push({
+            file,
+            status: "error",
+            error: validation.error,
+            id: generateId()
+          });
         } else {
-          validNewFiles.push({
+          addedFiles.push({
             file,
             status: "idle",
-            // In vanilla we might simulate upload or just set success immediately
             id: generateId()
           });
         }
       });
+      const existingValidCount = uploadedFiles.filter(
+        (f) => f.status !== "error"
+      ).length;
+      const newValidCount = addedFiles.filter(
+        (f) => f.status !== "error"
+      ).length;
       if (multiple && maxFiles > 0) {
-        if (uploadedFiles.length + validNewFiles.length > maxFiles) {
-          const spaceLeft = maxFiles - uploadedFiles.length;
-          if (spaceLeft > 0) {
-            validNewFiles.splice(spaceLeft);
-          } else {
-            validNewFiles.length = 0;
+        if (existingValidCount + newValidCount > maxFiles) {
+          let validFiles = addedFiles.filter((f) => f.status !== "error");
+          let errorFiles = addedFiles.filter((f) => f.status === "error");
+          const spaceLeft = maxFiles - existingValidCount;
+          if (spaceLeft < validFiles.length) {
+            validFiles = validFiles.slice(0, spaceLeft);
           }
+          const limitedAddedFiles = [...errorFiles, ...validFiles];
         }
       }
       if (!multiple) {
-        uploadedFiles = validNewFiles.slice(0, 1);
+        uploadedFiles = addedFiles.slice(0, 1);
       } else {
-        uploadedFiles = [...uploadedFiles, ...validNewFiles];
+        uploadedFiles = [...uploadedFiles, ...addedFiles];
       }
-      errorsContainer.innerHTML = "";
-      errors.forEach((err) => {
-        const errEl = document.createElement("div");
-        errEl.className = `${PREFIX}-file-upload__error-message`;
-        errEl.textContent = `${err.file.name}: ${err.error}`;
-        errorsContainer.appendChild(errEl);
-      });
       renderFiles();
       container.dispatchEvent(
         new CustomEvent("file-upload:change", {
           detail: {
             files: uploadedFiles.map((f) => f.file),
-            errors
+            errors: uploadedFiles.filter((f) => f.status === "error").map((f) => ({ file: f.file, error: f.error }))
           },
           bubbles: true
         })
       );
-      validNewFiles.forEach((f) => {
+      const filesToUpload = uploadedFiles.filter((f) => f.status === "idle");
+      filesToUpload.forEach((f) => {
         f.status = "uploading";
       });
       renderFiles();
       setTimeout(() => {
-        validNewFiles.forEach((f) => {
+        filesToUpload.forEach((f) => {
           f.status = "success";
         });
         renderFiles();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.0.58",
+  "version": "1.0.59",
   "publishConfig": {
     "access": "public"
   },