Quill upload image, with drag and drop + progress bar

quill_image_upload.html

<progress id='progressbar' style='display: none' value="0"></progress>

<div id="editor" ></div>
      
<script>
let editor = new Quill('#editor')

function uploadImageToImgurAndReplaceSrc($image) {
	var imageBase64 = $image.attr('src').split(',')[1];

	$('#progressbar').show()
	$.ajax({
		url: 'https://api.imgur.com/3/image',
		type: 'post',
		data: {
			image: imageBase64
		},
		headers: {
			Authorization: 'Client-ID ' + clientId
		},
		dataType: 'json',
		xhr: function() {
			var xhr = $.ajaxSettings.xhr();
			xhr.upload.onprogress = function(e) {
				console.log(e.loaded)
				if (e.lengthComputable) {  
					$('#progressbar').attr({value:e.loaded, max:e.total});
					// Upload finished
					if (e.loaded == e.total) {
						$('#progressbar').attr('value','0.0');
					}
				}
			};
			return xhr;
		},
		success: (response) => {
			$image.attr('src', response.data.link.replace(/^http(s?):/, ''));
			$('#progressbar').hide()
		},
		error: (xhr, type, err) => {
			console.error(err)
			alert("Sorry we couldn't upload your image to Imgur.")
			$('#progressbar').hide()
		}
	})
}

let updateInProgress = false
editor.on('editor-change', () => {
	
	if (updateInProgress) return;
	
	var $images = $('#editor img')
	$images.each(function () {
		var imageSrc = $(this).attr('src')
		if (imageSrc && imageSrc[0] === 'd') {
			console.log('Starting image upload...')
			updateInProgress = true
			uploadImageToImgurAndReplaceSrc($(this))
		}
	})
})

</script>