I have the following code but the throbber / progress animation is not showing as described in the documentation.
The image uploads correctly after a few seconds of inactivity then source input and image dimension fields are populated.
How can I get the little animation while the image is uploading?
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/<api-key>/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<textarea>
Welcome to TinyMCE!
</textarea>
<script>
tinymce.init({
selector: 'textarea',
plugins: 'image code',
toolbar: 'undo redo | link image | code',
file_picker_callback: function(callback, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function() {
var file = this.files[0];
// Show progress bar
tinymce.activeEditor.setProgressState(true);
// Perform file upload
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php');
xhr.onload = function() {
if (xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
callback(json.location);
// Hide progress bar
tinymce.activeEditor.setProgressState(false);
} else {
console.error(xhr.statusText);
}
};
xhr.send(formData);
};
input.click();
}
});
</script>
</body>
</html>
from Tiny MCE not displaying throbber / progress animation
No comments:
Post a Comment