Image Uploader Documentation
NEW! Complete ASP integration guide
Download ASP integration guide by Chris EigenheerBrief Description
Our Image Uploader was built using the Adobe Flash technology, which guarantees wide compatibility across web browsers and client systems. You may configure the HTML/JavaScript code to allow it to gracefully degrade to an HTML input element when Flash and/or JavaScript aren't available. Uploaded images are processed server-side by a simple four line PHP we provide as a sample code. Similar code can be written in other server-side languages.
User Interface customization and JavaScript interface allow you to seamlessly integrate the Image Uploader with standard HTML forms. You can use multiple instances in one page or help your visitors with orientation by showing them a thumbnail image while they're writing its description. Other configured variables are maximal and minimal dimensions of the image, ID variable and other GET variables sent along the image, automatic redirect after successful upload, background of the Uploader element, text in the choose file button etc.
Note: Some features are available only in the full version.
Uploader Configuration
The Uploader is configured in two ways: using HTML/JavaScript integration and by the XML configuration file. Properties configured in HTML/JS include the dimensions of the Uploader element in pixels, URL of the XML configuration file and the value of the ID variable sent to the processing PHP script.
Any method of integrating Flash into HTML page is possible, but you have to make sure the dimensions of the Flash movie are set properly (minimal height for the Uploader to work is 40 pixels, minimal width is 120 pixels; file name display needs additional 120 pixels of width and thumbnail display increases the minimal width by the value of the set height). Using a code similar to that included in the downloaded package, the dimensions are set this way:
<object type="application/x-shockwave-flash" width="300" height="50" data="uploader-free.swf">
for the HTML code and:
AC_FL_RunContent('width','300','height','50' …
if you decide to use the Adobe Active Content javascript method.
The URL of the configuration file and the value of the ID variable are passed to the Flash by the FlashVars method. For HTML, this is the valid use of FlashVars:
<param name="flashVars" value="configFile=config.xml&IDValue=xml" />
and for the Active Content javascript:
AC_FL_RunContent('width','300','height','50','flashVars','configFile=config.xml&IDValue=xml' …
The URL of the config file may be either relative or absolute, which allows you to have for example one common configuration file for all instances of the Uploader across your website.
Setting the ID variable value to xml doesn't send the string 'xml', but instead tells the Uploader it should look into the XML file for a proper value (more info in the XML reference).
Properties that must or may be set in the XML file are described in the XML reference document.
HTML Integration
There are many ways of integrating Flash into a HTML page like the Embed tag (deprecated in XMTML), Object tag, Adobe Active Content JavaScript and SWFObject JavaScript. Any of them may be used to integrate the Uploader, provided the dimensions are set and flashVars passed properly. If you decide to use the HTML form integration feature that needs JavaScript support to work correctly, make sure the Uploader degrades gracefully where JavaScript is not available.
The sample code packed with the Image Uploader uses a slightly modified version of Active Content JavaScript and an Object tag where JavaScript is not supported. When modifying this code, remember that the dimensions, flashVars values and Uploader ID must be readjusted in both the JavaScript call and the HTML code.
JavaScript Interface/Form Integration
Note: This feature is not available in the free version.
JavaScript interface is used to seamlessly integrate the Uploader with your HTML forms. First, a script disables the Submit button which is later unlocked when the user chooses an image file.
Sample JavaScript and HTML code is provided with the full version of the Uploader. The javascript included in the sample HTML file:
// ID of the Submit button in your HTML code
And the code of the external file (submit-form.js):
var buttonID = 'submitButton';
// ID of your form element
var formID = 'myForm';
// ID of the Flash movie
var flashID = 'imageUploader';
// this prevents the user from submitting the form before an image has been chosen
window.onload = function() {
disableSubmitButton();
}
// this function prevents the form from submitting and tells the Uploader element to
Note: if you use multiple instances of the Uploader combined with the JavaScript interface, you can count the submitForm() calls and submit the form after last image has been uploaded.
// upload the chosen image
function startUpload(eventObject) {
…
imageUploader.jsUpload(); // this line is responsible for communication with the Uploader
}
// this function is called FROM the Uploader element and submits the form after the Image
// has been uploaded
function submitForm() {
document.getElementById(formID).submit();
}
PHP Processing
Very short piece of PHP code is needed to successfully receive and save the image from HTTP POST data. As an identificator and other GET variables are sent with the image, you can easily connect that particular image to other information in your database. Our sample code uses the “ID” GET variable as a name for the new file:
<?php
Note: the directory rights on your server must be set properly for writing files.
$IDValue = $_GET['id']; // retrieves the identification variable value
$ImageData = $GLOBALS['HTTP_RAW_POST_DATA']; // retrieves the image data
$jpgfile = fopen($IDValue . ".jpg","w"); // opens (creates) a new file for writing
fwrite($jpgfile, $ImageData); // writes the image data into the file
fclose($jpgfile); // closes the file
?>