When i load image in preview i see link

[dihlo]

My code:

import React from 'react'; import ReactDOM from "react-dom"; import { Modal, Button } from 'antd'; import { Form, Icon, Input} from 'antd'; import {connect} from 'react-redux'; import {postnews, news} from '../actions'; import {bindActionCreators} from 'redux'; import { EditorState, convertToRaw, ContentState } from 'draft-js'; import { Editor, EditorInput } from 'react-draft-wysiwyg'; import draftToMarkdown from 'draftjs-to-markdown'; import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const FormItem = Form.Item;

const CollectionCreateForm = Form.create()( class extends React.Component { constructor(props) { super(props);

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

  this.onEditorStateChange = this.onEditorStateChange.bind(this);
  this.uploadImageCallBack = this.uploadImageCallBack.bind(this);

}

onEditorStateChange (editorState) {
  this.setState({
    editorState,
  });

  let text = draftToMarkdown(convertToRaw(editorState.getCurrentContent()));

  this.props.form.setFieldsValue({
    body: text,
  });
};

uploadImageCallBack(file) {
  return new Promise(
    (resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', 'https://api.imgur.com/3/image');
      xhr.setRequestHeader('Authorization', '-------');
      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', () => {
        console.log('error');
        const error = JSON.parse(xhr.responseText);
        reject(error);
      });
    }
  );
}

render() {
  const { visible, onCancel, onCreate, form } = this.props;
  const { getFieldDecorator } = form;
  const { editorState } = this.state;
  console.log( this.state);
  return (
    <Modal
      visible={visible}
      title="Добавление приема расписания"
      okText="Добавить"
      cancelText="Отмена"
      onCancel={onCancel}
      onOk={onCreate}
    >
      <Form layout="vertical">
        <FormItem label="Заголовок">
          {getFieldDecorator('title', {
            rules: [{ required: true, message: 'Поле обезательное, необходим заголовок новости' }],
          })(
            <Input type="textarea"/>
          )}
        </FormItem>
        <FormItem label="Текст новости">
          {getFieldDecorator('body', {
            rules: [{ required: true,
                      message: 'Поле обезательное, необходим текст новости' 
                    },
                    ],
          })(
          <div>
            <Editor
              wrapperClassName="demo-wrapper"
              editorClassName="demo-editor"
              onEditorStateChange={this.onEditorStateChange}
              toolbar={{
                image: { uploadCallback: this.uploadImageCallBack, alt: {present: true, mandatory: true } },
              }}                  
            />
            <Input hidden/>  
          </div>
          )}
        </FormItem>                       
      </Form>
    </Modal>
  );
}

} );

class ModalNews extends React.Component { constructor(props) { super(props);

    this.state = {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      loading: false,
      editorState: EditorState.createEmpty(), 
    };

  this.showModal = this.showModal.bind(this);
  this.handleCancel = this.handleCancel.bind(this);
  this.handleCreate = this.handleCreate.bind(this);
  this.saveFormRef = this.saveFormRef.bind(this);

}

showModal() { console.log(this.state); this.setState({ visible: true, }); }

handleCancel () { console.log(this.state); this.setState({ visible: false }); }

handleCreate () { const form = this.formRef.props.form; console.log('form'); form.validateFields((err, values) => { if (err) { return; } console.log(this.state); this.props.postnews(values); this.props.news(); form.resetFields(); this.setState({ visible: false}); }); }

saveFormRef (formRef) { this.formRef = formRef; }

render() { return (

Добавить

);

} }

function mapStateToProps(state) { const {data, loading} = state.postnews.newsPost; return {data, loading}; }

function matchDispatchToProps (dispatch) { return bindActionCreators ({postnews: postnews, news: news}, dispatch) }

export default connect(mapStateToProps, matchDispatchToProps)(ModalNews);

[shivarajalagond]

What I guess is, it is because of the Client -ID in request header. Can you register again and try using that and see if it resolves your issue.

xhr.setRequestHeader('Authorization', '-------');

If have unique Id already, try clearing the cache.

[sandeepreddy19]

I too see the link ... Not the image preview

[vaibhav0195]

I also face the issue but it turned out that by setting authorisation to :: xhr.setRequestHeader('Authorization', 'Client-ID -------');

the error was fixed.

[dasm30]

This fixes the issue: https://github.com/jpuri/react-draft-wysiwyg/issues/598 just adding previewImage:true

[shivam4786]

Just Add " previewImage: true " in image object of Editor

<Editor editorState={editorState} wrapperClassName="demo-wrapper" editorClassName="demo-editor" onEditorStateChange={this.onEditorStateChange} toolbar={{ image: { uploadCallback: this.uploadImageCallBack, urlEnabled: true, uploadEnabled: true, previewImage: true }, embedded: { embedCallback } }} />