Using HTTP for Image insertion and Upload in EditLive!

Ephox, August 2001

Summary

When inserting and uploading images to a remote server, EditLive! allows the HTTP Post protocol to be used instead of FTP for greater security.   The following properties and methods are used to allow this.

• POSTAcceptorURL
• HTTPImageRoot
• ImageURLType
• UploadImages
• HTTPImageURL

More Information

Why Use HTTP Instead of FTP?

Using the HTTPPost method to insert and upload images offers a much more secure way of allowing end users to interact with the remote server that the images are stored on. 

What is Required?

In order to upload images to the remote server via HTTP, you will need a server-side image upload handler script that accepts the images on the server and stores them in the correct directory.  This script is the same script that would be used for uploading any file to the server.  For example, when you use a file INPUT tag (i.e. <INPUT type="file">), the script specified in the action attribute of the FORM tag which is used to upload the file to the server, is the same script specified in EditLive! to upload local images inserted into EditLive!.

Sample Image Upload Handler Scripts

We have available for download some sample image upload handler scripts for certain server-side languages.  Please click on the relevant links below to obtain these.

Sample ASP upload script
Sample PHP upload script

EditLive! HTTP Properties and Methods

POSTAcceptorURL

This property specifies the URL of the image upload handler script used to upload any local images  to the server via HTTP.  This URL must be absolute. 

The POSTAcceptorURL property acts as a flag to let EditLive! know what protocol to use for images. If this property is set, HTTP is used. If not, FTP is used.

This property should be set in the onload function.  For more information regarding this property please see the POSTAcceptorURL reference page.

HTTPImageRoot

HTTPImageRoot is used to define the URL used to calculate the web address of the local images uploaded to the web server via the HTTP POST method. The URL specified in this property must match the final directory where the uploaded image files will reside on the server.  If this property is not specified the WebRoot will be used instead.  This means that unless these two URLs are the same, this property MUST be defined for the images to be rendered correctly. 

If the URL defined in this property is relative, relative image references will be created by simply adding the image name to the HTTPImageRoot.  Absolute image references will be created by combining the relative HTTPImageRoot with the specified WebRoot, and adding the image name.  If an absolute URL is defined in this property, only absolute image references can be returned, and will be created by adding the image name to the HTTPImageRoot.  The ImageURLType property should be used to control whether returned image references are absolute or relative. 

This property should be set in the onload function. For more information regarding this property please see the HTTPImageRoot reference page.

ImageURLType

ImageURLType is used to define whether the image references included within the HTML source code created within EditLive! are absolute or relative URLs.  This property needs to be called when the page contents are submitted.  For more information regarding this property please see the ImageURLType reference page.

UploadImages

The UploadImages method uploads any local images inserted into EditLive! to the remote server.  This method needs to be called when the page contents are submitted.  Please ensure that the UploadImages method is called before the contents of EditLive! are retrieved using the getSource or getSourceAll property. 

For more information regarding this method please see the UploadImages reference page.

HTTPImageURL

If image insertion is available from a remote server, the server needs to have available a page of images or links to images that the user can choose from. HTTPImageURL is used to specify the absolute URL of this page. This property should also be set in the onload function.  For more information regarding this property please see the HTTPImageURL reference page.

Example

Below is a sample page that shows how the EditLive! properties and methods outlined above are used to allow image insertion via HTTP. 

<HTML>
<HEAD>
  <TITLE>HTTP Image Upload Sample</TITLE>
  <!-- *** STEP 1: include external script files *** -->
  <SCRIPT language="JavaScript1.2" src="editlive/editLive4.js"></SCRIPT>
  <SCRIPT language="VBScript" src="editlive/editLive4.vbs"></SCRIPT>

<!-- *** STEP 7: include a function to upload local images and retrieve EditLive! contents *** -->
<SCRIPT language="JavaScript1.2">
function btnGetContents_onclick() {
	editLive1.UploadImages();
	document.frm1.contents.value = editLive1.getSource();
}
</SCRIPT>
</HEAD>
<BODY>

<h1>HTTP Image Upload Sample</h1>

<!-- *** STEP 2: insert a SCRIPT block *** -->
<script language="JavaScript">
<!--

/*** STEP 3: configure global variables ***/
EditLiveGlobal.setDownloadDirectory("../editlive");

/*** STEP 4: create an EditLive! instance ***/
var editLive1 = new EditLive("Plugin1", 600, 350);

/*** STEP 5: assign an onload function to set properties and methods ***/
editLive1.onload = EditLive1_onload;

function EditLive1_onload()
{     
   //** Run in HTMLString mode
   editLive1.setEditLiveMode('HTMLString');

   //** Use HTTP image upload
   editLive1.setPOSTAcceptorURL('http://www.yourserver.com/upload.asp');
   editLive1.setHTTPImageRoot('http://www.yourserver.com/images');
   editLive1.setHTTPImageURL('http://www.yourserver.com/images/image_selection.asp');

   //** Enable end users to insert images from all locations
   editLive1.setImageMode('All');

   //** Set the initial document contents of "An example default value"
   editLive1.setSource('An example default value');
   editLive1.setWebRoot('http://www.yourserver.com');
}

//-->
</script>

<!-- *** STEP 6: insert a button to retrieve the content of EditLive! *** -->
<FORM name="frm1" action="xt_form.asp" method="post">
<INPUT type="hidden" name="contents">
<INPUT type="button" name="Get Contents" value="Get Contents" onclick="btnGetContents_onclick()">
</FORM>

</BODY>
</HTML>