Проблема с отображением загрузки файла для изображения в Draft JS

Question

Я использовал draft-js, чтобы показать редактор в веб-приложении.Но я столкнулся с проблемой при показе опции загрузки файла в черновом редакторе.

вот скриншот:

Вот как редактор показан на их демо

Вы можете проверить демо здесь https://jpuri.github.io/react-draft-wysiwyg/#/

Пожалуйста, проверьте код ниже и предложите решение:

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;

Answer 1

Решил проблему. Я забыл реализовать функцию обратного вызова для загрузки файла. вот рабочий код.

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;