We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Paste image inside RichTextEditor

Could you help me with an example that allows me to upload an image to the server when I paste the image over RTE?

I already have it correctly implemented with the drag and drop functionality, but when I do it with paste, a base64 string is generated and the browser is greatly encouraged

Thanks in advance

19 Replies

IS Indrajith Srinivasan Syncfusion Team January 15, 2020 05:17 PM UTC

Hi Jose, 
 
Greetings from Syncfusion support 
 
We can specify the type of image format to be pasted either as base64 or Blob using the saveformat in the insertImageSettings property. We suspect ther are some defects with uploading the pasted file to the server. 
Currently, we are validating this issue and will update you with more details in 2 business days (20/Jan/2020). 
 
Regards, 
Indrajith 



IS Indrajith Srinivasan Syncfusion Team January 21, 2020 05:57 AM UTC

Hi Jose, 
  
We have validated the reported issue, we confirmed upload an image to the server when I paste the image over RTE as a defect from our end and logged a report for the same. We will include the fix in weekly patch release which is planned to roll-out on 4th February.  
  
You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: 
 
 
Regards, 
Indrajith 



IS Indrajith Srinivasan Syncfusion Team February 4, 2020 02:04 PM UTC

Hi Jose,  
  
Thanks for your patience, 
 
We have resolved the reported issue and the fix will be included in our weekly patch release, which is expected to be rolled out on 5th February 2020 
  
Regards  
Indrajith 



JL jose luis barajas February 4, 2020 09:58 PM UTC

Hello Indrajith 

Thanks

I will wait for the update!!!
Can you tell me what command should I execute to get the update?




IS Indrajith Srinivasan Syncfusion Team February 5, 2020 06:20 PM UTC

Hi Jose, 
 
Thanks for your patience, 
 
We have resolved the issue “Uploading an image to the server when I paste the image over RTE” with the release version 17.4.47 in RichTextEditor. Can you please upgrade your package to this version to resolve the issue from your end. We have also prepared a sample based on your requirement. 
 
In order to upgrade the package refer the following link: https://www.npmjs.com/package/@syncfusion/ej2-vue-richtexteditor/v/17.4.47 
 
 
 
 
Can you please check the above solution and let us know if you face any difficulties 
 
Regards, 
Indrajith 



IS Indrajith Srinivasan Syncfusion Team February 5, 2020 06:30 PM UTC

Hi Jose,

Please ignore the sample shared with the previous update for reference, refer the below sample.

Sample: https://codesandbox.io/s/vue-template-7o1uk
 
 
Regards, 
Indrajith 



JL jose luis barajas February 5, 2020 06:46 PM UTC

Hi

I just updated your npm package and I get this error

 ERROR  Failed to compile with 1 errors                                                                                                                                                                             12:44:25 PM

 error  in ./node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/base/interface.js

