Search code examples
reactjsblogsrich-text-editordraftjs

Issue in showing File Upload for image in Draft JS

I using the draft-js to show editor in web application. But i am facing issue in showing the file upload option in draft editor.

here is a screenshot : 1

This is how editor is shown on their demo 2

You can check the demo here https://jpuri.github.io/react-draft-wysiwyg/#/

Please check the code below and suggest the solution :

import React, { Component } from 'react';
import logo from './logo.svg';

import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';


class App extends Component {

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

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

  render() {
    const { editorState } = this.state;
    return (
      <div className="App">
        <header className="App-header">

         <Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
toolbar={{
    inline: { inDropdown: true },
    list: { inDropdown: true },
    textAlign: { inDropdown: true },
    link: { inDropdown: true },
    history: { inDropdown: true },
    inputAccept: 'application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel'
  }}
/>
         </header>
      </div>
    );
  }
}

export default App;
Solution

  • Solved the issue. I forgot to implement the callback function to upload a file. Here is the working code:

        import React, { Component } from 'react';
    import logo from './logo.svg';
    
    import { EditorState } from 'draft-js';
    import { Editor } from 'react-draft-wysiwyg';
    import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
    
    
    class App extends Component {
    
      constructor(props) {
        super(props);
        this.state = {
          editorState: EditorState.createEmpty(),
          uploadedImages: []
        };
        this._uploadImageCallBack = this._uploadImageCallBack.bind(this);
      }
    
      onEditorStateChange: Function = (editorState) => {
        this.setState({
          editorState,
        });
      };
    
    
      _uploadImageCallBack(file) {
        // long story short, every time we upload an image, we
        // need to save it to the state so we can get it's data
        // later when we decide what to do with it.
    
        // Make sure you have a uploadImages: [] as your default state
        let uploadedImages = this.state.uploadedImages;
    
        const imageObject = {
          file: file,
          localSrc: URL.createObjectURL(file),
        }
    
        uploadedImages.push(imageObject);
    
        this.setState({ uploadedImages: uploadedImages })
    
        // We need to return a promise with the image src
        // the img src we will use here will be what's needed
        // to preview it in the browser. This will be different than what
        // we will see in the index.md file we generate.
        return new Promise(
          (resolve, reject) => {
            resolve({ data: { link: imageObject.localSrc } });
          }
        );
      }
      render() {
        const { editorState } = this.state;
        return (
          <div className="App">
            <header className="App-header">
    
              <Editor
                editorState={editorState}
                toolbarClassName="toolbarClassName"
                wrapperClassName="wrapperClassName"
                editorClassName="editorClassName"
                onEditorStateChange={this.onEditorStateChange}
                toolbar={{
                  inline: { inDropdown: true },
                  list: { inDropdown: true },
                  textAlign: { inDropdown: true },
                  link: { inDropdown: true },
                  history: { inDropdown: true },
                  image: { uploadCallback: this._uploadImageCallBack },
                  inputAccept: 'application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel'
                }}
              />
            </header>
          </div>
        );
      }
    }
    
    export default App;