When inserting and uploading local images and objects (multimedia files) to a remote server, Ephox EditLive! for XML uses the HTTP multipart form-data protocol.

The <httpUpload> element of the XML configuration file contains the configuration information for the HTTP Upload functionality for images and other multimedia objects.

Using the HTTP POST method to insert and upload images and objects offers a secure way of allowing end users to interact with the remote server that the images are to be stored on.

In order to upload local files to the remote server via HTTP, 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 (i.e. <INPUT type="file">), the script specified in the ACTION attribute of the form element is used to upload the file to the server. This is the same script specified in EditLive! for XML to upload local files inserted into EditLive! for XML to the remote server.

The HTTP upload configuration requires a URL corresponding to the image upload handler script and also a base property to use with image and object URLs. These properties can be set via the href and base attributes of the <httpUpload> element respectively.

<editLive>
  ...
  <mediaSettings>
  ...
    <httpUpload 
      base="http://www.yourserver.com/userfiles/" 
      href="http://www.yourserver.com/scripts/upload.jsp"
    />
    ...
  </mediaSettings>
  ...
</editLive>

<editLive>
  ...
  <mediaSettings>
    ...
    <httpUpload 
      base="../site/objects" 
      href="http://yourserver.com/scripts/uploadhandler.asp"
    />
    ...
  </mediaSettings>
  ...
</editLive>

Images and embedded object files are uploaded when the contents of Ephox EditLive! for XML are submitted. This occurs when the form which contains Ephox EditLive! for XML has its submit method called.

Local files which are uploaded to the server by EditLive! for XML are placed within a form field with the name image. When implementing an upload acceptor script specifically to receive files from EditLive! for XML the script should be made to accept files submitted within the image field.

It is possible to dynamically assign the URL for images or objects embedded within the content as they are uploaded. This functionality is achieved via the POST acceptor for files. If the POST acceptor returns a string containing a URL the URL is inserted into the document source code as the URL for the file. In this way it is possible to dynamically assign the directory files are uploaded to without having to dynamically generate the configuration file.

For this functionality to operate correctly the relevant upload acceptor script must only return a single line string with the URL corresponding to the location for the uploaded file.

When setting the file URL in this manner the URL returned by the POST acceptor script to EditLive! for XML takes precedence over the base setting in the XML configuration file.

EditLive! for XML is packaged with sample upload scripts for ASP, JSP and ASP.NET that enable uploads for common image formats. The source for these scripts can be found in the SDK_INSTALL/webfolder/uploadscripts/ directory where SDK_INSTALL represents the directory to where the EditLive! for XML SDK is installed. The upload scripts can also be extended to be used with files associated with embedded objects (e.g. Macromedia Flash files). This is achieved by adding the relevant extensions to the list of known file types.

Documentation is also available for the upload acceptor scripts:

There are a number of problems that may occur while attempting to use HTTP Upload. These can be complicated and vary from server to server. For more information on the settings relevant for your server please consult the documentation for your server. Some common problems include:

This article provides a sample script, written using Active Server Pages and VBScript, to upload images via the HTTP POST method. Instructions on how it can be tailored for use in your Web applications are also included. You will need to set this facility if you would like to be able to upload local images to the server.

The location of the image upload handler script must be defined within the XML configuration file. This setting is configured via the href attribute of the <httpUpload> element of the configuration file. To use this example script the href attribute should point to the location of this script on the server.

This example script uploads images to the directory specified by the imageDir variable. In order for images to function correctly within EditLive! for XML the base attribute of the <httpImageUpload> element must reflect the location of the directory where images on the Web server.

Ephox has written a sample image upload handler script using Active Server Pages and VBScript. This script can be found at SDK_INSTALL\webfolder\uploadscripts\asp\fileUpload.asp where SDK_INSTALL represents the location where the EditLive! for XML SDK is installed.

Below are the steps required to use the ASP image upload handler in your own Web application.

The ASP upload acceptor script provided with EditLive! for XML can, by default, only be used with common image file types. This is restricted by inspecting the extension of an uploaded file. Support for other file types, including multimedia object types such as Macromedia Flash (.swf) and Apple QuickTime (.mov) can easily be added by adding the relevant extension to the list of allowed extensions in the upload acceptor script.

The list of permitted extensions can be found at the bottom of the ASP upload acceptor script file in the following statement:

