title: React Draft Wysiwyg: Image Upload when I click the "Add" Button
body: <p>On a React.js Application I try to make the <a href="https://jpuri.github.io/react-draft-wysiwyg/#/docs" rel="nofollow noreferrer">https://jpuri.github.io/react-draft-wysiwyg/#/docs</a> editor to upload an image and embend it into the editor's content.</p>
  
  <p>So Far I managed to do this with this piece of code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Editor } from 'react-draft-wysiwyg';
  import {convertFromRaw, convertToRaw, EditorState} from 'draft-js';    
  import "../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css"
  import "../../node_modules/draft-js-image-plugin/lib/plugin.css"
  
  
  
  export default class CustomEditor extends Component {
  
    uploadCallback(file) {
  
      return new Promise(
        (resolve, reject) =&gt; {
          var reader=new FileReader();
  
          reader.onloadend = function() {
            Meteor.call('fileStorage.uploadFile',reader.result,file.name,file.type,(err,response)=&gt;{
                console.log(response)
               if(err){
                 reject(err)
               }
  
               resolve({ data: { link: response.data.url } });
            })
          }
  
          reader.readAsDataURL(file);
        }
      );
    }
  
    render() {
  
      const config={
        image: { uploadCallback: this.uploadCallback }
      }
  
      return (
        &lt;div className="container-fluid"&gt;
          &lt;Editor toolbar={ config } /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>But my problem is that the image uploading procces gets initiated when I select the file, what I want to initiate the upload process when I click on "Add" button as you see in the image bellow:</p>
  
  <p><a href="https://i.stack.imgur.com/eDhIX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eDhIX.png" alt="Button to add the Image"></a></p>
  
  <p>So how I can do that?</p>