Using plUpload with AngularJS

An angular directive wrapper for the cross browser upload script plUpload.

Install using Bower

$ bower install plupload-angular-directive

Download

.zip .tar.gz

Installation

  1. Install
    • Using bower
      $ bower install plupload-angular-directive
    • Or Download

  2. Include files (Note: This file contains plUpload script, you don't need to include plupload separately)
  3. Inject Module
    angular.module('myApp', ['plupload.directive']);
  4. Configure paths (optional using pluploadServiceProvider)
    angular.module('myApp', ['plupload.directive']). config(['plUploadServiceProvider', function(plUploadServiceProvider) { plUploadServiceProvider.setConfig('flashPath', 'bower_components/plupload-angular-directive/plupload.flash.swf'); plUploadServiceProvider.setConfig('silverLightPath', 'bower_components/plupload-angular-directive/plupload.silverlight.xap'); plUploadServiceProvider.setConfig('uploadPath', 'upload.php'); }])
  5. Use it with any button

Examples

Single File Upload

Upload Files
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/

Multiple File Upload

Pick Files
Upload
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/

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>
Fork me on GitHub