Bug copy paste images inside RTE

Question

HiI just update my wasm project to last version 20.2.0.38Before this update copy and paste images inside RTE without using image icon in toolbar was fine!With this new version this not works.Please check my videoI need to rename the files in the api, just like your sample code, this code is working.I get null reference exception in this function y my wasm code when copy paste images without use toolbar button        private async Task ImageUploadSuccess(ImageSuccessEventArgs args)        {            try            {                var headers1 = args.Response.Headers.ToString();                header = headers1.Split("name: ");                header = header[0]?.Split("");                var s = URL_STORE_IMAGES.TrimEnd('/') + @"/" + header[1].TrimStart().TrimEnd().Replace("
", string.Empty).Replace("
", string.Empty).Replace("content-type:", string.Empty).Replace(" ", string.Empty);                args.File.Name = s; // <-- line with exception            }            catch (Exception ex)            {            }        }Please help!Attachment: bandicam_20220720_130928214_2a3cf443.rar

Vinitha Jeyakumar · Answer

Hi Jose,We have tried to replicate the reported issue by checking the video you have attached and used the code you have shared. but we didn't face any issues while copy and paste the images into the RTE in latest version. We have also prepared a sample and video illustration for your reference.Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Wasm_new1825243288Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_VidPaste856676519Can you please share us with the entire code snippet or runnable issue reproducing sample to further validate on our end.Regards,Vinitha

jose luis barajas · Answer

Hi Vinitha I am sending the images to my API, where I rename the file and the URL is placed in the editor,The error is when the image is pasted without using the image icon that is in the toolbar.Check my code

Vinitha Jeyakumar · Answer

Hi Jose,We have also tried to replicate the issue at our end by using the SaveUrl API and renamed the image using OnImageUploadSuccess event. but unfortunately we didn't face any issues while copy and pasting the images into the RTE without using image toolbar.Can you please share the below details,Your old package version(from where you upgraded to the latest V20.2.38)?Have you facing any script errors?If possible, can you please share us with the issue replicating simple runnable sample?Else please share the entire code snippet to run a sample at our end.Regards,Vinitha

jose luis barajas · Answer

Hi VinithaCheck my new video with previous version 20.1.061. The file is renamed well in the api.Both versions use the same API,With version 20.2.0.38 not worksafter paste image I get this exception in console's browserrte_image_1.png:1 GET http://localhost:44100/rte_image_1.png 404 (Not Found)this is because I get one exception in ImageUploadSuccess functionThis exception only occurs when paste image without toolbar button, weird!!! Wasm code private async Task ImageUploadSuccess(ImageSuccessEventArgs args) { try { var headers = args.Response.Headers.ToString(); header = headers.Split(":"); if (header.Length == 3) { var s = URL_STORE_IMAGES.TrimEnd('/') + @"/" + header[2].TrimStart().TrimEnd().Replace(" ", string.Empty).Replace("", string.Empty).Replace("content-type:", string.Empty).Replace(" ", string.Empty); args.File.Name = s; } } catch (Exception ex) { } }Razor code @ref="rteInstance1" @bind-Value="@TIMER_NOTES.NOTES"> ResizeByPercent="false" Width="500"/> Api method [HttpPost("[action]")] [Route("SaveImages")] [AllowAnonymous] public void SaveContenedorRteImages(IList UploadFiles) { try { foreach (IFormFile file in UploadFiles) { if (UploadFiles.Count != 0) { string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName?.Trim('"'); if (!Directory.Exists(_webHostEnvironment.ContentRootPath + "\path1\path2\")) Directory.CreateDirectory(_webHostEnvironment.ContentRootPath + "\path1\path2\"); imageFileName = "rte_img_" + Guid.NewGuid().ToString() + "_" + filename; string path = _webHostEnvironment.ContentRootPath + "\path1\path2\" + imageFileName; if (!System.IO.File.Exists(path)) { using (FileStream fs = System.IO.File.Create(path)) { file.CopyTo(fs); fs.Flush(); fs.Close(); } Response.Headers.Add("name", imageFileName); Response.ContentType = imageFileName; Response.StatusCode = 200; } } } } catch (Exception e) { Response.Clear(); Response.ContentType = "application/json; charset=utf-8"; Response.HttpContext.Features.Get().ReasonPhrase = e.Message; } }Head in index.htmlIm using material.css Web Attachment: video_with_version_20_1_0_61_63a073b3.rar

Vinitha Jeyakumar · Answer

Hi Jose,In your sample code, you have defined the path property in RichTextEditorImageSettings as empty string and that is the cause of the issue you have faced. So please provide a location to store the image in the Path property to resolve the reported issue at your end.Code snippet: Documentation: https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/rename-imageRegards,Vinitha

jose luis barajas · Answer

Hi Vinita, thanks for your responseI just added this value in Path attribute, not works.Also consider that the images are not saved where client is installed (web app), so I need to save and rename then in another server.Another issue is header response, I not get new name in header response from my controller method....I have:                            Response.Headers.Add("name", imageFileName); // NAME variable NOT REACH IN CLIENT CODE. ImageuploadSucess                            Response.StatusCode = 200;                            Response.ContentType = "application/json; charset=utf-8";Also can you check in your end this function, using paste directly in RTE and using toolbar icon?        private async Task ImageUploadSuccess(ImageSuccessEventArgs args)        {            try            {                var headers = args.Response.Headers.ToString();                header = headers.Split(":");args.File.Name = "anyname.png"            }            catch (Exception ex)            {            }        }Seems the same commented in this posthttps://www.syncfusion.com/forums/153257/set-header-for-image-upload-in-rich-text-editor Please help!Attachment: problem_58323026.rar

Vinitha Jeyakumar · Answer

Hi Jose,We have created a new ticket under your account to follow up with this query. We suggest you to follow up with the ticket for further updates. Please login using the below link.https://support.syncfusion.com/supportRegards,Vinitha

jose luis barajas · Answer

HiI need your help again with this ticket.I need to disable copy paste images directly inside the text editor area, I only enable this option to the user using the upload image icon in the toolbar.Can you help me please!

Vinothkumar Yuvaraj · Answer

Hi Jose,To disable the image, paste into the Rich Text Editor, you can use the PasteCleanupSettings DeniedTags property. This will remove the particular element when pasted into the Rich Text Editor. Please see the following code and attached sample for your reference. @code{ private string[] Deniedtags { get; set; } = { "img" };} API Link : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorPasteCleanupSettings.html#propertiesRegards,VinothkumarAttachment: RTE_Wasm_new_ef0f82eb_c724a61f.zip

jose luis barajas · Answer

Hi

Vinothkumar,Great!!!Thanks!!!

Vinothkumar Yuvaraj · Answer

Hi Jose,You're welcome. Please get back to us if you have any further questions.