title: Upload images with CKEditor and show img src in html ( editor data ) - Reactjs
body: <p>Here's how it looks inside the code:</p>
  <pre><code>...
  
   &lt;CKEditor
      editor={ ClassicEditor }
      data={this.state.htmlString}
      config={{
          ckfinder: {                               
              uploadUrl: 'http://localhost:5000/upload',
              
          }}}
      onChange={ ( event, editor ) =&gt; {
          const data = editor.getData();
          this.handleSubjectChange(data);
          console.log( { event, editor, data } );
          console.log(this.state.htmlString);
      } }
  /&gt;
  
  ...
  </code></pre>
  <p>Inside server.js I am using Multiparty to upload images:</p>
  <pre><code>...
  
  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)=&gt;{
      console.log(req.files.upload)
  })
  
  ...
  </code></pre>
  <p><a href="https://i.stack.imgur.com/O9cMC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O9cMC.jpg" alt="This is how it looks in console.log" /></a></p>
  <p>From console.log (whole object):</p>
  <pre><code>Object
  data: &quot;&lt;p&gt;sasasa&lt;/p&gt;&lt;figure class=&quot;image&quot;&gt;&lt;img&gt;&lt;/figure&gt;&quot;
  editor: rb {_context: En, id: &quot;ef7e9d1eac6bb296e04f9d806d027c180&quot;, config: on, plugins: Tn, locale: Sn, …}
  event: cn {source: ec, name: &quot;change:data&quot;, path: Array(1), stop: ƒ, off: ƒ}
  __proto__: Object
  </code></pre>
  <p>Image gets uploaded in the folder:
  <a href="https://i.stack.imgur.com/T9EEl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T9EEl.png" alt="enter image description here" /></a></p>
  <p><strong>Issue: I can't get to show img src in editor data</strong></p>