MultiPowUpload 3.1
Tutorials
  Home page
Contact support

MultiPowUpload tutorials 

  1. Data types
  2. Hidden mode
  3. Upload thumbnails
  4. Upload modes, chunked upload mode
  5. Skinning UI
  6. Form fields for each file. Configuring description window.
  7. Control MultiPowUpload using server response.
  8. Internationalization of UI.
  9. Auto layout. Relative coordinates.

 

  1. Data types

    Here is the list of all data types used by MultiPowUpload:
  2. HiddenMode

    Sometimes you need to use the html user interface instead of FLASH UI to select files, display a file list, etc. In this case you would like to control MultiPowUpload using Java Script API, and you can do almost everything except displaying a browse dialog. It happens because of Adobe Flash security policies which require direct user iteraction with FLASH UI to show the browse dialog. To avoid this problem, MultiPowUpload can be placed over the existing html object in the hiddenMode. In this mode MUltiPowUpload will display the browse dialog by a mouse click. Here are the steps to place a transparent MultiPowUpload instance over the html object: Example:
    	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("ElementITMultiPowUpload3.1.swf", "MultiPowUpload_holder", "90", "30", "10.0.0", "Extra/expressInstall.swf", flashvars, params, attributes);
    	
    	
  3. Upload thumbnails

    MultiPowUpload can generate image thumbails on the client side and upload them to a server. Supported image formats are JPEG, PNG, GIF. Here are the steps to configure the thumbnails upload feature:
  4. Uploade modes, chunked upload mode.

    By default, MultiPowUpload uploads files by the classic (RFC 1867) method. Here are several disadvantages of this method: The main advantage of the classic method is the usage of the standard upload algorithm, which allows you to use regular scripts to save uploaded files on server side.
    MultiPowUpload provides an alternate upload method - chunked upload mode. When this mode is enabled, MultiPowUpload will send files to a server by small chunks.
    Here are several advantages of this method:
    The main disadvantage is the file size limitation: MultiPowUpload can upload only files up to 100 Mb in size by this method. You should also use a special file processing script on server side to save uploaded chunks in one file. To enable this method, set the value of the chunkedUpload.enabled parameter to true.
    You can configure the chunk size with the chunkedUpload.chunkSize parameter. By default, the value of this paraneter is set to -1, in this case MultiPowUpload will automatically select the best value for the chunk size during the upload process. To limit maximum value for the chunk size, when it is controlled by MultiPowUpload, you can use the chunkedUpload.maxChunkSize parameter. The value of this parameter should be less than the upload file size limitation on server side. For example, by default, php limit of the upload file size is 2 Mb.
    Additionally, MultiPowUpload has 2 modes for the chuncked upload method: Here is the comparison table of classic and chunked upload methods:
      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
  5. 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.
    The MultiPowUpload theme package is a simple zip archive, which should contain an xml file with the parameters named theme.xml and the image files if it is necessary.
    The Xml file may contain any MultiPowUpload parameters. The Url to the image files inside the theme archive is relative to the archive root. All files should be placed into the archive root. You can find an example of the theme packages in the distribution package.
    Specify the url to the theme package using the themeUrl parameter.
    Along with the theme package you can set all of the skin related parameters in a regular way, on the html page.
    You can set graphics for states almost for all UI elements: normal, disabled, roll over, down. It is usually enough to specify an image file only for the normal state, then MultiPowUpload will generate the additional image for the disabled state automatically and will use the normal state image for other states.
  6. 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.
    For example, you have an image gallery and it would be nice to have information about album, some comments for image, tags, etc. for each image file.
    MultiPowUpload is easy to configure to show all of these form fields.
    First of all, let's see how it works. The description windows can be called from the list or the thumbnails view:

    Set the value of the listView.description.visible parameter to true (false by default) to display the line with a description in the ListView.

    Set the value of the thumbnailView.bottomPanel.showEditIcon parameter to true (false by default) to display this icon in the ThumbnailsView.
    When a user clicks some of those controls, MultiPowUpload displays the Description window:

    Using this window, a user can navigate through all the available form fields for each file.
    The navigationPanel is placed on the top of this window. This panel allows to change the active file without closing the window. A user simply clicks on the navigation buttons. Use the descriptionWindow.fileNavigation.enabled parameter to enable or disable this panel.
    The inputsList is located on the left side. This list contains all the configured form fields. Click some of the items in the list to change the rightPanel content, where a user makes an actual input.
    To add a form field into the input list, you should set the following required parameters, where * character should be replaced by the form field name. This name will be used by MultiPowUpload to post data. Here is the configuration for the form field displayed on the screenshot below:
        "descriptionWindow.inputs.album.type":"dropdown",
    "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"
    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).
  7. 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.
    To use this feature, you should write a special xml structure at any place of the response. MultiPowUpload will search for <MultiPowUpload> and </MultiPowUpload> tags in the server response and, if they are found, will try execute a command between these 2 tags.
    Below is the valid xml structure with all commands that are supported in the current version:
    <MultiPowUpload>
    //display message with caption "Warning" message from tag
    <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>
    Here is the decription of all available tags (commands):
  8. 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.
    The MultiPowUpload distribution package contains a lot of translation files in the Extra/Languages/ subfolder.
    If you would like to set the translation manually, you should set the value of the language.autoDetect parameter to false and remove the <LANGUAGE_CODE> placeholder from the language.source parameter.
    Changing the value of the language.source parameter at runtime using the setParameter method will result the reload of the translation file from the new location and the reinitialization of MultiPowUpload.
  9. 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:

    Example :
    "clearButton.x" : "<movie.width>-<clearButton.width>-5" - it sets the horizontal position of the clearButton aligned to the right border of the movie clip.