Upload image first show preview, then show upload percentage% (insert complex structure into editor)

What I am trying to do

(From User Perspective) When upload image, image first insert into editor. a black transparent layer cover the entire image.

on that black layer, show upload progress like “10%… 20% 30%” after image 100% upload, the black layer go away.
(This is a pretty standard experience when uploading image these day(2018) )

ALSO I want the image take entire row. text is either on top or on bottom or image. not on same row.

Example: behance

1. Show upload progress during upload (image under black layer)

1. Display image when upload done
   

How I plan implement it

First insert base64 like <image src=“base64 string” > to preview.
and then after 100% upload, replace base64 src to url like https://example.com/a.jpg

The HTML structure I think gonna work

<div class='image-container'>
    <div class='overlay'><!-- show upload progress text here--></div>
    <img src=''> 
</div>

CSS part essentially just to make that black transparent (rgba(0,0,0,0.5)) overlay work it would go something like this:

.image-container{
   position: relative
}
.overlay{
   position: absolute:
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
etc..etc..

Question: how to make complex structure like these insert into Quill editor?

just use Bolt and Parchment? any example? thank you

PS: I already done my research

I spend about 1+ hour on Google and Quill issue & Quill Doc.
can’t find answer. that’s why I am asking.

Relate issue https://github.com/quilljs/parchment/issues/30 this Github issue relate to my question. but no answer in there https://github.com/quilljs/quill/issues/173 https://github.com/quilljs/quill/issues/1695 https://github.com/quilljs/quill/issues/1163

Thank you very much!

[NoelOConnell]

I wrote a plugin that does something very similar to what you are describing.

When an image is added, it inserts the Base64 version with a loading overlay. Then the image is saved to the server and then replaces the Base64 version with the saved image link.

You can view it here https://github.com/NoelOConnell/quill-image-uploader

[DvzH]

@NoelOConnell thanks for the update