if OnlyExtention="jpeg" or _
  OnlyExtention="jpg"  or _
  OnlyExtention="tiff" or _
  OnlyExtention="png"  or _
  OnlyExtention="gif" then
    call SaveFile(curDir & "\"  & OnlyFileName, FileData)
end if

The example below demonstrates how this example can be extended to handle Flash and QuickTime files:

if OnlyExtention="jpeg" or _
  OnlyExtention="jpg"  or _
  OnlyExtention="tiff" or _
  OnlyExtention="png"  or _
  OnlyExtention="gif" or _
  OnlyExtention="swf" or _
  OnlyExtention="mov" or _ then
    call SaveFile(curDir & "\"  & OnlyFileName, FileData)
end if

ASP.NET allows for the easy creation of upload handler scripts. The following ASP.NET page allows files to be uploaded. The fileupload.aspx page does not process the upload, this task is performed by the fileupload.aspx.cs page.

The location of the image upload handler script must be defined within the XML configuration file. This setting is configured via the href attribute of the <httpUpload> element of the configuration file. To use this example script the href attribute should point to the location of this script on the server.

This example script uploads images to the directory specified by the imageDir variable. In order for images to function correctly within EditLive! for XML the base attribute of the <httpImageUpload> element must reflect the location of the directory where images are to be stored on the Web server.

Ephox has written a sample image upload handler script using Active Server Pages and VBScript. This script can be found at SDK_INSTALL\webfolder\uploadscripts\aspnet\fileUpload.aspx and SDK_INSTALL\webfolder\uploadscripts\aspnet\fileUpload.aspx.cs where SDK_INSTALL represents the location where the EditLive! for XML SDK is installed.

<%@ Page language="c#" Codebehind="fileupload.aspx.cs" 
AutoEventWireup="false" Inherits="Ephox.FileUpload" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <HEAD>
    <title>fileupload</title>
    <meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
    <meta content="C#" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5" 
name="vs_targetSchema">
  </HEAD>
  <body MS_POSITIONING="GridLayout">
    <form id="fileupload" method="post" runat="server">
    </form>
  </body>
</HTML>

private void Page_Load(object sender, System.EventArgs e)
{
  /*
   * Set the "path" variable to the location where images are to be stored 
   */
  string path = "../images";

  HttpFileCollection files;
  files = Page.Request.Files;
  for(int index=0; index < files.AllKeys.Length; index++)
  {
    HttpPostedFile postedFile = files[index];
    string fileName = null;
    int lastPos = postedFile.FileName.LastIndexOf('\\');
    fileName = postedFile.FileName.Substring(++lastPos);
    //Check the file type through the extension
    if(fileName.EndsWith("jpg") || fileName.EndsWith("jpeg") || 
      fileName.EndsWith("gif") || fileName.EndsWith("png") || 
      fileName.EndsWith("tiff"))
    {
      postedFile.SaveAs(MapPath(path + "/" + fileName));
    }
  }
}

Below are the steps required to use the ASP.NET image upload handler from above with EditLive! for XML in your own Web application.

The ASP.NET upload acceptor script provided with EditLive! for XML can, by default, only be used with common image file types. This is restricted by inspecting the extension of an uploaded file. Support for other file types, including multimedia object types such as Macromedia Flash (.swf) and Apple QuickTime (.mov) can easily be added by adding the relevant extension to the list of allowed extensions in the upload fileupload.aspx.cs portion of the acceptor script.

The list of permitted extensions can be found as follows in the ASP.NET fileupload.aspx.cs upload acceptor script file in the following statement:

HttpFileCollection files;
files = Page.Request.Files;
for(int index=0; index < files.AllKeys.Length; index++)
{
  HttpPostedFile postedFile = files[index];
  string fileName = null;
  int lastPos = postedFile.FileName.LastIndexOf('\\');
  fileName = postedFile.FileName.Substring(++lastPos);
  //Check the file type through the extension
  if(fileName.EndsWith("jpg") || fileName.EndsWith("jpeg") || 
    fileName.EndsWith("gif") || fileName.EndsWith("png") || 
    fileName.EndsWith("tiff"))
  {
    postedFile.SaveAs(MapPath(path + "/" + fileName));
  }
}

The example below demonstrates how this example can be extended to handle Flash and QuickTime files, note the addition of the file extensions to the if statement in the code below:

HttpFileCollection files;
files = Page.Request.Files;
for(int index=0; index < files.AllKeys.Length; index++)
{
  HttpPostedFile postedFile = files[index];
  string fileName = null;
  int lastPos = postedFile.FileName.LastIndexOf('\\');
  fileName = postedFile.FileName.Substring(++lastPos);
  //Check the file type through the extension
  if(fileName.EndsWith("jpg") || fileName.EndsWith("jpeg") || 
    fileName.EndsWith("gif") || fileName.EndsWith("png") || 
    fileName.EndsWith("tiff") || fileName.EndsWith("swf") ||
    fileName.EndsWith("move"))
  {
    postedFile.SaveAs(MapPath(path + "/" + fileName));
  }
}

This article provides a sample script, written using a Java servlet, to upload image file via a HTTP POST. Instructions on how it can be tailored for use in Web applications are also included.

The location of the image upload handler script must be defined within the XML configuration file. This setting is configured via the href attribute of the <httpUpload> element of the configuration file. To use this example script the href attribute should point to the location of this script on the server.

This example script uploads images to the directory specified by the FILEDIR property within the FILEUPLOAD.properties file. In order for images to function correctly within EditLive! for XML the base attribute of the <httpUpload> element must reflect the location of the directory where images are uploaded to on the Web server.

The JSP Image Upload Script provided with EditLive! for XML is dependant on the Apache Commons FileUpload and Logging packages. These packages are provided with the source for the JSP upload script in the SDK_INSTALL\webfolder\uploadscripts\jsp\lib directory where SDK_INSTALL is the directory where the EditLive! for XML SDK is installed. The source for the example script can be found in the UploadScript.java file.

An implementation of the J2EE servlet API is also required to use the same upload script. The servlet-api.jar file from the Apache Tomcat project has been included in the SDK_INSTALL\webfolder\uploadscripts\jsp\lib directory where SDK_INSTALL is the directory where the EditLive! for XML SDK is installed.

If this is not the case please change the example code according to the location where this file can be found on your machine.

Once the UploadScript.class has been copied to the EditLive!_Java_Install/WEB-INF/classes directory (where EditLive_Java_Install represents the location that the EditLive! for XML SDK install used by your Web server can be found) the web.xml file of the application must include an appropriate servlet mapping. The following steps detail how to do this:

Below are the steps required to use the JSP image upload handler with EditLive! for XML in your own Web application.

The Java (JSP) upload acceptor script provided with EditLive! for XML can, by default, only be used with common image file types. This is restricted by inspecting the extension of an uploaded file. Support for other file types, including multimedia object types such as Macromedia Flash (.swf) and Apple QuickTime (.mov) can easily be added by adding the relevant extension to the list of allowed extensions in the acceptor script's FILEUPLOAD.properties file.

To add the required extensions simply edit the FILEEXT property of the FILEUPLOAD.properties file. This property is a comma-delimited-list of extensions. Once you have specified the required extension it is recommended that the server be restarted so that the change may take effect.

The list of permitted extensions can be found as follows in the FILEUPLOAD.properties file:

FILEEXT=jpg,jpeg,tiff,png,gif

The example below demonstrates how this example can be extended to handle Flash and QuickTime files, note the addition of the file extensions to the property declaration below:

FILEEXT=jpg,jpeg,tiff,png,gif,swf,mov

This article provides a sample script, written using PHP, to upload images via the HTTP POST method. Instructions on how it can be tailored for use in your Web applications are also included. You will need to set this facility if you would like to be able to upload local images to the server.

The location of the image upload handler script must be defined within the XML configuration file. This setting is configured via the href attribute of the <httpUpload> element of the configuration file. To use this example script the href attribute should point to the location of this script on the server.

This example script uploads images to the directory specified by the imageFolder variable. In order for images to function correctly within EditLive! for XML the base attribute of the <httpImageUpload> element must reflect the location of the directory where images on the Web server.

Ephox has written a sample image upload handler script using PHP. This script can be found at SDK_INSTALL\webfolder\uploadscripts\php\php_postacceptor.php where SDK_INSTALL represents the location where the EditLive! for XML SDK is installed.

Below are the steps required to use the PHP image upload handler in your own Web application.

This article provides a sample script, written using ColdFusion, to upload images via the HTTP POST method. Instructions on how it can be tailored for use in your Web applications are also included. You will need to set this facility if you would like to be able to upload local images to the server.

The location of the image upload handler script must be defined within the XML configuration file. This setting is configured via the href attribute of the <httpUpload> element of the configuration file. To use this example script the href attribute should point to the location of this script on the server.

This example script uploads images to the directory specified by the imageFolder variable. In order for images to function correctly within EditLive! for XML the base attribute of the <httpImageUpload> element must reflect the location of the directory where images on the Web server.

Ephox has written a sample image upload handler script using ColdFusion. This script can be found at SDK_INSTALL\webfolder\uploadscripts\coldfusion\coldfusion_postacceptor.chm where SDK_INSTALL represents the location where the EditLive! for XML SDK is installed.

Below are the steps required to use the ColdFusion image upload handler in your own Web application.