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

Download the JSP multimedia upload example code: jsp_upload_example.zip.
The source for EditLive multimedia upload scripts can also be found in the SDK_INSTALL/webfolder/uploadscripts/ directory where SDK_INSTALL represents the directory to where the EditLive! SDK is installed.

Defining the Location of the Upload Handler Script

The location of the image upload handler script must be defined within the EditLive! 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.

Defining the Location of the Upload Directory

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!, the base attribute of the <httpUpload> element must reflect the location of the directory where images are uploaded to on the Web server.

Setting Up the Sample JSP Upload Script

The JSP Image Upload Script provided with EditLive! 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 Java 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. If this is not the case, please change the example code according to the location where this file can be found on your machine.

  1. For file upload, the FILEDIR property in the FILEUPLOAD.properties file must be changed to indicate the location to which files are to be uploaded. Changing the FILEUPLOAD.properties does not require UploadScript.java to be recompiled.
    FILEDIR=C:\\webserver\\webapp\\images\\
  2. Should you wish to alter the UploadScript.java file, it must be recompiled for the changes to take effect. Once you have completed your changes, save the file. The file must now be compiled into a .class file. To compile this file you will need to run the Java compiler.
    • To run the Java compiler use the javac command from the command line. This command takes the form of:
      javac -classpath <files needed for compilation> <file for compilation>
    • Files that are needed for compilation should be listed with a semicolon ( ; ) separating them. The compilation of the UploadTest.java file requires the Apache Commons FileUpload library, as well as the servlet library (servlet.jar).

      Any spaces present in either the classpath or filename arguments should be enclosed by quotation ("") marks as shown below. For example, the following would be the command line command which follows from the previous steps:

      javac -classpath ".;C:\SDK_INSTALL\webfolder\uploadscripts\jsp\lib\commons-fileupload-1.0.jar; C:\SDK_INSTALL\webfolder\uploadscripts\jsp\lib\servlet-api.jar; C:\SDK_INSTALL\webfolder\uploadscripts\jsp\lib\commons-logging.jar" "C:\SDK_INSTALL\webfolder\uploadscripts\jsp\UploadScript.java"

      These locations will change dependant on your install of the EditLive! J2EE SDK and your Web server install. The location of the servlet-api.jar file will depend on which Web server you are using. The servlet-api.jar file may be replaced by an appropriate equivalent for your Web server.

  3. After this file has been correctly compiled (ie. the Java compiler has generated no errors and the UploadScript.class file has been generated), the UploadScript.class file must be copied to the SDK_INSTALL/WEB-INF/classes directory (where SDK_INSTALL represents the location that the EditLive! SDK install used by your Web server can be found). Following from the previous examples, the correct location for file would be:
    c:\webserver\webapp\WEB-INF\classes\UploadScript.class

Installing the Upload Script on the Web Server

Once the UploadScript.class has been copied to the SDK_INSTALL/WEB-INF/classes directory, the application's web.xml file must include an appropriate servlet mapping. The following steps detail how to do this:

  1. Declare the servlet alias for the UploadScript class. The following XML declares uploadScript servlet alias for the UploadScript class. The <servlet-name> element contains the servlet alias, while the <servlet-class> tag contains the name of the class (found within the WEB-INF/lib directory of the Web application) to be used for the servlet.
    <!DOCTYPE web-app
       PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN"
       "http://java.sun.com/j2ee/dtds/web-app_2_2.dtd">
    <web-app>
       <servlet>
          <servlet-name>
             uploadScript
          </servlet-name>
          <servlet-class>
             UploadScript
          </servlet-class>
       </servlet>
    ...
    
  2. Map a URL pattern to the servlet. The servlet will then be used to process HTTP requests corresponding to the URL pattern. The context for the URL pattern is the current Web application. Thus, a mapping of /uploadscript within the application editlivejava would process all requests to the http://webserver/editlivejava/uploadscript URL where webserver represents the host server.
    • The following example maps the uploadScript servlet (as specified above) to the /uploadscript URL pattern. The <servlet-name> element contains the servlet alias name and the <url-pattern> contains the URL pattern to be used to map to that servlet.
       
      <!DOCTYPE web-app
         PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN"
         "http://java.sun.com/j2ee/dtds/web-app_2_2.dtd">
      <web-app>
         <servlet>
            ...
         </servlet>
         <servlet-mapping>
            <servlet-name>
               uploadScript
            </servlet-name>
            <url-pattern>
               /uploadscript
            </url-pattern>
         </servlet-mapping>
         ...
      </webapp>
      

Configuring EditLive! to Use the JSP Image Upload Script

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

  1. EditLive!'s configuration file should now be edited to reflect the changes made in the previous section. You will find these settings within the <httpUpload> element. The URL setting should reflect the location of the UploadScript.class file on your Web server.
    • The following example reflects the setting of the href attribute of the <httpUpload> element if the upload script could be found at the URL http://www.yourserver.com/webapp/uploadscript. See the previous section for information on how to configure the URL mapping for the upload script.
       
      <editLive>
         ...
         <mediaSettings>
            <httpUpload
               base= ...
               href="http://www.yourserver.com/webapp/uploadscript" />
            ...
         </mediaSettings>
         ...
      </editLive>
      
  2. The HTTP Image Upload base attribute should be changed to reflect the location where images can be found on your Web server.

    This location may not be the same value as that used within the upload acceptor script, above. Rather, it will be the virtual directory alias used by your Web server for the location listed in upload acceptor script.

    • This example follows from the code above. It uses an absolute URL as the value of the base attribute. The value of the base attribute corresponds to the URL that for the directory that images are uploaded to.
       
      <editLive>
         ...
         <mediaSettings>
            <httpUpload
               base="http://www.yourserver.com/webapp/images/"
               href="http://www.yourserver.com/webapp/uploadscript" />
            ...
         </mediaSettings>
         ...
      </editLive>
      

Extending the Image Upload Script for Use with Other File Types

The Java (JSP) upload acceptor script provided with EditLive! 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

See Also

Attachments:

jsp_upload_example.zip (application/zip)
jsp_upload_example.zip (application/zip)
jsp_upload_example.zip (application/zip)