Multi-character import

public/index.html

@@ -1499,7 +1499,7 @@
 
                 <div id="rm_character_import" class="right_menu" style="display: none;">
                     <form id="form_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
-                        <input type="file" id="character_import_file" accept=".json, image/png, image/webp" name="avatar">
+                        <input multiple type="file" id="character_import_file" accept=".json, image/png, image/webp" name="avatar">
                         <input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
                     </form>
                 </div>

public/script.js

@@ -3060,8 +3060,8 @@ function select_selected_character(chid) {
     //console.log('select_selected_character() -- starting with input of -- '+chid+' (name:'+characters[chid].name+')');
     select_rm_create();
     menu_type = "character_edit";
-    $("#delete_button").css("display", "block");
+    $("#delete_button").css("display", "flex");
-    $("#export_button").css("display", "block");
+    $("#export_button").css("display", "flex");
     setRightTabSelectedClass('rm_button_selected_ch');
     var display_name = characters[chid].name;
 
@@ -3128,7 +3128,7 @@ function select_rm_create() {
 
     //create text poles
     $("#rm_button_back").css("display", "inline-block");
-    $("#character_import_button").css("display", "inline-block");
+    $("#character_import_button").css("display", "flex");
     $("#character_popup_text_h3").text("Create character");
     $("#character_name_pole").val(create_save_name);
     $("#description_textarea").val(create_save_description);
@@ -4804,58 +4804,63 @@ $(document).ready(function () {
     });
     $("#character_import_file").on("change", function (e) {
         $("#rm_info_avatar").html("");
-        var file = e.target.files[0];
+        if (!e.target.files.length) {
-        //console.log(1);
-        if (!file) {
-            return;
-        }
-        var ext = file.name.match(/\.(\w+)$/);
-        if (
-            !ext ||
-            (ext[1].toLowerCase() != "json" && ext[1].toLowerCase() != "png" && ext[1] != "webp")
-        ) {
             return;
         }
 
-        var format = ext[1].toLowerCase();
+        let names = [];
-        $("#character_import_file_type").val(format);
-        //console.log(format);
-        var formData = new FormData($("#form_import").get(0));
 
-        jQuery.ajax({
+        for (const file of e.target.files) {
-            type: "POST",
+            var ext = file.name.match(/\.(\w+)$/);
-            url: "/importcharacter",
+            if (
-            data: formData,
+                !ext ||
-            beforeSend: function () {
+                (ext[1].toLowerCase() != "json" && ext[1].toLowerCase() != "png" && ext[1] != "webp")
-                //$('#create_button').attr('disabled',true);
+            ) {
-                //$('#create_button').attr('value','Creating...');
+                continue;
-            },
+            }
-            cache: false,
+    
-            contentType: false,
+            var format = ext[1].toLowerCase();
-            processData: false,
+            $("#character_import_file_type").val(format);
-            success: async function (data) {
+            var formData = new FormData();
-                if (data.file_name !== undefined) {
+            formData.append('avatar', file);
-                    $("#rm_info_block").transition({ opacity: 0, duration: 0 });
+            formData.append('file_type', format);
-                    var $prev_img = $("#avatar_div_div").clone();
+    
-                    $prev_img
+            jQuery.ajax({
-                        .children("img")
+                type: "POST",
-                        .attr("src", "characters/" + data.file_name + ".png");
+                url: "/importcharacter",
-                    $("#rm_info_avatar").append($prev_img);
+                data: formData,
-
+                async: false,
-                    let oldSelectedChar = null;
+                beforeSend: function () {
-                    if (this_chid != undefined && this_chid != "invalid-safety-id") {
+                },
-                        oldSelectedChar = characters[this_chid].name;
+                cache: false,
+                contentType: false,
+                processData: false,
+                success: async function (data) {
+                    if (data.file_name !== undefined) {
+                        $("#rm_info_block").transition({ opacity: 0, duration: 0 });
+                        var $prev_img = $("#avatar_div_div").clone();
+                        $prev_img
+                            .children("img")
+                            .attr("src", "characters/" + data.file_name + ".png");
+                        $("#rm_info_avatar").append($prev_img);
+    
+                        let oldSelectedChar = null;
+                        if (this_chid != undefined && this_chid != "invalid-safety-id") {
+                            oldSelectedChar = characters[this_chid].name;
+                        }
+    
+                        names.push(data.file_name);
+                        let nameString = DOMPurify.sanitize(names.join(', '));
+                        await getCharacters();
+                        select_rm_info(`Character imported<br><h4>${nameString}</h4>`, oldSelectedChar);
+                        $("#rm_info_block").transition({ opacity: 1, duration: 1000 });
                     }
-
+                },
-                    await getCharacters();
+                error: function (jqXHR, exception) {
-                    select_rm_info(`Character imported<br><h4>${DOMPurify.sanitize(data.file_name)}</h4>`, oldSelectedChar);
+                    $("#create_button").removeAttr("disabled");
-                    $("#rm_info_block").transition({ opacity: 1, duration: 1000 });
+                },
-                }
+            });
-            },
+        }
-            error: function (jqXHR, exception) {
-                $("#create_button").removeAttr("disabled");
-            },
-        });
     });
     $("#export_button").click(function (e) {
         $('#export_format_popup').toggle();

public/style.css

@@ -1117,6 +1117,13 @@ input[type=search]:focus::-webkit-search-cancel-button {
     flex-wrap: wrap;
 }
 
+.form_create_bottom_buttons_block .menu_button
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 #rm_info_block {
     display: none;
     width: 100%;
@@ -1138,6 +1145,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 #rm_info_avatar {
+    display: flex;
+    column-gap: 10px;
     width: fit-content;
     text-align: center;
     margin-left: auto;
@@ -2199,11 +2208,6 @@ h5 {
     column-gap: 15px;
 }
 
-#rm_button_group_chats {
-    cursor: pointer;
-    display: inline-block;
-}
-
 #rm_button_group_chats h2 {
     margin-top: auto;
     margin-bottom: auto;