Using ng-file-upload, I am attempting to upload a single file to my server.
After selecting the file and passing the file object ($scope.myFiles[0]) to my angular service, I noticed that when inspecting the HTTP request in the developer tools, the file object appears to be empty.
Controller:
UploadService.upload( { data: { file: $scope.myFiles[0], 'category': $scope.selectedCategory}})
.success(function (data) {
////
////
UploadService:
app.factory('UploadService', function ($http, $q) {
return {
upload: function (something) {
console.log(something);
return $http({
method: 'POST',
url: '/upload',
data: something
});
}
}
});
Upon inspecting the HTTP requests in the developer tools, this is what I see:
Request Payload:
{data: {file: {}, category: "Friend Card"}}
data:
{file: {}, category: "Friend Card"}
category:"Friend Card"
file:{}
By checking the output of console.log(something), I can confirm that the file information is available:
{
$hashKey:"object:107"
lastModified:1465716430000
lastModifiedDate:Sun Jun 12 2016 08:27:10 GMT+0100 (BST)
name:"Postcard.JPG"
size:522622
type:"image/jpeg"
webkitRelativePath:""
}
I made adjustments to the function to include a header type as follows:
return $http({
method: 'POST',
url: '/upload',
headers: {
'Content-Type': something.data.file.type
},
data: {
"file": something.data.file,
"category": something.data.category
}
});
Upon inspecting the developer tools, I noticed:
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:48
Content-Type:image/jpeg
Cookie:_ga=GA1.1.2023678669.1463291637; _gat=1
Host:localhost:8585
Origin:http://localhost:8585
Referer:http://localhost:8585/pages/
Even with the correct Content-Type specified as image/jpeg, the file object is still empty.