AngularJS Live Example

by maxisam

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.2/angular.js"></script>
<script type="text/javascript" src="http://demo.nucleuspm.com/test/plupload/plupload.full.js"></script>
<div ng:app>
 <div name="myForm" ng-controller="Ctrl">
         <input ng-model="test" type="text" />{{test}}<div id="container" class="controls">
         <div>{{filesToUpload[0].name}}</div>
        <div id="filelist">
            <div ng-repeat="file in filesToUpload">{{file.name}} ({{file.size}}) <b>{{file.percent}}</b></div>
        </div>
        <br />
        <a id="pickfiles" href="#">[Select files]</a>
        </div>
    </div></div>

JavaScript

function Ctrl($scope) {
    $scope.test = '';
    $scope.filesToUpload = [{id: 1, name: 'test', size: '123kb'}];

    $scope.addItem = function(object) {
        $scope.filesToUpload.push(object);
    }

    $scope.uploader = new plupload.Uploader({
        runtimes : 'html5,flash,browserplus,gears',
        browse_button : 'pickfiles',
        container : 'container',
        max_file_size : '10mb',
        url : 'upload.php',
        flash_swf_url : '/plupload/js/plupload.flash.swf'
    });

    $scope.uploader.init();

    $scope.uploader.bind('FilesAdded', function(up, files) {
    
        $scope.filesToUpload = [];
        $.each(files, function(i, file) {
            $scope.addItem({
                id: file.id,
                name: file.name,
                size: plupload.formatSize(file.size)
            });
           
        });

        console.log($scope.filesToUpload);       
        up.refresh(); // Reposition Flash/Silverlight
    });
}