Upload images with CKEditor and show img src in html ( editor data ) - Reactjs

Question

Here's how it looks inside the code:

...

 <CKEditor
    editor={ ClassicEditor }
    data={this.state.htmlString}
    config={{
        ckfinder: {                               
            uploadUrl: 'http://localhost:5000/upload',
            
        }}}
    onChange={ ( event, editor ) => {
        const data = editor.getData();
        this.handleSubjectChange(data);
        console.log( { event, editor, data } );
        console.log(this.state.htmlString);
    } }
/>

...

Inside server.js I am using Multiparty to upload images:

...

import express from 'express'

import multiparty from 'connect-multiparty'

const app = express();

const MultipartyMiddleware = multiparty({uploadDir:'src/blogs/images'})

app.post('/upload',MultipartyMiddleware,(req,res)=>{
    console.log(req.files.upload)
})

...

From console.log (whole object):

Object
data: "<p>sasasa</p><figure class="image"><img></figure>"
editor: rb {_context: En, id: "ef7e9d1eac6bb296e04f9d806d027c180", config: on, plugins: Tn, locale: Sn, …}
event: cn {source: ec, name: "change:data", path: Array(1), stop: ƒ, off: ƒ}
__proto__: Object

Image gets uploaded in the folder:

Issue: I can't get to show img src in editor data

Answer 1

You can do that by sending a response from the server that contains the path url of the uploaded image.

app.post('/upload',MultipartyMiddleware,(req,res)=>{
    var imagePath = req.files.upload.path;
    
    res.status(200).json({
       uploaded:true,
       url: `${imagePath}`
   })
})