Merge pull request #2834 from SillyTavern/replace-ajax Replace ajax with fetch in character create/edit
Signed| @@ -7892,13 +7892,19 @@ async function createOrEditCharacter(e) { | |||
| 7892 | formData.set('avatar', convertedFile); | 7892 | formData.set('avatar', convertedFile); |
| 7893 | } | 7893 | } |
| 7894 | 7894 | ||
| 7895 | const headers = getRequestHeaders(); | ||
| 7896 | delete headers['Content-Type']; | ||
| 7897 | |||
| 7895 | if ($('#form_create').attr('actiontype') == 'createcharacter') { | 7898 | if ($('#form_create').attr('actiontype') == 'createcharacter') { |
| 7896 | if (String($('#character_name_pole').val()).length > 0) { | 7899 | if (String($('#character_name_pole').val()).length === 0) { |
| 7900 | toastr.error('Name is required'); | ||
| 7901 | return; | ||
| 7902 | } | ||
| 7897 | if (is_group_generating || is_send_press) { | 7903 | if (is_group_generating || is_send_press) { |
| 7898 | toastr.error('Cannot create characters while generating. Stop the request and try again.', 'Creation aborted'); | 7904 | toastr.error('Cannot create characters while generating. Stop the request and try again.', 'Creation aborted'); |
| 7899 | throw new Error('Cannot import character while generating'); | 7905 | return; |
| 7900 | } | 7906 | } |
| 7901 | 7907 | try { | |
| 7902 | //if the character name text area isn't empty (only posible when creating a new character) | 7908 | //if the character name text area isn't empty (only posible when creating a new character) |
| 7903 | let url = '/api/characters/create'; | 7909 | let url = '/api/characters/create'; |
| 7904 | 7910 | ||
| @@ -7913,18 +7919,19 @@ async function createOrEditCharacter(e) { | |||
| 7913 | 7919 | ||
| 7914 | formData.append('extensions', JSON.stringify(create_save.extensions)); | 7920 | formData.append('extensions', JSON.stringify(create_save.extensions)); |
| 7915 | 7921 | ||
| 7916 | await jQuery.ajax({ | 7922 | const fetchResult = await fetch(url, { |
| 7917 | type: 'POST', | 7923 | method: 'POST', |
| 7918 | url: url, | 7924 | headers: headers, |
| 7919 | data: formData, | 7925 | body: formData, |
| 7920 | beforeSend: function () { | 7926 | cache: 'no-cache', |
| 7921 | $('#create_button').attr('disabled', String(true)); | 7927 | }); |
| 7922 | $('#create_button').attr('value', '⏳'); | 7928 | |
| 7923 | }, | 7929 | if (!fetchResult.ok) { |
| 7924 | cache: false, | 7930 | throw new Error('Fetch result is not ok'); |
| 7925 | contentType: false, | 7931 | } |
| 7926 | processData: false, | 7932 | |
| 7927 | success: async function (html) { | 7933 | const avatarId = await fetchResult.text(); |
| 7934 | |||
| 7928 | $('#character_cross').trigger('click'); //closes the advanced character editing popup | 7935 | $('#character_cross').trigger('click'); //closes the advanced character editing popup |
| 7929 | const fields = [ | 7936 | const fields = [ |
| 7930 | { id: '#character_name_pole', callback: value => create_save.name = value }, | 7937 | { id: '#character_name_pole', callback: value => create_save.name = value }, |
| @@ -7959,33 +7966,29 @@ async function createOrEditCharacter(e) { | |||
| 7959 | 7966 | ||
| 7960 | create_save.avatar = ''; | 7967 | create_save.avatar = ''; |
| 7961 | 7968 | ||
| 7962 | $('#create_button').removeAttr('disabled'); | ||
| 7963 | $('#add_avatar_button').replaceWith( | 7969 | $('#add_avatar_button').replaceWith( |
| 7964 | $('#add_avatar_button').val('').clone(true), | 7970 | $('#add_avatar_button').val('').clone(true), |
| 7965 | ); | 7971 | ); |
| 7966 | 7972 | ||
| 7967 | $('#create_button').attr('value', '✅'); | ||
| 7968 | let oldSelectedChar = null; | 7973 | let oldSelectedChar = null; |
| 7969 | if (this_chid !== undefined) { | 7974 | if (this_chid !== undefined) { |
| 7970 | oldSelectedChar = characters[this_chid].avatar; | 7975 | oldSelectedChar = characters[this_chid].avatar; |
| 7971 | } | 7976 | } |
| 7972 | 7977 | ||
| 7973 | console.log(`new avatar id: ${html}`); | 7978 | console.log(`new avatar id: ${avatarId}`); |
| 7974 | createTagMapFromList('#tagList', html); | 7979 | createTagMapFromList('#tagList', avatarId); |
| 7975 | await getCharacters(); | 7980 | await getCharacters(); |
| 7976 | 7981 | ||
| 7977 | select_rm_info('char_create', html, oldSelectedChar); | 7982 | select_rm_info('char_create', avatarId, oldSelectedChar); |
| 7978 | 7983 | ||
| 7979 | crop_data = undefined; | 7984 | crop_data = undefined; |
| 7980 | }, | 7985 | |
| 7981 | error: function (jqXHR, exception) { | 7986 | } catch (error) { |
| 7982 | $('#create_button').removeAttr('disabled'); | 7987 | console.error('Error creating character', error); |
| 7983 | }, | 7988 | toastr.error('Failed to create character'); |
| 7984 | }); | ||
| 7985 | } else { | ||
| 7986 | toastr.error('Name is required'); | ||
| 7987 | } | 7989 | } |
| 7988 | } else { | 7990 | } else { |
| 7991 | try { | ||
| 7989 | let url = '/api/characters/edit'; | 7992 | let url = '/api/characters/edit'; |
| 7990 | 7993 | ||
| 7991 | if (crop_data != undefined) { | 7994 | if (crop_data != undefined) { |
| @@ -8000,19 +8003,16 @@ async function createOrEditCharacter(e) { | |||
| 8000 | } | 8003 | } |
| 8001 | } | 8004 | } |
| 8002 | 8005 | ||
| 8003 | await jQuery.ajax({ | 8006 | const fetchResult = await fetch(url, { |
| 8004 | type: 'POST', | 8007 | method: 'POST', |
| 8005 | url: url, | 8008 | headers: headers, |
| 8006 | data: formData, | 8009 | body: formData, |
| 8007 | beforeSend: function () { | 8010 | cache: 'no-cache', |
| 8008 | $('#create_button').attr('disabled', String(true)); | 8011 | }); |
| 8009 | $('#create_button').attr('value', 'Save'); | 8012 | |
| 8010 | }, | 8013 | if (!fetchResult.ok) { |
| 8011 | cache: false, | 8014 | throw new Error('Fetch result is not ok'); |
| 8012 | contentType: false, | 8015 | } |
| 8013 | processData: false, | ||
| 8014 | success: async function (html) { | ||
| 8015 | $('#create_button').removeAttr('disabled'); | ||
| 8016 | 8016 | ||
| 8017 | await getOneCharacter(formData.get('avatar_url')); | 8017 | await getOneCharacter(formData.get('avatar_url')); |
| 8018 | favsToHotswap(); // Update fav state | 8018 | favsToHotswap(); // Update fav state |
| @@ -8022,7 +8022,7 @@ async function createOrEditCharacter(e) { | |||
| 8022 | ); | 8022 | ); |
| 8023 | $('#create_button').attr('value', 'Save'); | 8023 | $('#create_button').attr('value', 'Save'); |
| 8024 | crop_data = undefined; | 8024 | crop_data = undefined; |
| 8025 | eventSource.emit(event_types.CHARACTER_EDITED, { detail: { id: this_chid, character: characters[this_chid] } }); | 8025 | await eventSource.emit(event_types.CHARACTER_EDITED, { detail: { id: this_chid, character: characters[this_chid] } }); |
| 8026 | 8026 | ||
| 8027 | // Recreate the chat if it hasn't been used at least once (i.e. with continue). | 8027 | // Recreate the chat if it hasn't been used at least once (i.e. with continue). |
| 8028 | const message = getFirstMessage(); | 8028 | const message = getFirstMessage(); |
| @@ -8042,13 +8042,10 @@ async function createOrEditCharacter(e) { | |||
| 8042 | await eventSource.emit(event_types.CHARACTER_MESSAGE_RENDERED, messageId); | 8042 | await eventSource.emit(event_types.CHARACTER_MESSAGE_RENDERED, messageId); |
| 8043 | await saveChatConditional(); | 8043 | await saveChatConditional(); |
| 8044 | } | 8044 | } |
| 8045 | }, | 8045 | } catch (error) { |
| 8046 | error: function (jqXHR, exception) { | 8046 | console.log(error); |
| 8047 | $('#create_button').removeAttr('disabled'); | ||
| 8048 | console.log('Error! Either a file with the same name already existed, or the image file provided was in an invalid format. Double check that the image is not a webp.'); | ||
| 8049 | toastr.error('Something went wrong while saving the character, or the image file provided was in an invalid format. Double check that the image is not a webp.'); | 8047 | toastr.error('Something went wrong while saving the character, or the image file provided was in an invalid format. Double check that the image is not a webp.'); |
| 8050 | }, | 8048 | } |
| 8051 | }); | ||
| 8052 | } | 8049 | } |
| 8053 | } | 8050 | } |
| 8054 | 8051 | ||