Image Uploader Flash JavaScript is a set of JavaScript classes intended to embed Image Uploader Flash into a web page via <script type="text/javascript"> block. This JavaScript (aurigma.imageuploaderflash.js) is a base for Image Uploader Flash ASP.NET and Image Uploader Flash PHP. Using the JavaScript library is more complicated: it requires configuring Image Uploader Flash parameters manually and does not provide facilities to handle uploaded data server-side. However, it is more flexible and can be used with any HTTP-compliant server platform (not only ASP.NET or PHP).
To add Image Uploader Flash to the page you just need to perform the following steps:
Copy the /Scripts folder to your web application.
It can be found in Image Uploader Flash installation folder (usually this is
C:\Program Files\Aurigma\Image Uploader Flash 7.2.9\).
It is recommended to use minified versions of Image Uploader Flash JavaScript scripts in production environment in order to preserve bandwidth. These files support the same functions as usual Image Uploader Flash JavaScript, but have been optimized in size. The minified versions contain .min.js in their filenames.
Link the aurigma.imageuploaderflash.js file with the page which
will host Image Uploader Flash.
<script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.js"></script>
Add JavaScript block to the position where you want to insert Image Uploader Flash. Here create a new instance of the imageUploaderFlash class and specify its identifier via the imageUploaderFlash.id parameter.
<script type="text/javascript">
var fu = $au.imageUploaderFlash('Uploader1');
// configure Flash Uploader
fu.writeHtml();
</script>
Then configure it in the way described in the following sections and call the imageUploaderFlash.writeHtml() method.
As soon as you call the imageUploaderFlash.writeHtml(), all necessary HTML code is inserted into the page at the current position. Alternatively, you can get the string with appropriate HTML code using the imageUploaderFlash.getHtml() method, and write it to the necessary position manually (maybe with some modifications).
Here we discuss the use Image Uploader Flash JavaScript by the example of a simple file catalog. Suppose that the catalog requires a user to upload files of various types and displays links to download these files. To implement this we should configure an imageUploaderFlash object and save uploaded files on a server. The sections below describe these steps in detail.
To configure Image Uploader Flash you should set properties of the imageUploaderFlash object. See the Image Uploader Flash JavaScript Reference for the detailed information about available properties.
The properties accepting objects (such us upload() or converters) should be specified in JSON format. Using this format you can also initialize all the imageUploaderFlash properties when creating it. Moreover, you can use the imageUploaderFlash.set(Object) method which accepts a JSON formatted string containing one or several properties definition.
Here is the source code of the main page of our catalog:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Embedding Scripts Library Sample</title>
</head>
<body>
<script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.js"> </script>
<script type="text/javascript">
var fu = $au.imageUploaderFlash({
id: 'Uploader1',
width: '650px',
height: '480px',
licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX',
converters: [
{ mode: '*.*=SourceFile' }
],
uploadSettings: {
actionUrl: 'Upload.aspx',
redirectUrl: 'Catalog.aspx'
}
});
fu.writeHtml();
</script>
</body>
</html>
On this page we set mandatory parameters, such as Image Uploader Flash identifier
and path to the aurigma.imageuploaderflash.swf file, as well as optional
parameters required by our file catalog. Here we specify server upload script and a page to which a user will be redirected
when the upload successfully completes. To configure Image Uploader Flash to send original
files we used the imageUploaderFlash.converters property which accepts an array of
converter objects. Each object specifies what will be uploaded (original file as is,
thumbnail created from original image file, icon associated with original file, or original file compressed into ZIP archive)
for each of the user-selected files. Since we need to upload only the original files, we set one converter with the
SourceFile mode. Read more about converters in the
Configuring Files to be Uploaded topic.
One more significant property is imageUploaderFlash.licenseKey which specifies
trial or full license key. If license key is not set Image Uploader Flash will not send files
(the exception is usage of uploader on localhost domain). See the
Evaluating and Registering Image Uploader Flash topic for details.
According to the catalog requirements, we save original files to the /Catalog folder. The way to implement it
depends on your server platform. Find the detailed instructions and code samples on how to save uploaded files in ASP.NET and PHP in the
Saving Uploaded Files in ASP.NET and Saving Uploaded Files in PHP articles.
On the configuring step we set the uploadSettings.redirectUrl property.
It specifies a page to which Image Uploader Flash will redirect users after the
upload is successfully completed. It would be convenient to list links to the uploaded files here. To implement this functionality we
iterate through all the files stored in the /Catalog folder and display a link to each of them.
The script which generates this page depends on your server platform. For example, if you save uploaded files in ASP.NET, you can use the script listed in the Quick Start with Image Uploader Flash ASP.NET topic. For PHP platform use the analogue from the Quick Start with Image Uploader Flash PHP article.
One more example of Image Uploader Flash usage is an image gallery. Suppose, it requires a user to upload original images along with their downsized copies. This task can be divided into the same phases as the previous one.
The configuration of the imageUploaderFlash object used for our image gallery is almost the same as for the file catalog described above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Embedding Scripts Library Sample</title>
</head>
<body>
<script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.js"> </script>
<script type="text/javascript">
var fu = $au.imageUploaderFlash({
id: 'Uploader1',
width: '650px',
height: '480px',
licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX',
converters: [
{ mode: '*.*=SourceFile' },
{ mode: '*.*=Thumbnail;*.*=Icon', thumbnailFitMode: 'Fit', thumbnailWidth: '120', thumbnailHeight: '120' }
],
uploadSettings: {
actionUrl: 'Upload.aspx',
redirectUrl: 'Gallery.aspx'
}
});
fu.writeHtml();
</script>
</body>
</html>
The difference is that we set an additional converter to specify a thumbnail which will be created for each image file and will be fitted to 120x120 pixels. For non-image files this converter will send icons. Read more about converters in the Configuring Files to be Uploaded topic.
The gallery stores original images and their thumbnails in /Gallery and /Gallery/Thumbnails
folders respectively. The way to implement it depends on your server platform. Find the detailed instructions and code samples
on how to save uploaded files in ASP.NET and PHP in the Saving Uploaded Files in ASP.NET
and Saving Uploaded Files in PHP articles.
On the configuring step we set the uploadSettings.redirectUrl property.
It specifies a page to which Image Uploader Flash will redirect users after the
upload is successfully completed. It would be convenient to display uploaded files here. To implement this functionality
we iterate through all the previews stored in the /Gallery/Thumbnails folder and display each
thumbnail as a link to its original image (original images are stored in the /Gallery folder).
The script which generates this page depends on your server platform. For example, if you save uploaded files in ASP.NET, you can use the script listed in the Quick Start with Image Uploader Flash ASP.NET topic. For PHP platform use the analogue from the Quick Start with Image Uploader Flash PHP article.