AngularJS＆Laravel：上传文件并抓取服务器

Question

I'm using the angular-file-upload directive, to upload a file to my server, via a POST request, however I'm getting confused.

I have my input box setup: <input type="file" ng-model="image['file']" ng-file-select="onFileSelect($file)" >

I assign the file to the $scope.upload on select:

$scope.onFileSelect = function($file) {

    $scope.upload = $file;
};

Now, when I press my "upload" button I want to send some data ($scope.image) to the server, but also my uploaded file so I can get it validated.

I created a Collection service for this, as follows:

    ...
    validateUpload : function( data, upload ) {
        return $http({
            method: 'POST',
            url: '/url/to/upload',
            headers: { 'Content-Type' : 'application/json' },
            data: data,
            file: upload
        });
    },
    ...

Okay, so now in my controller I can try to upload the data:

Collection.validateUpload( $scope.image, $scope.upload )
    .success(function(data) {
        console.log(data);
    });

In my Laravel Controller, I can access the $scope.image data quite easily:

return Input::all();

= Object {file: "C:\fakepath\myimage.png", title: "Title", source: "A Source"} 

However, I wish to access my file. According to the Laravel docs I should be able to access this with:

Input::file('file');

However, it doesn't seem to be grabbing anything at all. For example, running ->getSize() on this complains about trying to access something which isn't an object.

Anyone got any idea how I get that file?

EDIT: Seems after a bit more playing, when I console.log($file); when selected, its undefined, hm.

Answer 1

Try this:

$scope.onFileSelect = function($file) {
    $scope.upload = $file[0];
};