Gallery: add delete functionality for gallery items

96fb85457f211eb2b1c2d564840c9da57c975d95

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

public/script.js+11 -1 Viewed

         const image = messageElement.find('.mes_img');
         const text = messageElement.find('.mes_text');
         const isInline = !!mes.extra?.inline_image;
 -        image.off('load').on('load', function () {
 +        const doAdjustScroll = () => {
             if (!adjustScroll) {
                 return;
+            }

             const newChatHeight = $('#chat').prop('scrollHeight');
             const diff = newChatHeight - chatHeight;
             $('#chat').scrollTop(scrollPosition + diff);
 +        };
 +        image.off('load').on('load', function () {
 +            image.removeAttr('alt');
 +            image.removeClass('error');
 +            doAdjustScroll();
 +        });
 +        image.off('error').on('error', function () {
 +            image.attr('alt', '');
 +            image.addClass('error');
 +            doAdjustScroll();
         });
         image.attr('src', mes.extra?.image);
         image.attr('title', mes.extra?.title || mes.title || '');

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

 import { DragAndDropHandler } from '../../dragdrop.js';
 import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 import { t, translate } from '../../i18n.js';
 +import { Popup } from '../../popup.js';
 const extensionName = 'gallery';
 const extensionFolderPath = `scripts/extensions/${extensionName}/`;
 let firstTime = true;
 +let deleteModeActive = false;
 // Exposed defaults for future tweaking
 let thumbnailHeight = 150;

+}
 /**
 + * Deletes a gallery item based on the provided URL.
 + * @param {string} url - The URL of the image to be deleted.
 + */
 +async function deleteGalleryItem(url) {
 +    try {
 +        const response = await fetch('/api/images/delete', {
 +            method: 'POST',
 +            headers: getRequestHeaders(),
 +            body: JSON.stringify({ path: url }),
 +        });
++
 +        if (!response.ok) {
 +            throw new Error(`HTTP error. Status: ${response.status}`);
 +        }
++
 +        toastr.success(t`Image deleted successfully.`);
 +    } catch (error) {
 +        console.error('Failed to delete the image:', error);
 +        toastr.error(t`Failed to delete the image. Check the console for details.`);
 +    }
 +}
++
 +/**
  * Sets the sort order for the gallery.
  * @param {string} order Sort order
  */

+ *
  * @returns {Promise<void>} - Promise representing the completion of the gallery display process.
  */
 async function showCharGallery(deleteModeState = false) {
     // Load necessary files if it's the first time calling the function
     if (firstTime) {
         await loadFileToDocument(

+    }
     try {
 +        deleteModeActive = deleteModeState;
         let url = selected_group || this_chid;
         if (!selected_group && this_chid !== undefined) {
             url = getGalleryFolder(characters[this_chid]);

     galleryFolderAccept.title = t`Change gallery folder`;
     galleryFolderAccept.addEventListener('click', onChangeFolder);
 +    const galleryDeleteMode = document.createElement('div');
 +    galleryDeleteMode.classList.add('right_menu_button', 'fa-solid', 'fa-trash', 'fa-fw');
 +    galleryDeleteMode.classList.toggle('warning', deleteModeActive);
 +    galleryDeleteMode.title = t`Delete mode`;
 +    galleryDeleteMode.addEventListener('click', () => {
 +        deleteModeActive = !deleteModeActive;
 +        galleryDeleteMode.classList.toggle('warning', deleteModeActive);
 +        if (deleteModeActive) {
 +            toastr.info(t`Delete mode is ON. Click on images you want to delete.`);
 +        }
 +    });
++
     const galleryFolderRestore = document.createElement('div');
     galleryFolderRestore.classList.add('right_menu_button', 'fa-solid', 'fa-recycle', 'fa-fw');
     galleryFolderRestore.title = t`Restore gallery folder`;

     topBarElement.appendChild(galleryFolderInput);
     topBarElement.appendChild(galleryFolderAccept);
 +    topBarElement.appendChild(galleryDeleteMode);
     topBarElement.appendChild(galleryFolderRestore);
     newElement.append(topBarElement);

 function viewWithDragbox(items) {
     if (items && items.length > 0) {
         const url = items[0].responsiveURL(); // Get the URL of the clicked image/video
 -        // ID should just be the last part of the URL, removing the extension
 +        if (deleteModeActive) {
 -        const id = sanitizeHTMLId(url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.')));
 +            Popup.show.confirm(t`Are you sure you want to delete this image?`, url)
 -        makeDragImg(id, url);
 +                .then(async (confirmed) => {
 +                    if (!confirmed) {
 +                        return;
 +                    }
 +                    deleteGalleryItem(url).then(() => showCharGallery(deleteModeActive));
 +                });
 +        } else {
 +            // ID should just be the last part of the URL, removing the extension
 +            const id = sanitizeHTMLId(url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.')));
 +            makeDragImg(id, url);
 +        }
+    }
+}

public/scripts/extensions/gallery/style.css+5 -0 Viewed

 #dragGallery {
     min-height: 25dvh;
+}
++
 +#gallery .right_menu_button.warning {
 +    opacity: 1;
 +    filter: unset;
 +}

public/style.css+8 -0 Viewed

     cursor: pointer;
+}
 +.mes_img.error {
 +    visibility: hidden;
 +    min-height: 100px;
 +    min-width: 120px;
 +}
++
 .mes_img_swipes,
 .mes_img_controls {
     position: absolute;

     filter: brightness(150%);
+}
 +.mes_img_container:has(.mes_img.error) .mes_img_swipes,
 +.mes_img_container:has(.mes_img.error) .mes_img_controls,
 .mes_img_container:hover .mes_img_swipes,
 .mes_img_container:focus-within .mes_img_swipes,
 .mes_img_container:hover .mes_img_controls,

src/endpoints/images.js+25 -1 Viewed

 import express from 'express';
 import sanitize from 'sanitize-filename';
 import { clientRelativePath, removeFileExtension, getImages, isPathUnderParent } from '../util.js';
 /**
  * Ensure the directory for the provided file path exists.

         return response.status(500).send({ error: 'Unable to retrieve folders' });
+    }
 });
++
 +router.post('/delete', async (request, response) => {
 +    try {
 +        if (!request.body.path) {
 +            return response.status(400).send('No path specified');
 +        }
++
 +        const pathToDelete = path.join(request.user.directories.root, request.body.path);
 +        if (!isPathUnderParent(request.user.directories.userImages, pathToDelete)) {
 +            return response.status(400).send('Invalid path');
 +        }
++
 +        if (!fs.existsSync(pathToDelete)) {
 +            return response.status(404).send('File not found');
 +        }
++
 +        fs.unlinkSync(pathToDelete);
 +        console.info(`Deleted image: ${request.body.path} from ${request.user.profile.handle}`);
 +        return response.sendStatus(200);
 +    } catch (error) {
 +        console.error(error);
 +        return response.sendStatus(500);
 +    }
 +});