Textbox.io gives you the ability to handle local images in one of several ways within your application. You may either upload local images from the client to your application, store images directly in the editor generated HTML itself (using base64 data URIs), or have the Textbox.io editor prevent local images from being inserted.

With all but the last option (prevent local images) the user experience is the same: users can add images to Textbox.io instances via the image upload dialog, by dragging and dropping images from their computer, or via copy-paste. 

Storing Local Images in Content (base64 data URIs)

Textbox.io will by default store local images added to an editor as embedded base64 data URIs. 

If this is the desired editor behavior in your application, no further action is necessary. When a user adds an image to a Textbox.io editor within your application Textbox.io will automatically embed that image into the HTML content. 

Uploading Local Images

Configuring your application and Textbox.io for local image uploads involves first creating a server-side handler and then configuring your Textbox.io instance to use that handler.

Server-side Upload Handler

In order to upload local files to the remote server via HTTP POST, you will need a server-side upload handler script that accepts the images and objects on the server and stores them in the correct directory or database. This script is the same script that would be used for uploading any file to the server via the HTTP POST method. 

For example, when you use a file input element (<INPUT type="file">), the script specified in the action attribute of the parent <form> element is used to upload the file to the server.

The server-side upload handler script should return a JSON object similar to the one below. The returned JSON should include a single location attribute with the path to the stored image as it's value.

{ "location" : "/uploaded/image/path/image.png" } 

Note, that the '/' here in the location field is used to suggest a root-relative path. If you don't provide the leading '/', then the path will be relative. If you provide a protocol (e.g. http), then the path will be absolute. The table below shows how the full image path will be resolved against the various types of image locations:

Configuring Textbox.io to Use a Server-side Upload Handler

Once you've set up a server side upload handler, all that's left is to make Textbox.io aware of the handler's location via a configuration object and set up the path used to construct the <image> src attribute.

In the example below, any local image added to a the Textbox.io editor is uploaded to the handler script located at ttp://example.com/postAcceptor.php. Textbox.io then constructs the path to the newly uploaded image by combining the (optional) basePath value and the image filename. The resulting editor html is then updated with the new path to the image, generating HTML like: <img src="/my/application/images/filename.png" />.

var config = {
	images : {
		upload : {
			url : '/postAcceptor.php',  	// Handler URL
			basePath: '/my/application/images/',			// Remote image storage path
			credentials: false								// Optional: sends cookies with the request when true
		}
	}
};
 
var editor = textboxio.replace('#targetId', config);

For more detail on see the images configuration property.

CORS Considerations

You may choose for your web application to upload image data to a separate domain. If so, you will need to configure Cross-origin resource sharing (CORS) for your application to comply with JavaScript "same origin" restrictions.

The Reference Upload Handler Scripts provided here configure CORS on a per script basis. You may also choose to configure CORS at the web application layer or the HTTP server layer.  

Further Reading on CORS

• W3C Wiki - CORS Enabled
• MDN - HTTP access control (CORS)
• W3C - Cross-Origin Resource Sharing Specification

Preventing Local Image Insertion

If you wish to prevent the insertion of local images by users you may do so by setting the images.allowLocal to false.

When images.allowLocal is set to false, users will be unable to add local images to editor content from the local image upload dialog tab, by drag-drop, or by copy paste. If a user takes an action that would normally result in the insertion of an image, a notification will be displayed that insertion of images is not allowed.

The example below creates an editor where local images have been prevented.

var config = {
	images : {
		allowLocal : false	// Prevent users from adding local images
	}
};
 
var editor = textboxio.replace('#targetId', config);