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.
Try this:
$scope.onFileSelect = function($file) {
$scope.upload = $file[0];
};
i am doing this if it helps
view.blade.php
<div ng-controller="fupController">
<input type="file" id="file1" name="file" multiple
ng-files="getTheFiles($files)" />
<input type="button" ng-click="uploadFiles()" value="Upload" />
</div>
angular controller
app.directive('ngFiles', ['$parse', function ($parse) {
function fn_link(scope, element, attrs) {
var onChange = $parse(attrs.ngFiles);
element.on('change', function (event) {
onChange(scope, { $files: event.target.files });
});
};
return {
link: fn_link
}
} ]);
app.controller('fupController', function ($scope, $http , API_URL) {
var formdata = new FormData();
$scope.getTheFiles = function ($files) {
angular.forEach($files, function (value, key) {
formdata.append(key, value);
});
};
//alert(formdata);
// NOW UPLOAD THE FILES.
$scope.uploadFiles = function () {
var request = {
method: 'POST',
url: API_URL + 'uploadEntry',
data: formdata,
headers: {
'Content-Type': undefined
}
};
// SEND THE FILES.
$http(request)
.success(function (d) {
//alert(d);
})
.error(function () {
});
}
});
API Route for laravel 5.3
Route::post('fileupload', 'userController@fileupload');
controller
public function uploadEntry(Request $request){
//laravel form submission
/*
if($request->hasFile('uploadedFile')){
$files = $request->file('uploadedFile');
foreach ($files as $file) {
$fileName = rand(11111,99999).'.jpg';
$file->move( 'uploads' , $fileName);
}
} */
//angular API submission
$file = 0;
while (Input::file($file)->isValid()) {
$destinationPath = 'uploads'; // upload path
$fileName = rand(11111,99999).'.jpg'; // renameing image
Input::file($file)->move($destinationPath, $fileName); // uploading file to given path
$file++;
}
}
follow this to upload multiple images