Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Show loading before upload image

See original GitHub issue
import React from 'react';
import {
} 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 =[0];
    if (file.type.indexOf('image/') === 0) {
        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": ""}`
          return response.json().then(data => {
            if (data.url) {
                Block.IMAGE, {
                  src: data.url,


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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

brijeshb42commented, Apr 5, 2018

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.

amenoncommented, Dec 31, 2018

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

import {EditorState} from 'draft-js';
Read more comments on GitHub >

github_iconTop Results From Across the Web

Show loading image while its uploading? - Stack Overflow
What I am trying to do is showing loading image while its uploading. What is the correct way to integrate the Show/hide loading...
Read more >
Preview an image before uploading using jQuery
In this article, we are going to discuss two methods to preview an image that is taken as input through a form.
Read more >
File Uploads - Laravel Livewire
Livewire makes uploading and storing files extremely easy. First, add the WithFileUploads trait to your component. Now you can use wire:model on file...
Read more >
Upload Progress & Loading Animation React Native - YouTube
Check out on udemy: So far in this video series we saw that how we can create an api using node js...
Read more >
File Upload Progress bar - CodePen
About HTML Preprocessors. HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found