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',const resizeHandler = function (elmntName) {
         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').lengthclosest('#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
 -    });
+}
 /**

     } else {
         console.error('Failed to append the template content or retrieve the appended content.');
+    }
+-
 -    $('body').on('click', '.dragClose', function () {
 -        const relatedId = $(this).data('related-id');  // Get the ID of the related draggable
 -        $(`#${relatedId}`).remove();  // Remove the associated draggable
 -    });
+}
 /**

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

     },
     helpString: 'Shows the gallery.',
 }));
 SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'list-gallery',
 +    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);
         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));
     } catch (err) {
         console.trace();