Show loading before upload image
See original GitHub issueimport 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…
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (1 by maintainers)
Top 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: https://bit.ly/3vbA1LX 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 setloading.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.@Ethaan, that is available in the
draft-js
package which should have been pulled in bymedium-draft
: