[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX] File gallery uploader: prevent premature close and ensure all file IDs...

Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
b30d71ff by Espoir Baraka at 2026-04-17T17:18:47+00:00
[FIX] File gallery uploader: prevent premature close and ensure all file IDs...
---
* [FIX] File gallery uploader: prevent premature close and ensure all file IDs are inserted in wiki page

See merge request tikiwiki/tiki!9367

- - - - -


3 changed files:

- lib/jquery_tiki/tiki-jquery.js
- src/js/vue-widgets/element-plus-ui/src/components/FileGalUploader/FileGalUploader.vue
- src/js/vue-widgets/element-plus-ui/src/tests/components/FileGalUploader.test.js


Changes:

=====================================
lib/jquery_tiki/tiki-jquery.js
=====================================
@@ -799,8 +799,21 @@ $document.on('pageSearchReady', function() {
     $.paginationHelper();
 });
 
-// moved from tiki-list_file_gallery.tpl in tiki 6
-function checkClose() {
+/**
+ * File gallery / upload manager popup: after the user picks a file (or the Vue
+ * uploader finishes inserting syntax), either close this window or leave it open.
+ *
+ * Behaviour depends on the "Keep gallery window open" checkbox (#keepOpenCbx) in
+ * templates such as tiki-list_file_gallery.tpl and tiki-upload_file.tpl. State is
+ * synced with the fgalKeepOpen session cookie (see the ready handler above).
+ *
+ * This is intentionally on window so legacy inline onclick handlers and the
+ * FileGalUploader Vue widget can share one implementation without bundling jQuery
+ * into the widget build.
+ *
+ * @returns {void}
+ */
+function tikiCloseFileGalleryManagerWindow() {
     if (!$("#keepOpenCbx").prop("checked")) {
         window.close();
     } else {
@@ -810,6 +823,15 @@ function checkClose() {
         }
     }
 }
+window.tikiCloseFileGalleryManagerWindow = tikiCloseFileGalleryManagerWindow;
+
+/**
+ * @deprecated Prefer {@link window.tikiCloseFileGalleryManagerWindow} in new code.
+ * Kept as a global for existing template onclick handlers (e.g. list_file_gallery_content.tpl).
+ */
+function checkClose() {
+    tikiCloseFileGalleryManagerWindow();
+}
 
 
 /*


=====================================
src/js/vue-widgets/element-plus-ui/src/components/FileGalUploader/FileGalUploader.vue
=====================================
@@ -15,6 +15,9 @@ const maxFiles = JSON.parse(props.maxFiles);
 const uploadRef = ref(null);
 const insertIntoEditor = ref(false);
 const uploadedFiles = ref([]);
+const totalFilesToUpload = ref(0);
+const completedUploads = ref(0);
+const submitCalled = ref(false);
 
 onMounted(() => {
     const searcParams = new URLSearchParams(location.search);
@@ -24,6 +27,14 @@ onMounted(() => {
 })
 
 const submitUpload = () => {
+    submitCalled.value = true;
+    if (uploadRef.value && uploadRef.value.uploadFiles) {
+        totalFilesToUpload.value = uploadRef.value.uploadFiles.length;
+        completedUploads.value = 0;
+    } else if (uploadRef.value) {
+        totalFilesToUpload.value = 0;
+        completedUploads.value = 0;
+    }
     uploadRef.value.submit();
 }
 
@@ -35,25 +46,60 @@ const beforeUpload = (rawFile) => {
     }
 }
 
+/**
+ * When opened as a file gallery manager (filegals_manager=…), inserts use
+ * window.opener.insertAt; closing the popup is handled by the shared jQuery
+ * helper on window (reads #keepOpenCbx — see tiki-jquery.js).
+ */
+const closeGalleryManagerAfterInsert = () => {
+    window.tikiCloseFileGalleryManagerWindow?.();
+};
+
+const checkAllUploadsComplete = () => {
+    if (totalFilesToUpload.value > 0) {
+        if (completedUploads.value >= totalFilesToUpload.value) {
+            if (insertIntoEditor.value) {
+                closeGalleryManagerAfterInsert();
+            }
+        }
+    }
+}
+
 const handleUploadError = (error) => {
     ElMessage.error(error.message)
+    completedUploads.value++;
+    checkAllUploadsComplete();
 }
 
 const handleUploadSuccess = (response, file) => {
     ElMessage.success(`${file.name} uploaded successfully`)
 
+    const syntax = response.syntax || `{img fileId="${response.fileId}" thumb="box"}`;
+
     // Store uploaded file info
     uploadedFiles.value.push({
         name: file.name,
         fileId: response.fileId,
-        syntax: `{img fileId="${response.fileId}" thumb="box"}`
+        syntax: syntax
     });
 
     const searcParams = new URLSearchParams(location.search);
     if (insertIntoEditor.value) {
-        window.opener.insertAt(searcParams.get('filegals_manager'), response.syntax, false, false, true);
-        checkClose();
+        window.opener.insertAt(searcParams.get('filegals_manager'), syntax, false, false, true);
+    }
+
+    if (totalFilesToUpload.value === 0) {
+        if (uploadRef.value && uploadRef.value.uploadFiles && uploadRef.value.uploadFiles.length > 0) {
+            totalFilesToUpload.value = uploadRef.value.uploadFiles.length;
+        } else if (!submitCalled.value) {
+            totalFilesToUpload.value = 1;
+        }
     }
+
+    completedUploads.value++;
+
+    checkAllUploadsComplete();
+    
     if (props.vimeoUrl) {
         completeVimeoUpload(file.name);
     }


=====================================
src/js/vue-widgets/element-plus-ui/src/tests/components/FileGalUploader.test.js
=====================================
@@ -234,7 +234,7 @@ describe("FileGalUploader", () => {
             window.opener = {
                 insertAt: vi.fn(),
             };
-            window.checkClose = vi.fn();
+            window.tikiCloseFileGalleryManagerWindow = vi.fn();
             const givenProps = {
                 maxSize: "100",
                 maxFiles: "10",
@@ -247,7 +247,7 @@ describe("FileGalUploader", () => {
             await waitFor(() => {
                 expect(window.opener.insertAt).toHaveBeenCalledWith("editwiki", "syntax mock", false, false, true);
             });
-            expect(window.checkClose).toHaveBeenCalled();
+            expect(window.tikiCloseFileGalleryManagerWindow).toHaveBeenCalled();
         });
 
         test("calls the vimeo upload callback when the file is uploaded for vimeo uploads", async () => {



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/b30d71ffdf6579cb81fb7c280e2b4b10700f7bcf

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/b30d71ffdf6579cb81fb7c280e2b4b10700f7bcf
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs