Fix gallery duplicate uploads

8dd5d9321d940360a596cfd3f2654a737206b69e

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/global.d.ts+2 -0 Viewed

 // Jquery plugins
 interface JQuery {
+    nanogallery2(options?: any): JQuery;
+    nanogallery2(method: string, options?: any): JQuery;
     pagination(method: 'getCurrentPageNum'): number;
     pagination(method: string, options?: any): JQuery;
     pagination(options?: any): JQuery;

public/scripts/extensions/gallery/index.js+53 -33 Viewed

     this_chid,
     characters,
     getRequestHeaders,
+    event_types,
 } from '../../../script.js';
 import { groups, selected_group } from '../../group-chats.js';
 import { loadFileToDocument, delay } from '../../utils.js';

 let paginationMaxLinesPerPage = 2;
 let galleryMaxRows = 3;
+$('body').on('click', '.dragClose', function () {
+    const relatedId = $(this).data('related-id');  // Get the ID of the related draggable
+    $(`body > .draggable[id="${relatedId}"]`).remove();  // Remove the associated draggable
+});
+const CUSTOM_GALLERY_REMOVED_EVENT = 'galleryRemoved';
+const mutationObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        mutation.removedNodes.forEach((node) => {
+            if (node instanceof HTMLElement && node.tagName === 'DIV' && node.id === 'gallery') {
+                eventSource.emit(CUSTOM_GALLERY_REMOVED_EVENT);
+            }
+        });
+    });
+});
+mutationObserver.observe(document.body, {
+    childList: true,
+    subtree: false,
+});
 /**
  * Retrieves a list of gallery items based on a given URL. This function calls an API endpoint

  * @returns {Promise<void>} - Promise representing the completion of the gallery initialization.
  */
 async function initGallery(items, url) {
+    const nonce = `nonce-${Math.random().toString(36).substring(2, 15)}`;
     const gallery = $('#dragGallery');
+    gallery.addClass(nonce);
     gallery.nanogallery2({
         'items': items,
         thumbnailWidth: 'auto',

         fnThumbnailOpen: viewWithDragbox,
     });
+    const dragDropHandler = new DragAndDropHandler(`#dragGallery.${nonce}`, async (files, event) => {
+        let file = files[0];
+        uploadFile(file, url);  // Added url parameter to know where to upload
+    });
-    eventSource.on('resizeUI', function (elmntName) {
+    const resizeHandler = function () {
         gallery.nanogallery2('resize');
-    });
+    };
-    const dragDropHandler = new DragAndDropHandler('#dragGallery', async (files, event) => {
+    eventSource.on('resizeUI', resizeHandler);
-        let file = files[0];
-        uploadFile(file, url);  // Added url parameter to know where to upload
+    eventSource.once(event_types.CHAT_CHANGED, function () {
+        gallery.closest('#gallery').remove();
     });
+    eventSource.once(CUSTOM_GALLERY_REMOVED_EVENT, function () {
+        gallery.nanogallery2('destroy');
+        dragDropHandler.destroy();
+        eventSource.removeListener('resizeUI', resizeHandler);
+    });
     // Set dropzone height to be the same as the parent
     gallery.css('height', gallery.parent().css('height'));

         const items = await getGalleryItems(url);
         // if there already is a gallery, destroy it and place this one in its place
-        if ($('#dragGallery').length) {
+        $('#dragGallery').closest('#gallery').remove();
-            $('#dragGallery').nanogallery2('destroy');
+        makeMovable();
-            initGallery(items, url);
+        await delay(100);
-        } else {
+        await initGallery(items, url);
-            makeMovable();
-            setTimeout(async () => {
-                await initGallery(items, url);
-            }, 100);
-        }
     } catch (err) {
         console.trace();
         console.error(err);

             toastr.success('File uploaded successfully. Saved at: ' + result.path);
             // Refresh the gallery
-            $('#dragGallery').nanogallery2('destroy');  // Destroy old gallery
             const newItems = await getGalleryItems(url);  // Fetch the latest items
-            initGallery(newItems, url);  // Reinitialize the gallery with new items and pass 'url'
+            $('#dragGallery').closest('#gallery').remove();  // Destroy old gallery
+            makeMovable();
+            await delay(100);
+            await initGallery(newItems, url);  // Reinitialize the gallery with new items and pass 'url'
         } catch (error) {
             console.error('There was an issue uploading the file:', error);

         e.preventDefault();
         return false;
     });
-    $('body').on('click', '.dragClose', function () {
-        const relatedId = $(this).data('related-id');  // Get the ID of the related draggable
-        $(`#${relatedId}`).remove();  // Remove the associated draggable
-    });
+}
 /**

@@ -358,11 +381,6 @@ function makeDragImg(id, url) {
358	} else {	381	} else {
359	console.error('Failed to append the template content or retrieve the appended content.');	382	console.error('Failed to append the template content or retrieve the appended content.');
360	}	383	}
361
362	$('body').on('click', '.dragClose', function () {
363	const relatedId = $(this).data('related-id'); // Get the ID of the related draggable
364	$(`#${relatedId}`).remove(); // Remove the associated draggable
365	});
366	}	384	}
367		385
368	/**	386	/**

 // Registers a simple command for opening the char gallery.
-SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'show-gallery',
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+    name: 'show-gallery',
     aliases: ['sg'],
     callback: () => {
         showCharGallery();

     },
     helpString: 'Shows the gallery.',
 }));
-SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'list-gallery',
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+    name: 'list-gallery',
     aliases: ['lg'],
     callback: listGalleryCommand,
     returns: 'list of images',

 async function listGalleryCommand(args) {
     try {
-        let url = args.char ?? (args.group ? groups.find(it=>it.name == args.group)?.id : null) ?? (selected_group || this_chid);
+        let url = args.char ?? (args.group ? groups.find(it => it.name == args.group)?.id : null) ?? (selected_group || this_chid);
         if (!args.char && !args.group && !selected_group && this_chid) {
             const char = characters[this_chid];
             url = char.avatar.replace('.png', '');
+        }
         const items = await getGalleryItems(url);
-        return JSON.stringify(items.map(it=>it.src));
+        return JSON.stringify(items.map(it => it.src));
     } catch (err) {
         console.trace();