AngularJS: File drop/upload

http://angularjs.org/

by niden

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc10.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div ng-controller="Upload">
 
<div id="Dropbox">Drophere</div>

<table>
    <tr>
        <td>Name</td>
        <td>Type</td>
        <td>Size</td>
        <td>Last Modified</td>
    </tr>
    <tr ng-repeat="file in files">
        <td><input type="text" ng-model="file.name">{{file.name}}</td>
        <td>{{file.type}}</td>
        <td>{{file.size}} kB</td>
        <td>{{file.lastModifiedDate}}</td>
    </tr>
</table>
    
<br>
But when dropping files I can not change the name

    <button ng-click="uploadFiles()">Upload files</button>
    
</div>

CSS

#Dropbox{
    padding:60px;
    border:1px solid #666;
    margin-bottom:20px;
}
#Dropbox.dragenter{
    background-color:#ffc;
}

JavaScript

var myApp = angular.module('myApp',[]);

function Upload($scope){

    
    
    $scope.files = [{name:"this can change"}];

    var dropbox = $("#Dropbox").get(0);
    dropbox.addEventListener("dragenter",function(){$(this).addClass("dragenter");},false);
    dropbox.addEventListener("dragleave",function(){$(this).removeClass("dragenter");},false);
    dropbox.addEventListener("dragover",function(e){e.preventDefault();}, false);
    
    dropbox.addEventListener("drop",function(e){
        e.stopPropagation();
        
        
        var self = $(this);
        self.removeClass("dragenter");
        self.addClass("dropped");
        
        var files = e.dataTransfer.files;
        
        if(files.length > 0){
            $scope.$apply(function(){
                for(var i = 0; i < files.length; i++){
                    $scope.files.push( files[i] );
                }
            })
        }
        
    },false);
    
    $scope.uploadFiles = function(){
    
        console.log($scope.files);
    
        var fd = new FormData();
        for(var i in $scope.files) {
            
            fd.append(i, $scope.files[i]);
        }

        var xhr = new XMLHttpRequest();
        //xhr.upload.addEventListener("progress", uploadProgress, false);
        //xhr.addEventListener("load", uploadComplete, false);
        //xhr.addEventListener("error", uploadFailed, false);
        //xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "server/upload_img.php");
        xhr.send(fd);
        
        
    }
    
    
}