Support all file formats for replace/update

1315f0968bbc94aec0b6c3d1d0392cae00130784

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

Parents: e1e0ef8730b7c81641706783dd46673ad999aae1

public/index.html+1 -1 Viewed

                         <input multiple type="file" id="character_import_file" accept=".json, image/png, .yaml, .yml, .charx" name="avatar">
                         <input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
                     </form>
-                    <input type="file" id="character_replace_file" accept="image/png" name="replace_avatar" hidden>
+                    <input type="file" id="character_replace_file" accept=".json, image/png, .yaml, .yml, .charx" name="replace_avatar" hidden>
                 </div>
                 <div name="Character List Panel" id="rm_characters_block" class="right_menu">
                     <div id="charListFixedTop">

public/script.js+11 -8 Viewed

 /**
  * Imports supported files dropped into the app window.
  * @param {File[]} files Array of files to process
- * @param {boolean?} preserveFileNames Whether to preserve original file names
+ * @param {Map<File, string>} [data] Extra data to pass to the import function
  * @returns {Promise<void>}
  */
-export async function processDroppedFiles(files, preserveFileNames = false) {
+export async function processDroppedFiles(files, data = new Map()) {
     const allowedMimeTypes = [
         'application/json',
         'image/png',

     for (const file of files) {
         const extension = file.name.split('.').pop().toLowerCase();
         if (allowedMimeTypes.includes(file.type) || allowedExtensions.includes(extension)) {
-            await importCharacter(file, preserveFileNames);
+            const preservedName = data instanceof Map && data.get(file);
+            await importCharacter(file, preservedName);
         } else {
             toastr.warning('Unsupported file type: ' + file.name);
+        }

 /**
  * Imports a character from a file.
  * @param {File} file File to import
- * @param {boolean?} preserveFileName Whether to preserve original file name
+ * @param {string?} preserveFileName Whether to preserve original file name
  * @returns {Promise<void>}
  */
-async function importCharacter(file, preserveFileName = false) {
+async function importCharacter(file, preserveFileName = '') {
     if (is_group_generating || is_send_press) {
         toastr.error('Cannot import characters while generating. Stop the request and try again.', 'Import aborted');
         throw new Error('Cannot import character while generating');

     const formData = new FormData();
     formData.append('avatar', file);
     formData.append('file_type', format);
-    formData.append('preserve_file_name', String(preserveFileName));
+    if (preserveFileName) formData.append('preserved_name', preserveFileName);
     const data = await jQuery.ajax({
         type: 'POST',

+                        }
                         try {
-                            const cloneFile = new File([file], characters[this_chid].avatar, { type: file.type });
                             const chatFile = characters[this_chid]['chat'];
-                            await processDroppedFiles([cloneFile], true);
+                            const data = new Map();
+                            data.set(file, characters[this_chid].avatar);
+                            await processDroppedFiles([file], data);
                             await openCharacterChat(chatFile);
+                            await fetch(getThumbnailUrl('avatar', characters[this_chid].avatar), { cache: 'no-cache' });
                         } catch {
                             toastr.error('Failed to replace the character card.', 'Something went wrong');
+                        }

src/endpoints/characters.js+17 -10 Viewed

  * Import a character from a YAML file.
  * @param {string} uploadPath Path to the uploaded file
  * @param {{ request: import('express').Request, response: import('express').Response }} context Express request and response objects
+ * @param {string|undefined} preservedFileName Preserved file name
  * @returns {Promise<string>} Internal name of the character
  */
-async function importFromYaml(uploadPath, context) {
+async function importFromYaml(uploadPath, context, preservedFileName) {
     const fileText = fs.readFileSync(uploadPath, 'utf8');
     fs.rmSync(uploadPath);
     const yamlData = yaml.parse(fileText);
     console.log('Importing from YAML');
     yamlData.name = sanitize(yamlData.name);
-    const fileName = getPngName(yamlData.name, context.request.user.directories);
+    const fileName = preservedFileName || getPngName(yamlData.name, context.request.user.directories);
     let char = convertToV2({
         'name': yamlData.name,
         'description': yamlData.context ?? '',

  * @param {string} uploadPath
  * @param {object} params
  * @param {import('express').Request} params.request
+ * @param {string|undefined} preservedFileName Preserved file name
  * @returns {Promise<string>} Internal name of the character
  */
-async function importFromCharX(uploadPath, { request }) {
+async function importFromCharX(uploadPath, { request }, preservedFileName) {
     const data = fs.readFileSync(uploadPath);
     fs.rmSync(uploadPath);
     console.log('Importing from CharX');

     unsetFavFlag(card);
     card['create_date'] = humanizedISO8601DateTime();
     card.name = sanitize(card.name);
-    const fileName = getPngName(card.name, request.user.directories);
+    const fileName = preservedFileName || getPngName(card.name, request.user.directories);
     const result = await writeCharacterData(avatar, JSON.stringify(card), fileName, request);
     return result ? fileName : '';
+}

  * Import a character from a JSON file.
  * @param {string} uploadPath Path to the uploaded file
  * @param {{ request: import('express').Request, response: import('express').Response }} context Express request and response objects
+ * @param {string|undefined} preservedFileName Preserved file name
  * @returns {Promise<string>} Internal name of the character
  */
-async function importFromJson(uploadPath, { request }) {
+async function importFromJson(uploadPath, { request }, preservedFileName) {
     const data = fs.readFileSync(uploadPath, 'utf8');
     fs.unlinkSync(uploadPath);

         unsetFavFlag(jsonData);
         jsonData = readFromV2(jsonData);
         jsonData['create_date'] = humanizedISO8601DateTime();
-        const pngName = getPngName(jsonData.data?.name || jsonData.name, request.user.directories);
+        const pngName = preservedFileName || getPngName(jsonData.data?.name || jsonData.name, request.user.directories);
         const char = JSON.stringify(jsonData);
         const result = await writeCharacterData(defaultAvatarPath, char, pngName, request);
         return result ? pngName : '';

         if (jsonData.creator_notes) {
             jsonData.creator_notes = jsonData.creator_notes.replace('Creator\'s notes go here.', '');
+        }
-        const pngName = getPngName(jsonData.name, request.user.directories);
+        const pngName = preservedFileName || getPngName(jsonData.name, request.user.directories);
         let char = {
             'name': jsonData.name,
             'description': jsonData.description ?? '',

         if (jsonData.creator_notes) {
             jsonData.creator_notes = jsonData.creator_notes.replace('Creator\'s notes go here.', '');
+        }
-        const pngName = getPngName(jsonData.char_name, request.user.directories);
+        const pngName = preservedFileName || getPngName(jsonData.char_name, request.user.directories);
         let char = {
             'name': jsonData.char_name,
             'description': jsonData.char_persona ?? '',

  * @returns {string | undefined} - The preserved name if the request is valid, otherwise undefined
  */
 function getPreservedName(request) {
-    return request.body.file_type === 'png' && request.body.preserve_file_name === 'true' && request.file?.originalname
+    return typeof request.body.preserved_name === 'string' && request.body.preserved_name.length > 0
-        ? path.parse(request.file.originalname).name
+        ? path.parse(request.body.preserved_name).name
         : undefined;
+}

             return response.sendStatus(400);
+        }
+        if (preservedFileName) {
+            invalidateThumbnail(request.user.directories, 'avatar', `${preservedFileName}.png`);
+        }
         response.send({ file_name: fileName });
     } catch (err) {
         console.log(err);