Tutorials
Home
page
Contact
support |
MultiPowUpload 3.3
Tutorials |
Home
pageContact
support |
MultiPowUpload tutorials
How to include MultiPowUpload on a page:
-
a. Usage of SWFObject.
SWFObject is javaScript library that helps you to place Flash movies on a page easily.
Read more about SWFObject here: http://code.google.com/p/swfobject/
Put the following code on the page:
<!-- div element will be replaced with MultiPowUpload flash movie. -->
<div id="MultiPowUpload_holder">You need at least version 10 of Flash player. Download the last version
<a target="_blank" href="http://www.adobe.com/shockwave/download/alternates/">here</a>!
</div>
<!-- SWFObject home page: http://code.google.com/p/swfobject/ -->
<script type="text/javascript" src="Extra/swfobject.js"></script>
<script type="text/javascript">
var params = {
BGColor: "#F8F6E6"
};
var attributes = {
"id": "MultiPowUpload",
"name": "MultiPowUpload"
};
//Here MultiPowUpload parameters should be specified
var flashvars = {
"uploadUrl": "FileProcessingScripts/ASP.NET/CSharp/uploadfiles.aspx",
"useExternalInterface": "true"
};
swfobject.embedSWF("ElementITMultiPowUpload.swf", "MultiPowUpload_holder", "450", "350", "10.0.0", "Extra/expressInstall.swf", flashvars, params, attributes);
</script>
-
b. Classic method with <object> and <embed> tags.
<OBJECT id="MultiPowUpload" codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
width="420" height="250" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" VIEWASTEXT>
<!-- Replace symbols " with the " at all parameters values and
symbols "&" with the "%26" at URL values or & at other values!
The same parameters values should be set for EMBED object below. -->
<PARAM NAME="FlashVars" VALUE="uploadUrl=FileProcessingScripts/PHP/uploadfiles.php
&serialNumber=put your serial number here
">
<PARAM NAME="BGColor" VALUE="#FFFFFF">
<PARAM NAME="Movie" VALUE="ElementITMultiPowUpload.swf">
<PARAM NAME="AllowScriptAccess" VALUE="always">
<PARAM NAME="SWLIVECONNECT" VALUE="true">
<!-- Embed for Netscape,Mozilla/FireFox browsers support. Flashvars parameters are the same.-->
<!-- Replace symbols " with the " at all parameters values and
symbols "&" with the "%26" at URL values or & at other values! -->
<embed bgcolor="#FFFFFF" id="MultiPowUpload" name="MultiPowUpload" src="ElementITMultiPowUpload.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" allowscriptaccess="always" width="400" height="250"
flashvars="uploadUrl=FileProcessingScripts/PHP/uploadfiles.php
&serialNumber=put your serial number here
">
</embed>
</OBJECT>
It is important to set both the name and id attributes in <object> and <embed> tags if you would like to use JavaScript methods and event handlers!
All MultiPowUPload parameters should be specified inside flashvars attribute of <object> and <embed> tags. Delimiter is '&' symbol. Replace symbols " with the " at all parameters values and
symbols "&" with the "%26" in URL values or & in other values!
How to setup parameters
There are 3 ways to specify parameters:
1. Using flashvars attribute of <object> and <embed> tags. The same set of parameters should be specified in flashvars attribute <object> and <embed> tags. Check previous section (2. How to include MultiPowUpload on page) to see an example.
2. If you use SWFObject to put MultiPowUpload on a page, you should set array of MultiPowUpload parameters in this way:
//Here MultiPowUpload parameters should be specified
var flashvars = {
"uploadUrl": "FileProcessingScripts/ASP.NET/CSharp/uploadfiles.aspx",
"useExternalInterface": "true"
};swfobject.embedSWF("ElementITMultiPowUpload2.1.swf", "MultiPowUpload_holder", "450", "350", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
3. Using external xml file, specified with externalVariablesUrl parameter
Example of xml file:
<?xml version="1.0" encoding="UTF-8"?>
<MultiPowUpload_parameters>
<!--Example of external propetries file-->
<param name="sendTestRequest">false</param>
<param name="removeButtonVisible">false</param>
<param name="httpErrorCodeDescription_413">Request Entity Too Large.<br>
For IIS servers: 1. Try to increase UploadReadAheadSize metabase property.<br>
2. Try to increase MaxRequestEntityAllowed property value in IIS config.<br>
For apache servers: Try to increase LimitRequestBody parameter in httpd.conf
</param>
</MultiPowUpload_parameters>
4. Using JavaScript setParameter method.
Example:
MultiPowUpload.setParameter("uploadUrl","uploadfiles.php");
How to use JavaScript API (MultiPowUpload events and methods )
1. Set MultiPowUpload parameter useExternalInterface to true (false by default) .
3. Set MultiPowUpload parameter javaScriptEventsPrefix to a necessary value ("MultiPowUpload" by default) .
To use MultiPowUpload events, you should declare appropriate JavaScript functions. Function name format isjavaScriptEventsPrefix+'_'+eventName. List of all available MultiPowUpload events is available in events section.
Example:
function MultiPowUpload_onAddFiles(addedFiles) { window.alert("Now total files in list is " + MultiPowUpload.getFiles().length+". Count of added files is "+addedFiles.length); }MultiPowUPload automatically initializes JavaScript object with the name specified in id and name attributes of SWFObject or <object> and <embed> tags depending on publishing method. In other words you can use MultiPowUpload methods right after onMovieLoad event.
Example:
function MultiPowUpload_onMovieLoad() { //Here and later you can use call MultiPowUpload methods like this; MultiPowUpload.getFiles(); //Where MUltiPowUpload is id (and name) attributes of <object> and <embed> tags or the same attributes from SWFObject.
}
If you put MultiPowUpload on page using <object> and <embed> tags, you should set both name and id attributes to the same value for correct initialization of MultiPowUpload JavaScript object.MultiPowUpload.sortFileList("SIZE", "ASC");
Data types
Here is the list of all data types used by MultiPowUpload:
var params = {
wmode: "transparent"
};
var attributes = {
id: "MultiPowUpload",
name: "MultiPowUpload",
style:"position:absolute"
};
var flashvars = {
"uploadUrl": "FileProcessingScripts/PHP/uploadfiles.php",
"useExternalInterface": "true",
"overlayObjectId":"browseButton",
"hiddenMode": "true"
};
swfobject.embedSWF("ElementITMultiPowUpload.swf", "MultiPowUpload_holder", "90", "30", "10.0.0", "Extra/expressInstall.swf", flashvars, params, attributes);
Upload thumbnails
MultiPowUpload can generate image thumbails on the client side and upload them to a server. Supported image formats are JPEG, PNG, GIF, BMP.
fit - MultiPowUpload will generate thumbnails with the size based on the aspect ratio of the original image. The result thumbnail dimensions may differ from the thumbnail.width and thumbnail.height parameters if the aspect rato of the original image and the destination thumbnail are different.
In our example this mode will produce an image with the 100x75 dimensions. The original image is resized by the longest side (in our case - by width).
=
fitByWidth - the result thumbnail will always have specified width. The result thumbnails height calculated with respect of the the aspect ratio of the original image.
In our example this mode will produce an image with the 100x75 dimensions.
=
fitByHeight - the result thumbnail will always have specified height. The result thumbnails width calculated with respect of the the aspect ratio of the original image.
In our example this mode will produce an image with the 133x100 dimensions.
= 
exactFit - the result thumbnail will always have specified dimensions. If the aspect rato of the original image and the destination thumbnail are different, "unused" space of thumbnail is filled with thumbnail.backgroundColor color. If the value of the thumbnail.format parameter set to "PNG" and the value of the thumbnail.transparentBackground parameter set to true, result thumbnail will have transparent background.
In our example this mode will produce an image with the 100x100 dimensions. The original image is resized by the longest side (in our case - by width).
= 
stretch - the result thumbnail will always have specified dimensions. If it is necessary, the image is stretched by width or height.
In our example this mode will produce an image with the 100x100 dimensions. As you can see, the image is stretched by the smallest side (in our case - by height).
= 
crop - the result thumbnail will always have specified dimensions. If it is necessary, the image is cropped by width or height.
In our example this mode will produce an image with the 100x100 dimensions. The result image is cropped by the longest side (in our case - by width).
= 
Uploade modes, chunked upload mode.
By default, MultiPowUpload uploads files by the classic (RFC 1867) method. Here are several disadvantages of this method:| Classic method | Chunked method | |
| File size limit. | 2 Gb | Adobe Flash guarantees 100 MB files uploading by this method but even 500 MB files work correctly on most PCs. |
| Cookies are sent correctly. | No | Yes |
| Server should be configured for large file uploads. | Yes | No |
| Server side file processing script. | Standard | Custom script from the distribution package |
How to redirect a user to another page when upload/download process is complete?
Specify the parameter redirectUploadUrl to url of the page which should be loaded when upload process is complete.
MultiPowupload post information about upload process results to this page. MultiPowUpload sends following information about each file (#INDEX# is index of file from 0 to count of files -1) :MultiPowUploadFileSize_#INDEX# - file size. MultiPowUploadFileId_#INDEX# - file id. MultiPowUploadFileDate_#INDEX# - file modification date. MultiPowUploadFileName_#INDEX# - file name. MultiPowUploadFileStatus_#INDEX# - file status. Check possible values here.
How to send additional information to server?
You can send additional information in several ways:
- a. Add info to uploadUrl property.
For example:
"uploadUrl": "uploadfiles.php?paramname1=value1¶mname2=value2"- b. Specify formName property.
In this case you can add a form to your html page and MultiPowUpload will automatically add form values to HTTP request.
- c. Specify customPostFields property.
Array of custom fields and values that will be added to the request separated by |
Example:
filedName1;value1|FieldName2;value2- d. Use JavaScript addPostField(String name, String value) method.
It adds “name–value” pair to the list that will be sent as text Form items with all files.Example:
MultiPowUpload.addPostField("Username","JDoe");- e. Use JavaScript addFilePostField(Stgring fileId,String name, String value) method.
It adds “name–value” pair to the list that will be sent as text Form items with a specified file.Example:
MultiPowUpload.addFilePostField(file.id, "Username","JDoe");
Skinning UI
MultiPowUpload provides the possibility to set colors, text styles, icons for most of UI elements and even replace them with the custom image files. To combine all of those parameters in one place, you can use the MultiPowUpload theme package.Form fields for each file. Configuring description window.
MultiPowUpload allows to have the feature to set up form fields for each file. It may be helpful if you would like to have a description for each file or some other information.
"descriptionWindow.inputs.album.type":"dropdown",This form field will be posted to server with the "album" name, so on server side you can access its value like this: Request.Form["album"] (ASP.NET) or $_POST["album"] (PHP).
"descriptionWindow.inputs.album.index":"2",
"descriptionWindow.inputs.album.specificForTypes":"",
"descriptionWindow.inputs.album.dropDownOptions":"Family;Friens;Other",
"descriptionWindow.inputs.album.label":"Album",
"descriptionWindow.inputs.album.message":"Select album for image"
Control MultiPowUpload using server response.
Starting from version 3.1, MultiPowUpload supports the execution of some commands received from a server in an http response.<MultiPowUpload> //display message with caption "Warning" message from tagHere is the decription of all available tags (commands):
<message>Uploaded</message>
//set value of parameter
<param name="clearButtonVisible">false</param>
//display message with specified caption and message
<function name="showAlert" param1="warning" param2="error message"/>
//cancell upload
<callfunction name="cancelUpload"/>
</MultiPowUpload>
Internationalization of UI.
Starting from version 3.1, MultiPowUpload provides the feature to detect a user's language automatically and load an necessary file with the translation. This feature can be enabled/disabled using the language.autoDetect parameter (false by deafult). If the parameter is set to true, MultiPowUpload will try to detect the user's language using the following JavaScript statement:(navigator.language) ? navigator.language : navigator.userLanguage. When the language is detected, the 2-letter language code will replace <LANGUAGE_CODE> placeholder in the language.source parameter. If the value of language.source parameter
does not contain
<LANGUAGE_CODE> placeholder, the language detection will not be performed. If the value of the language.autoDetect parameter is set to false and
the value of the language.source parameter
contains <LANGUAGE_CODE> placeholder, the language detection will not be performed and the language.source parameter will be ignored.
Auto layout. Relative coordinates.
To fit UI elements sizes to a dinamic text, MultiPowUpload have the autoLayout parameter which is enabled by default. When the value of this parameter is set to true, MultiPowUpload will automatically adjust the width and the height of the buttons depending on the text size and reposition all UI elements if their coordinates has been set as relative.
You can set the position of almost all UI elements, but dimensions of UI elements sometimes change at runtime (loading different translation files) and they overlap other UI elements. To avoid this issue, MultiPowUpload (starting from 3.1 version) allows to set the position of the UI elements relatively to the position of another UI element.
You can use ariphmetic operations and special placeholders inside the values of the parameters that set coordinates of some UI element.
Here is syntax of placeholder:
<ui_Element_Name.property> - where ui_Element_Name is a name of a UI element, for example, clearButton, and property is one of the Rectangled properties.
ui_Element_Name can have one of the values listed below:
The property can have one of the following values:
Upload files directly to amazon S3
Starting from version 3.3.3 MultiPowUpload allow upload files directly to Amazon S3 servers.