Textbox.io 2.x Documentation : Handling Asynchronous Image Uploads

Textbox.io automatic image uploads are asynchronous.

It is therefore possible for users to save their content before all images have completed uploading.  In this situation, no server path to the image resource is available and those images will be stored in the HTML as Base64 data URIs.

When replacing a textarea inside a form element the editor will automatically enable autosubmit. This delays the standard form submit event to wait for images to upload. In all other scenarios, or if autosubmit is disabled, this delay must be introduced manually.

To ensure that all images have been uploaded developers can use the editor.content.uploadImages() method to ensure that all image uploads have completed and that the HTML content of the editor has been updated appropriately.  uploadImages() accepts a callback function, triggered when images have finished uploading and the content is ready.

The example below demonstrates how to use the uploadImages() method in conjunction with the content.get() method to ensure that all images have been uploaded before the content is retrieved from the editor.  It could also be used with a form's onsubmit method in a similar way.

uploadImages and Content Retrieval Callback
editor.content.uploadImages(function() {
	var content = editor.content.get();
	console.log(content);
});

uploadImages() scans the editor content for all Base64 encoded images and queues them for upload. If no images are uploading, the callback is executed immediately.