Paste image inside RichTextEditor | Vue | RichTextEditor

jose luis barajas · 2020-01-15T01:40:27.8970000+00:00

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 encouragedThanks in advance

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 4^th 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:

https://www.syncfusion.com/feedback/11377/

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 5^th 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

Release Notes: https://ej2.syncfusion.com/vue/documentation/release-notes/index/#richtexteditor

Documentation: https://ej2.syncfusion.com/vue/documentation/rich-text-editor/image/#image

Sample: https://stackblitz.com/edit/angular-ycaozu-nnskmp?file=app.component.ts

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

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

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.

Documentation: https://ej2.syncfusion.com/vue/documentation/rich-text-editor/image/#upload-options

Sample: https://www.syncfusion.com/downloads/support/forum/150655/ze/RTEImage1929675106

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

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

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.

Server-side ASP.NET Core

https://www.syncfusion.com/downloads/support/forum/150655/ze/RTEIMA~12001332757

Client- side in Vue

https://codesandbox.io/s/vue-template-lcrc7

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

https://ej2.syncfusion.com/vue/documentation/rich-text-editor/how-to/rename-images-in-server/

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.

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/how-to/rename-images-in-server/#rename-uploaded-images-in-server-before-inserting-it-in-the-richtexteditor

Server-side ASP.NET Core

https://www.syncfusion.com/downloads/support/directtrac/150655/ze/Rename_RTE1737757220

Client- side in Vue

https://codesandbox.io/s/vue-template-kbpdb

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.

API link: https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/imageSettingsModel/#resize

Documentation: https://ej2.syncfusion.com/vue/documentation/rich-text-editor/image/#resize

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]

}

};

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_RTE_past1281498100

Server-side: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Image_Upload_Paste122112117

Regards,

Vinitha