ImageUploading event doesn't trigger

[ruxandra anita]

Hello,

I am not sure what I am missing here, if you could please point me in the right direction. 

Thanks in advance! 

import './index.css';

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarType } from '@syncfusion/ej2-react-richtexteditor';

import * as React from 'react';

const SyncFusionEditor = props => {

    const items = ['Bold', 'Italic', 'Underline', 'StrikeThrough',

                    'FontName', 'FontSize', 'FontColor', 'BackgroundColor',

                    'LowerCase', 'UpperCase', '|',

                    'Formats', 'Alignments', 'OrderedList', 'UnorderedList',

                    'Outdent', 'Indent', '|',

                    'CreateLink', 'Image', '|', 'ClearFormat', 'Print',

                    'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'];

    const toolbarSettings = {

                                type: ToolbarType.Expand,

                                items: items,

                                enableFloating: false

                            }   

    const imageSettings = {

                              

                                saveUrl: "www.asd.com/x/"

                              

                            }

    function onImageSelected(e)

    {

       // console.log("On image selected")

       // console.log(e);

    }

    function onImageUploading()

    {

        console.log("On image uploading")

        console.log();

    }

    function onImageUploadSucceeded(e)

    {

        console.log("On image uploaded successfuly");

        console.log(e);

    }

    function onImageUploadFail(e)

    {

        console.log("image upload failed");

        console.log(e);

    }

    

    function onActionBegin(args)

    {

        console.log(args);

    }

    function onActionComplete(args)

    {

        

    }

    return (<div className='control-pane'>

                <div className='control-section' id='rteTypes'>

                    <div className='col-lg-8' style={{ paddingBottom: '20px' }}>

                        <RichTextEditorComponent 

                         imageSettings={imageSettings}

                         toolbarSettings={toolbarSettings}

                         imageUploading={onImageUploading}

                         imageUploadSuccess={onImageUploadSucceeded}

                         imageUploadFailed={onImageUploadFail}>

                        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>

                        </RichTextEditorComponent>

                    </div>

                </div>

            </div>)

}

export default SyncFusionEditor;

[Indrajith Srinivasan]

Hi Ruxandra,

Greetings from Syncfusion support,

We have validated your reported query. The provided saveUrl is not valid, hence it fails to upload, and imageUpload failed is called. Configuring with the online save service works fine. We suggest you to configure a proper endpoint for the image to be saved. We have ensured the imageUploading event in the latest version 18.1.52, which is triggered for the following scenarios. 

• Image uploaded using the Image toolbar
• Drag and drop
• Pasting images (Need to import the PastCleanup module, to trigger the event)

Sample: https://stackblitz.com/edit/react-rcdarc-j423ep?file=index.js 

 

Can you share us the following details? 

• The package version you are facing issue with the image upload?
• Could you please confirm whether “the image is uploaded and the event is not triggered” or “image is not uploaded as well as the event also is not triggered”?

If we are able to reproduce the issue from our end we can validate and provide a solution at earliest. 

 

Regards, 

Indrajith 

[ruxandra anita]

Hi Indrajith ,

Thank you for your reply, I used the sample you linked and it works. The package version is 18.1.42. Originally, the image was not uploaded and no upload events were triggered.

Best regards,

Ruxandra

[Indrajith Srinivasan]

Hi Ruxandra,

Thanks for the update,

We are glad that your reported issue is resolved. Please let us know if you need any further assistance.

Regards, 

Indrajith