UniversalUploader tutorials

MultiPowUpload 3.3
Tutorials

Home page

Contact support

UniversalUploader tutorials

Place uploader on a page
Set parameters
Internationalization
Using JavaScript methods, events

Place uploader on a page

First of all, you should add <script> tag to the <head> section of your html page to load js code of UniversalUploader:

<script type="text/javascript" src="scripts/universalUploader.js"></script>

Secondly, you should have some html element on a page where you would like to see UniversalUploader. For example, <DIV> element :

<div id="universalUploader" >
<noscript>Place standard form with file input here for users who have disabled JS in browser.<br/>
Form snippet:<br/>
<form id="myform" name="myform" action="url to file processing script"  method="post" enctype="multipart/form-data">
<input name="Filedata" type="file"><br>
<input type="submit" value="Upload" />
</form>
 </noscript>
</div>

We recommend you to place standard html form inside <noscript> tag to be sure that all of your users will able to upload files, even if JavaScript is disabled in browser for some reason.
UniversalUploader will append (not replace) elements to this div.
And finally, you should call init method (with necessary configuration) of universalUpload object :

<script type="text/javascript">

universalUploader.init({
	uploaders: "drag-and-drop, flash, silverlight, classic",
	singleUploader : false,
	holder: "universalUploader",
	width: "600", 
	height: "300",
	//Url to file processing script
	url: "FileProcessinfScripts/PHP/uploadfiles.php"
});

</script>

Set parameters

All configuration parameters should be passed as object name/value collection to the init method. Example:

universalUploader.init({
	uploaders: "drag-and-drop, flash, silverlight, classic",
	singleUploader : false,
	holder: "universalUploader",
	width: "600", 
	height: "300",
	//Url to file processing script
	url: "FileProcessinfScripts/PHP/uploadfiles.php"
});

Internationalization

It is possible to translate universalUpload to different languages. To apply translation, you should add reference to js tag at <head> section of your page right after reference to the universalUploader.js.
Example:

<script type="text/javascript" src="scripts/universalUploader.js"></script>
<script type="text/javascript" src="scripts/Localization/language_ru.js"></script>

It is not difficult to make translation to new language or to edit existing translation file. Format of js file with translation is simple: it should contain call of applyLanguage method with one parameter which is object name/value collection . Let's have a look at the following example:

universalUploader.applyTranslation({
	"constant_notAvailable" : "N/A",
	"constant_bytes" : "B",
	"constant_kiloBytes" : "KB",
	"constant_megaBytes" : "MB",
	"constant_gigaBytes" : "GB",
	"constant_decimalSeparator" :".",
	
	"tabheader_html4" : "standard upload",
	"tabheader_html5" : "d'n'd ",
	"tabheader_flash" : "Flash",
	"tabheader_silverlight" : "Silverlight",

	"button_browse" : "Browse",
	"button_upload" : "Upload",
	"button_cancel" : "Cancel",
	"button_clear" : "Clear",
	
	"messages_filesCountExceeded": "Only {51} files are allowed to upload! {50} files were ignored!",
	"messages_fileSizeExceeded": "Only files less than {51} are allowed! {50} files were ignored!",
	"messages_totalFileSizeExceeded": "Total size of the files should be less than {51}. {50} files were ignored!",
	"messages_wrongFileType": "Only files with following type: {51} allowed to upload! {50} files were ignored!",
	"messages_disabledType": "File with following types : {51} are not allowed to upload! {50} files were ignored!",
	
	"status_ready" : "Count of files: {1} ({2})",
	"status_uploading" : "Total: {0}% ({3}/{1}) {4}/{2} ({5}/sec, time left: {6}:{7}:{8})",
	"status_complete" : "Upload complete! {3} files ({4}/{2}), Elapsed time: {9}:{10}:{11}",
	"status_error" : "Error: {12}"	
});

Also you can call this method in any place of html page but BEFORE of call of the init method, otherwise translation will not be applied to all of the ui elements.

Using JavaScript methods, events

You can call any method of UniversalUploader in regular way. Example:
```
universalUploader.getFiles();
```
There are several ways to subscribe to necessary events:
- Set appropriate name/value pair in the handlers parameter during initialization. Example:
```
universalUploader.init({
	//Set event listeners
	handlers: {
		FilesAdded : function(uploaderId, files){ alert(files.length)}		
	}
});
```
- Call bindEventListener method with necessary parameters. Example:
```
universalUploader.bindEventListener("FilesAdded", function (uploaderId, files){
		AddValueToLog("Added "+files.length+" files");
	});
```