Show loading before upload image

import React from 'react';
import {
  ImageSideButton,
  Block,
  addNewBlock,
  createEditorState,
  Editor,
} from 'medium-draft';
import 'isomorphic-fetch';

class CustomImageSideButton extends ImageSideButton {

  /*
  We will only check for first file and also whether
  it is an image or not.
  */
  onChange(e) {
    const file = e.target.files[0];
    if (file.type.indexOf('image/') === 0) {
     this.props.setEditorState(addNewBlock(
        this.props.getEditorState(),
        Block.IMAGE, {
           src: '/img/loading.gif'
        }
      ));
      const formData = new FormData();
      formData.append('image', file);
      fetch('/your-server-endpoint', {
        method: 'POST',
        body: formData,
      }).then((response) => {
        if (response.status === 200) {
          // Assuming server responds with
          // `{ "url": "http://example-cdn.com/image.jpg"}`
          return response.json().then(data => {
            if (data.url) {
              this.props.setEditorState(addNewBlock(
                this.props.getEditorState(),
                Block.IMAGE, {
                  src: data.url,
                }
              ));
            }
          });
        }
      });
    }
    this.props.close();
  }

}

In this case it shows loading.gif on editor but after image uploads the next setEditorState not working…

[brijeshb42]

The problem here is this.props.setEditorState(addNewBlock(. This adds a new block every time it is called. What you have to do is get the key of the block that was created the first time (when you set loading.gif) and then when you actually get the url of the uploaded image, you have to replace the url in data of the already created block. Unrelated to this issue, the approach you are going for is prone to some errors like what if user saves the content while image is uploading (this will save with image pointing to loading) and when the image is uploaded, user forgot to save and reloads the page.

[amenon]

@Ethaan, that is available in the draft-js package which should have been pulled in by medium-draft:

import {EditorState} from 'draft-js';