Module parse failed: Unterminated comment (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

> /**export var executeGroup = {

|     'bold': {

|         command: 'Style',


 @ ./node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/base.js 6:0-33 6:0-33

 @ ./node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/index.js

 @ ./node_modules/@syncfusion/ej2-richtexteditor/src/index.js

 @ ./node_modules/@syncfusion/ej2-richtexteditor/index.js

 @ ./node_modules/@syncfusion/ej2-vue-richtexteditor/src/index.js

 @ ./node_modules/@syncfusion/ej2-vue-richtexteditor/index.js

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Pruebas/pruebas1.vue?vue&type=script&lang=js&

 @ ./src/components/Pruebas/pruebas1.vue?vue&type=script&lang=js&

 @ ./src/components/Pruebas/pruebas1.vue

 @ ./src/components/Drawer/Content.js

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Drawer/DrawerPanel.vue?vue&type=script&lang=js&

 @ ./src/components/Drawer/DrawerPanel.vue?vue&type=script&lang=js&

 @ ./src/components/Drawer/DrawerPanel.vue

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Drawer/Drawer.vue?vue&type=script&lang=js&

 @ ./src/components/Drawer/Drawer.vue?vue&type=script&lang=js&

 @ ./src/components/Drawer/Drawer.vue

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layout/Layout1.vue?vue&type=script&lang=js&

 @ ./src/layout/Layout1.vue?vue&type=script&lang=js&

 @ ./src/layout/Layout1.vue

 @ ./src/router/index.js

 @ ./src/main.js

 @ multi (webpack)-dev-server/client?http://192.168.1.97:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js



JL jose luis barajas February 5, 2020 08:46 PM UTC

Hi Team

I Just updated the component

I Found the following errors:

First:

With npm run serve command I get this warning

 WARNING  Compiled with 1 warnings                                                                                                               2:15:41 PM

 warning  in ./node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/base/rich-text-editor.js

"export 'load' (imported as 'events') was not found in '../base/constant'

  App running at:
  - Local:   http://localhost:8081/

Second:

Functionality is not as expected:
Before continuing I want to tell you that the options of drag an drop images and upload files in RTE work perfectly!
Having said that

I upload a new image via drag and drop in RTE... all its ok
check the source code from RTE

<p style="cursor: auto;"><img class="e-rte-image e-imginline e-resize" src="https://localhost:44335/app-images/tres1.jpg" alt="tres1.jpg" style="opacity: 1;" width="327" height="184"><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p>

Here check the image link its correct

https://localhost:44335/app-images/tres1.jpg

Next I copy paste another image in RTE (with NEW Functionallity!!!)

Check again the source code from RTE

<p style="cursor: auto;"><img class="e-rte-image e-imginline e-resize" src="https://localhost:44335/app-images/tres1.jpg" alt="tres1.jpg" style="opacity: 1;" width="327" height="184"><br></p><p><br></p><p><img class="e-rte-image e-imginline e-img-focus e-resize" width="auto" height="auto" alt="undefined" src="blob:http://localhost:8081/7411144f-9e2d-4df7-97fb-7c66922dbd14" style="min-width: 0px; min-height: 0px;"><br></p><p><br></p><p><br></p><p><br></p><p><br></p>

The second url dont have correct URL as I require it...

http://localhost:8081/7411144f-9e2d-4df7-97fb-7c66922dbd14

and the api call is not executed!!!!

In my vue code I have this
<div class="row">
<div class="col-md-12">
<label class="control-label" for="subject">Detalle {{ date }}</label>
<ejs-richtexteditor
:change="onRTEChange"
:created="onCreate"
:inlineMode="inlineModeData"
:insertImageSettings="insertImageSettings"
:toolbarSettings="toolbarSettings"
height="auto"
ref="rteObj"
v-bind:disabled="extraData.ACTION === 'DELETE'"
></ejs-richtexteditor>
</div>
</div>
...
import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, Table, QuickToolbar, PasteCleanup } from '@syncfusion/ej2-vue-richtexteditor';
...

insertImageSettings: {
path: process.env.VUE_APP_PATH_UPLOAD_IMAGES,
saveUrl: process.env.VUE_APP_SAVEURL_UPLOAD_IMAGES,
display: 'inline'
},
where path and saveurl has the values:

path: https://localhost:44335/app-images/
saveurl: https://localhost:44335/api/Engine/Work/SaveImages/

When I upload a new image via drag and drop or upload using toolbar icon from RTE, everything works well..
My end point its running fine

// SUBE IMAGENES DESDE EL EDITOR RTE VIA DRAG AND DROP O UPLODING FILES
[HttpPost]
[Route("Work/SaveImages")]
[AllowAnonymous]
public void Save(IList<IFormFile> UploadFiles)
{
string HtmlString = string.Empty;
if (UploadFiles != null)
{
foreach (var file in UploadFiles)
{
string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');

string path1 = System.IO.Directory.GetCurrentDirectory();
filename = path1 + "\\rte_files" + $@"\{filename}";

if (!System.IO.File.Exists(filename))
{
using (FileStream fs = System.IO.File.Create(filename))
{
file.CopyTo(fs);
fs.Flush();
}
}
else
{
Response.Clear();
Response.StatusCode = 204;
}
}
}
}

In conclusion, I see that the correct functionality is missing for upload an image via copy paste when the path property is used in insertImageSettings configuration.

If I delete the path property, the application does not work correctly.

Please help!
































IS Indrajith Srinivasan Syncfusion Team February 7, 2020 06:29 PM UTC

Hi Jose, 
 
We regret for the inconvenience caused, 
 
Query 1: “With npm run serve command I get this warning” 
 
We have resolved the issue with the RichTextEditor packages and the fix is now available with the release version 17.4.48. Can you please upgrade your package to this version to resolve the issue from your end ? 
 
Query 2: “Functionality is not as expected: 
 
We have validated your reported query, let us know where the image is copied and pasted to RichTextEditor. We have prepared a sample with the service and the image pasted from MS word hits the endpoint for the pasted image. 
 
 
 
Can you try out the above solution and let us know if you face any difficulties. 
 
Regards, 
Indrajith 



JL jose luis barajas February 8, 2020 06:23 PM UTC

Hi Team!

Thanks for you support...

I tried the source code that you sent me...
but this example is not for Vue,
with Vue does not work the path property with the copy paste event

To see the source code from RTE I get

The first image was with drag & drop

<p><img class="e-rte-image e-imginline e-resize" src="https://localhost:44335/app-images/art_artwork_fantasy_artistic_original_11312x4752.jpg" alt="art_artwork_fantasy_artistic_original_11312x4752.jpg" style="opacity: 1;"><br></p><p><br></p><p>

In this source code I get the path correctly as you can see....
https://localhost:44335/app-images/art_artwork_fantasy_artistic_original_11312x4752.jpg


Now image with copy - paste

</p><p><br></p><p><img class="e-rte-image e-imginline e-resize" width="auto" height="auto" alt="undefined" src="blob:http://localhost:8081/3c8242da-fb2f-4c25-8ead-c9f208eaa62d" style="min-width: 0px; min-height: 0px;"><br></p><p><br></p><p><br></p><p><br></p>

In this source code I not receive the path property in the url for the image...
blob:http://localhost:8081/3c8242da-fb2f-4c25-8ead-c9f208eaa62d

I will attach the complete code of the component where I use the RTE to support me, and if you can send an example in VUE it would be better to try

My endpoint works correctly with the option "upload button" and with the "drag and drop event", in both cases assign correctly  the path property ...

I will look forward for your kind response.






Attachment: ComponentWithRTE_d1de4a3.rar


IS Indrajith Srinivasan Syncfusion Team February 10, 2020 12:49 PM UTC

Hi Jose,

Thanks for your update,

As requested already, let us know from where the image is copied and pasted to RichTextEditor. Meanwhile, we will validate the reported query with the path property in InsertImageSettings and will update you with further details shortly.

Regards, 
Indrajith 



IS Indrajith Srinivasan Syncfusion Team February 10, 2020 05:38 PM UTC

Hi Jose, 
 
If the desired SaveUrl path is not triggered the image path will be “blob:http://localhost:8081/3c8242da-fb2f-4c25-8ead-c9f208eaa62d” by default as you reported. Below is the sample for the vue platform, in which the Server-side part in ASP.net core and the Client side part in Vue.  
 
Follow the below steps for  
  • Host the shared server side service which is in ASP.NET core.
  • Paste the image in RichTextEditor the save endpoints will be triggered and the image will be saved in the path wwwroot/Images.

 
Client- side in Vue 
 
 
Can you please try out the above solution and let us know if you face any difficulties. 
 
Regards, 
Indajith 



JL jose luis barajas February 11, 2020 01:29 AM UTC

Hi Indrajith

Finally, the program runs (fine!!!)
but works partially (sad) !!!

The solution:
I forget add PasteCleanup reserved word in the provide configuration... and now my endpoint reach fine!!!

Now the problem is that all filenames have the same name
for example:

https://localhost:44335/app-images/rte_image_4.png

When I close the browser and try again to copy another image I get the same filename.

What I need is to indicate a random filename, so that it cannot be duplicated in the future, for example a name with a guid pattern would be ideal.

Can you support me with that final part?

Thanks in advance!!!!







JL jose luis barajas February 11, 2020 03:16 AM UTC

Hi

I Just found this url 


I test the sample code, but not works with .net core 3

Can you send one sample for rename the image with this version of .net?

The error is in this lines..
  if (!System.IO.File.Exists(fileSavePath))
            {
                httpPostedFile.SaveAs(fileSavePath);
                HttpResponse Response = System.Web.HttpContext.Current.Response; // THIS LINE NOT WORKS
                Response.Clear();
                Response.Headers.Add("name", imageFile);
                Response.ContentType = "application/json; charset=utf-8";
                Response.StatusDescription = "File uploaded succesfully"; // THIS LINE NOT WORKS
                Response.End(); // THIS LINE NOT WORKS 
            }
Thanks in advance!


IS Indrajith Srinivasan Syncfusion Team February 11, 2020 02:53 PM UTC

Hi Jose, 
 
Thanks for your update, 
 
We have validated the sample code you shared, it doesn’t depend on the core versions you have used MVC service in core application we have separate service for the Core applications. Have modified the sample shared with the rename Service configured in it. 
 
  
  
Client- side in Vue  
  
  
Can you please try out the above solution and let us know if you face any difficulties.  
 
Regards, 
Indrajith 



JL jose luis barajas February 13, 2020 08:11 PM UTC

Hi Indrajith Srinivasan

First of all I want to thank the invaluable support you have given to the resolution of this issue!!!

Finally it is working fine!!!

Just a final matter, when I make the paste of the image, the markers in the corners of the image are not displayed and I cannot resize it with the mouse




IS Indrajith Srinivasan Syncfusion Team February 14, 2020 10:52 AM UTC

Hi Jose, 
 
We are glad to assist you, 
 
We have validate your reported query, the markers will be generated only when the Image is being focused, also enable the resize property in insertImageSettings if it has been disabled and then you can resize the images. Please refer the below documentation link. 
 
 
 
Regards, 
Indrajith 



XZ xu zhi bin replied to Indrajith Srinivasan December 13, 2022 06:22 AM UTC

I can upload pictures by dragging and dropping, but why can't I automatically upload pictures after pasting?





VJ Vinitha Jeyakumar Syncfusion Team December 16, 2022 06:39 AM UTC

Hi Xu,


If you want to upload the pasted images to the server, you need to inject the PasteCleanup module. please check the sample below for your reference.

Code snippet:
<ejs-richtexteditor :toolbarSettings="toolbarSettings" :insertImageSettings="insertImageSettings">
                 
 </ejs-richtexteditor>

export default {
 name: "App",
  components: {
    "ejs-richtexteditor": RichTextEditorComponent,
  },
  data() {
    return {
        toolbarSettings: {
            items: ['Image']
        },
        insertImageSettings: {
        path: "https://localhost:44329/Uploads/",
        saveUrl: "https://localhost:44329/Home/SaveImage",
        }
    };
  },
 provide:{
    richtexteditor:[Toolbar, Link, Image, HtmlEditor, PasteCleanup]
}   
};



Regards,
Vinitha

Loader.
Live Chat Icon For mobile
Up arrow icon