On a React.js Application I try to make the editor to upload an image and embend it into the editor's content.

So Far I managed to do this with this piece of 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) => {
        var reader=new FileReader();

        reader.onloadend = function() {
          Meteor.call('fileStorage.uploadFile',reader.result,file.name,file.type,(err,response)=>{
              console.log(response)
             if(err){
               reject(err)
             }

             resolve({ data: { link: response.data.url } });
          })
        }

        reader.readAsDataURL(file);
      }
    );
  }

  render() {

    const config={
      image: { uploadCallback: this.uploadCallback }
    }

    return (
      <div className="container-fluid">
        <Editor toolbar={ config } />
      </div>
    )
  }
}

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:

So how I can do that?

On a React.js Application I try to make the https://jpuri.github.io/react-draft-wysiwyg/#/docs editor to upload an image and embend it into the editor's content.

So Far I managed to do this with this piece of 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) => {
        var reader=new FileReader();

        reader.onloadend = function() {
          Meteor.call('fileStorage.uploadFile',reader.result,file.name,file.type,(err,response)=>{
              console.log(response)
             if(err){
               reject(err)
             }

             resolve({ data: { link: response.data.url } });
          })
        }

        reader.readAsDataURL(file);
      }
    );
  }

  render() {

    const config={
      image: { uploadCallback: this.uploadCallback }
    }

    return (
      <div className="container-fluid">
        <Editor toolbar={ config } />
      </div>
    )
  }
}

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:

So how I can do that?

• javascript
• reactjs
• ecmascript-6

Share Follow asked Jun 12, 2017 at 12:37 Dimitrios DesyllasDimitrios Desyllas 10.2k1717 gold badges8383 silver badges195195 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It's not possible to change this behavior.

The only option you can provide is uploadCallback, see the docs.

You can find the source for the upload code here, it's quite clear, it's not possible.

use toolbar props inside editor toolbar={image: { uploadCallback: uploadCallback }} and write a uploadCallback function like this below.

const uploadCallback = (file, callback) => {
    console.log(file);
    return new Promise((resolve, reject) => {
      const reader = new window.FileReader();
      console.log(reader);
      reader.onloadend = async () => {
        const form_data = new FormData();
        form_data.append("file", file);
        const res = await uploadFile(form_data);
        setValue("thumbnail", res.data);
        resolve({ data: { link: process.env.REACT_APP_API + res.data } });
      };
      reader.readAsDataURL(file);
    });
  };

  const config = {
    image: { uploadCallback: uploadCallback },
  };

<Editor
  toolbar={config}
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={onEditorStateChange}
  placeholder="Write your ment here"
/>