Upload expressions update

3282c9426c72d22c0ed82e224eac5f491f391ca2

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 5c34c93a84e96af5b5ec92dc6ec2198852b0d03f

public/scripts/extensions/expressions/index.js+74 -11 Viewed

 import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 import { slashCommandReturnHelper } from '../../slash-commands/SlashCommandReturnHelper.js';
 import { generateWebLlmChatPrompt, isWebLlmSupported } from '../shared.js';
+import { Popup, POPUP_RESULT } from '../../popup.js';
+import { t } from '../../i18n.js';
 export { MODULE_NAME };
 /**

+    }
+}
+/**
+ * Removes the file extension from a file name
+ * @param {string} fileName The file name to remove the extension from
+ * @returns {string} The file name without the extension
+ */
+function withoutExtension(fileName) {
+    return fileName.replace(/\.[^/.]+$/, '');
+}
 async function onClickExpressionUpload(event) {
     // Prevents the expression from being set
     event.stopPropagation();
-    const expression = $(this).closest('.expression_list_item').data('expression');
+    const expressionListItem = $(this).closest('.expression_list_item');
+    const clickedFileName = expressionListItem.attr('data-expression-type') !== 'failure' ? expressionListItem.attr('data-filename') : null;
+    const expression = expressionListItem.data('expression');
     const name = $('#image_list').data('name');
     const handleExpressionUploadChange = async (e) => {

             return;
+        }
-        // // If extension_settings.expressions.allowMultiple is false and there's already a main image, ask user:
+        const existingFiles = spriteCache[name]?.find(x => x.label === expression)?.files || [];
-        // let hasMainImage = true; // Check from your item data
-        // if (!extension_settings.expressions.allowMultiple && hasMainImage) {
+        let spriteName = expression;
-        //     let userChoice = await callPopup('<h3>Replace existing main image?</h3><p>Press Ok to replace, Cancel to abort.</p>', 'confirm');
-        //     if (!userChoice) {
+        if (extension_settings.expressions.allowMultiple) {
-        //         return;
+            const matchesExisting = existingFiles.some(x => x.fileName === file.name);
-        //     }
+            const fileNameWithoutExtension = withoutExtension(file.name);
-        //     // If user chooses replace, remove the old file, then proceed
+            const filenameValidationRegex = new RegExp(`^${expression}(?:[-\\.].*?)?$`);
-        //     // ...existing code to remove old file...
+            const validFileName = filenameValidationRegex.test(fileNameWithoutExtension);
-        // }
+            // If there is no expression yet and it's a valid expression, we just take it
+            if (!clickedFileName && validFileName) {
+                spriteName = fileNameWithoutExtension;
+            }
+            // If the filename matches the one that was clicked, we just take it and replace it
+            else if (clickedFileName === file.name) {
+                spriteName = fileNameWithoutExtension;
+            }
+            // If it's a valid filename and there's no existing file with the same name, we just take it
+            else if (!matchesExisting && validFileName) {
+                spriteName = fileNameWithoutExtension;
+            }
+            else {
+                /** @type {import('../../popup.js').CustomPopupButton[]} */
+                const customButtons = [];
+                if (clickedFileName) {
+                    customButtons.push({
+                        text: t`Replace Existing`,
+                        result: POPUP_RESULT.NEGATIVE,
+                        action: () => {
+                            console.debug('Replacing existing sprite');
+                            spriteName = withoutExtension(clickedFileName);
+                        },
+                    });
+                }
+                const message = await renderExtensionTemplateAsync(MODULE_NAME, 'templates/upload-expression', { expression, clickedFileName });
+                spriteName = null;
+                const result = await Popup.show.input(t`Upload Expression Sprite`, message,
+                    `${expression}-${existingFiles.length}`, { customButtons: customButtons });
+                if (result) {
+                    if (!filenameValidationRegex.test(result)) {
+                        toastr.warning(t`The name you entered does not follow the naming schema for the selected expression '${expression}'.`, t`Invalid Expression Sprite Name`);
+                        return;
+                    }
+                    spriteName = result;
+                }
+            }
+        } else {
+            spriteName = withoutExtension(clickedFileName);
+        }
+        if (!spriteName) {
+            toastr.warning(t`Cancelled uploading sprite.`, t`Upload Cancelled`);
+            return;
+        }
         const formData = new FormData();
         formData.append('name', name);
         formData.append('label', expression);
         formData.append('avatar', file);
+        formData.append('spriteName', spriteName);
         await handleFileUpload('/api/sprites/upload', formData);

public/scripts/extensions/expressions/settings.html+1 -0 Viewed

                 </div>
                 <p class="hint"><b data-i18n="Hint:">Hint:</b> <i><span data-i18n="Create new folder in the _space">Create new folder in the </span><b>/characters/</b> <span data-i18n="folder of your user data directory and name it as the name of the character.">folder of your user data directory and name it as the name of the character.</span>
                 <span data-i18n="Put images with expressions there. File names should follow the pattern:">Put images with expressions there. File names should follow the pattern: </span><tt data-i18n="expression_label_pattern">[expression_label].[image_format]</tt></i></p>
+                <span>In case of multiple files per expression, file names can contain a suffix, either separated by a dot or a dash. Examples: </span><tt>joy.png</tt>, <tt>joy-1.png</tt>, <tt>joy.expressive.png</tt>, <tt>美しい-17.png</tt>
                 <h3 id="image_list_header">
                     <strong data-i18n="Sprite set:">Sprite set:</strong>&nbsp;<span id="image_list_header_name"></span>
                 </h3>

public/scripts/extensions/expressions/templates/upload-expression.html+12 -0 Viewed

+<div class="m-b-1" data-i18n="upload_expression_request">Please enter a name for the sprite (without extension).</div>
+<div class="m-b-1" data-i18n="upload_expression_naming_1">
+    Sprite names must follow the naming schema for the selected expression: {{expression}}
+</div>
+<div data-i18n="upload_expression_naming_2">
+    For multiple expressions, the name must follow the expression name and a valid suffix. Allowed separators are '-' or dot '.'.
+</div>
+<span class="m-b-1" data-i18n="Examples:">Examples:</span> <tt>{{expression}}.png</tt>, <tt>{{expression}}-1.png</tt>, <tt>{{expression}}.expressive.png</tt>, <tt>美しい-17.png</tt>
+{{#if clickedFileName}}
+<div class="m-t-1" data-i18n="upload_expression_replace">Click 'Replace' to replace the existing expression:</div>
+<tt>{{clickedFileName}}</tt>
+{{/if}}

src/endpoints/sprites.js+3 -2 Viewed

     const file = request.file;
     const label = request.body.label;
     const name = request.body.name;
+    const spriteName = request.body.spriteName || label;
     if (!file || !label || !name) {
         return response.sendStatus(400);

         // Remove existing sprite with the same label
         for (const file of files) {
-            if (path.parse(file).name === label) {
+            if (path.parse(file).name === spriteName) {
                 fs.rmSync(path.join(spritesPath, file));
+            }
+        }
-        const filename = label + path.parse(file.originalname).ext;
+        const filename = spriteName + path.parse(file.originalname).ext;
         const spritePath = path.join(file.destination, file.filename);
         const pathToFile = path.join(spritesPath, filename);
         // Copy uploaded file to sprites folder