React.js Wysiwyg Rich Text Editor with Image Upload of Imgur API Using Draft.js in JSX Full Tutorial For Beginners

Welcome folks today in this blog post we will be building a wysiwyg rich text editor with image upload of imgur api using draft.js library in jsx. All the full source code of the application is shown below.

Get Started

In order to get started you need to initialize a new react.js project by executing the below command as shown below

mkdir reactproject

cd reactproject

npx create-react-app sampleapp

cd sampleapp

npm i draft-js

npm i react-draft-wysiwyg

Directory Structure of App

Now we will see the directory structure of app as shown below

Now you need to make an index.js file and copy paste the following code

index.js

import React, { Component } from "react";
import { render } from "react-dom";
import { EditorState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import "./App.css";

const App = () => (
  <div>
    <h2>React Wysiwyg Rich Editor Using Draft.js</h2>
    <EditorContainer />
  </div>
);

render(<App />, document.getElementById("root"));

import React, { Component } from "react";

import { render } from "react-dom";

import { EditorState } from "draft-js";

import { Editor } from "react-draft-wysiwyg";

import "./App.css";

const App = () => (

<div>

<h2>React Wysiwyg Rich Editor Using Draft.js</h2>

</div>

);

render(<App />, document.getElementById("root"));

As you can see we are importing all the required libraries and dependencies at the very top and inside the main component we are rendering the EditorContainer component as shown above.

class EditorContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
  }

  onEditorStateChange: Function = (editorState) => {
    // console.log(editorState)
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;
    return (
      <div className="editor">
        <Editor
          editorState={editorState}
          onEditorStateChange={this.onEditorStateChange}
          toolbar={{
            inline: { inDropdown: true },
            list: { inDropdown: true },
            textAlign: { inDropdown: true },
            link: { inDropdown: true },
            history: { inDropdown: true },
            image: {
              uploadCallback: uploadImageCallBack,
              alt: { present: true, mandatory: true },
            },
          }}
        />
      </div>
    );
  }
}

class EditorContainer extends Component {

constructor(props) {

super(props);

this.state = {

editorState: EditorState.createEmpty(),

};

}

onEditorStateChange: Function = (editorState) => {

// console.log(editorState)

this.setState({

editorState,

});

};

render() {

const { editorState } = this.state;

return (

<Editor

editorState={editorState}

onEditorStateChange={this.onEditorStateChange}

toolbar={{

inline: { inDropdown: true },

list: { inDropdown: true },

textAlign: { inDropdown: true },

link: { inDropdown: true },

history: { inDropdown: true },

image: {

uploadCallback: uploadImageCallBack,

alt: { present: true, mandatory: true },

}}

</div>

);

}

As you can see in the above component we are importing the wysiwyg editor and inside it we are setting the state of the editor and then we are setting the toolbar of the editor. And inside it we having the different widgets to insert the text formatting options and the option to insert images and link as shown below. And then we are attaching the onChange event on the editor. And inside this method we are setting the method of editorState using the setState() method.

`Uploading Image to Imgur`

Now we will be uploading images to Imgur Website using the imgur api as shown below

function uploadImageCallBack(file) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "https://api.imgur.com/3/image");
    xhr.setRequestHeader("Authorization", "Client-ID ##clientid###");
    const data = new FormData();
    data.append("image", file);
    xhr.send(data);
    xhr.addEventListener("load", () => {
      const response = JSON.parse(xhr.responseText);
      console.log(response);
      resolve(response);
    });
    xhr.addEventListener("error", () => {
      const error = JSON.parse(xhr.responseText);
      console.log(error);
      reject(error);
    });
  });
}

function uploadImageCallBack(file) {

return new Promise((resolve, reject) => {

const xhr = new XMLHttpRequest();

xhr.open("POST", "https://api.imgur.com/3/image");

xhr.setRequestHeader("Authorization", "Client-ID ##clientid###");

const data = new FormData();

data.append("image", file);

xhr.send(data);

xhr.addEventListener("load", () => {

const response = JSON.parse(xhr.responseText);

console.log(response);

resolve(response);

});

xhr.addEventListener("error", () => {

const error = JSON.parse(xhr.responseText);

console.log(error);

reject(error);

});

}

As you can see we are uploading images to imgur using the api. For this we need to set the client id of the imgur api. And inside it we are making the POST Request. And then we are making the simple post request to upload the image to imgur api server. For this we are using the formData object. And then we are using the AJAX XMLhttpRequest Object to send the image data. And then we have the load event and the error event if any error takes place.

Now if you open the react.js app inside the browser you can see the below screenshot as shown below