Single File Upload

Upload Files

#	Name	Size	Loaded	Percent Uploaded	Status
{{file.id}}	{{file.name}}	{{file.size}}	{{file.loaded}}	{{file.percent}}	{{file.status}}

					<button pl-upload pl-progress-model="percent" pl-auto-upload="true" pl-files-model="files">Upload Files</button>

		    		function MyCtrl1($scope) {
	$scope.percent = ''; // A variable to store the overall percentage of the file uploaded.
	$scope.files = [];  // An empty array to store the files uploaded.
}

percent is a variable that stores the average percent of the files uploaded.Pass the variable in pl-progress-model attribute.

files is an array that stores the objects of files uploaded.

The list of files is shown in a table using the files array.

pl-auto-upload attribute is used to declare if you want to upload the file directly after selecting.Pass true or false accordingly.

progress bar is shown by a directive provided by angular-ui.Refer it at http://angular-ui.github.io/bootstrap/

Mutiple Files Upload

Pick Files
Upload Files

#	Name	Size	Loaded	Percent Uploaded	Status
{{file.id}}	{{file.name}}	{{file.size}}	{{file.loaded}}		{{file.status}}

					<a class="btn btn-primary" pl-upload pl-auto-upload="false" pl-files-model="multiFiles" pl-progress-model="multiPercent" pl-instance="uploader">Pick Files</a>
<a class="btn btn-primary input-block-level" ng-click="uploader.start()">Upload Files</a>

 	
		   	function MyCtrl1($scope) {
	$scope.multiFiles = [];  // Declare an empty array to store the files uploaded.
}

For Uploading multiple files with a single upload button you need to define the attribute pl-auto-upload to be false.

multiFiles is an array that stores which stores the objects of files added to the array.

The list of files is shown in a table using the multiFiles array.

multiPercent is a variable that stores the average percent of the files uploaded.Pass the variable in pl-progress-model attribute

pl-instance attribute is used to get the object of the plupload class.Pass the variable in this attribute to get a instance of the plupload object.

In this example Upload Files is a button which is used to upload all the files in the multiFiles array, when this button is clicked uploader.start() function is called to start uploading the files.(uploader is the object of plupload)

progress bar is shown by a directive provided by angular-ui.Refer it at http://angular-ui.github.io/bootstrap/

Passing Parameter to upload script

Upload Files

						<a class="btn btn-primary" pl-upload pl-multi-params-model="multiParams" pl-progress-model="paramsPercent">Upload Files</a>

						function MyCtrl1($scope){
	$scope.multiParams = {'path':'C:/Users/vaio/'};	
}

Pass an object with the key value and its data value in pl-multi-params-model.

This object is passed to the upload script and can be used in upload script. In this example passed data can be accesed from $_REQUEST['path'].

Events on upload

Upload Uploading...

					<a class="btn btn-primary" pl-upload on-file-added="loading=true" on-file-uploaded="loading=false">Upload</a>
					
Uploading...

A variable loading is set to true when the file is added to queue using the on-file-added attribute.

The variable loading is then set to false when the file gets uploaded.

So the variable loading is true while the file is uploading.

This is how the attributes on-file-added,on-file-uploaded etc can be used.

Directive Attributes

Attribute	Value	Explanation	Type	Default Value
pl-upload		Pass this Parameter to turn your button into pl-upload.
pl-auto-upload	true/false	Pass true or false as string to turn your button as auto upload or to pick files with your button.	String	true
pl-files-model	An empty array	Pass an empty array to store the files uploaded.An empty array must be defined to store the files.	Two way binding model
pl-progress-model	A variable	Pass a variable to store the percent of file uploaded.	Two way binding model
pl-instance	An object	Pass an object to get the instance of plupload class, you can now customize the uploader object the way you want.	Two way binding model
pl-url	A string	Pass the path of the upload script.	String	upload.php
pl-max-file-size	A string	Pass the max size of the file.	String	10mb
pl-flash-swf-url	A string	Pass the flash swf url.	String	lib/plupload/plupload.flash.swf
pl-silverlight-xap-url	A string	Pass the silverlight xap url.	String	lib/plupload/plupload.flash.silverlight.xap
pl-filters-model	An array	Pass an array with the title and extensions of files you want to upload	Two way binding model	[{title : "Image files", extensions : "jpg,jpeg,gif,png"}]
pl-multi-params-model	An object with its parameter and value.Example-{'path':'C:/Users/vaio/'}	Pass an object with the params and its value you want to send to the upload script	Two way binding model
id	A unique id	Pass a id to your button if u want it to be the browse button.If not passed the directive assigns a unique id to the button.	String	a random unique id.

Directive events

Attribute	Value	Explanation
on-file-added	An evaluated value.	Pass an evaluated value which will be applied once the file is added to queue.Example- <button pl-upload on-file-added='x=5'>Upload</button>
on-file-uploaded	An evaluated value.	Pass an evaluated value which will be applied once the file is uploaded.Example- <button pl-upload on-file-uploaded='uploaded()'>Upload</button>
on-file-progress	An evaluated value.	Pass an evaluated value which will be applied once the file is in uploading progress.Example- <button pl-upload on-file-progress='progress=true'>Upload</button>
on-file-error	An evaluated value.	Pass an evaluated value which will be applied if there is an error in uploading.Example- <button pl-upload on-file-error='error()'>Upload</button>