File uploading with angular and angular-file-upload

Question

I'm using angular and this plugin to upload files. It basically starts processing on file upload but I'm tying to start on form submission.

I tried this :

HTML

<form>
   <input type="file" ng-file-select="onFileSelect($files)">
   <input type="submit" ng-click="sendMail()" value="send">
</form>

JS

app.controller('mail', function ($scope, $http, $upload) {

    $scope.onFileSelect = function($files) {
        $scope.files = angular.copy($files);
        console.log($scope.files); // Returns my object (size, type, name...)
    }

    $scope.sendMail = function() {
    var file = myFile;
    console.log(file);             // Still returns my object
        $scope.upload = $upload.upload({
        url: 'server/mail.php',
        data: { 
            // stuff 
        },
        file: file,                // Returns : Error: does not implement Blob
        }).success(function(data, status, headers, config) {
            console.log(data);
        });
    }

})

I tried to make a global variable like myFile = $scope.files; in the first function. Then calling it in the second like so : var file = myFile; . Console log returns the same object but I get the following error :

Error: Argument 2 of FormData.append does not implement interface Blob.

Thanks for any tip.

Answer 1

Okay, so someone give me the answer.

In my case, angular.copy() changes the variable from File to Object . So I simply had to remove it.

Hop it can help.

Answer 2

If you still want to use angular.copy(), there is work around for this issue. I have tried this and this works.

When you are trying to deep copy an array of Files, Instead of using angular.copy(), concat that array with blank array('[]') and assign the result in a new array.

So, replace the line $scope.files = angular.copy($files); with below line:

$scope.files = ($files || []).concat([]);

This should do the magic of copy() method.