JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editor" contenteditable> Pasting is fun and rewarding
</div>

CSS

div#editor{height: 250px; border: 1px solid black}
img.loading{background-image:url(loading.gif)}

JavaScript

document.getElementById('editor').addEventListener('paste', function(e){
    var div = document.createElement('div');
    div.innerHTML = e.clipboardData.getData('text/html'); // parse data so that we can look up the IMG tags
    
	var formdata = new FormData();
	for(var i=0, file; file=e.clipboardData.files[i]; i++){
		formdata.append('file_'+i, file, file.name);
		for(var j=0; images = div.querySelectorAll('img[src="cid:'+i+'"]'), img; img = images[j]; j++){
			img.classList.add('loading');
		}
	}
    document.getElementById('editor').appendChild(div);
        
	var xhr = new XMLHttpRequest('POST', '/editor/imageuploads', true);
	xhr.setRequestHeader('Accept', 'application/json');
	xhr.responseType = 'json';
	xhr.onload = function(){
		// let's say the backend returns [ {"index":1, "url":"/images/foo.jpg"}, {"index":2, "url":"/images/bar.jpg"} ]
		xhr.response.forEach(function(data){
			for(var j=0; images = document.querySelectorAll('img[src="cid:'+data.index+'"]'), img; img = images[j]; j++){
				img.src = data.url;
				img.classList.remove('loading');
			}			
		});
	}
	xhr.send(formdata);
    e.preventDefault();// we already inserted the data..
}, false);