AngularJS File Upload, uploaded image is blank? - angularjs

Question

I'm using angular to upload file to parse.com rest api.
I follow this tutorial AngularJS Upload tutorialspoint and REST upload documentation here REST Upload
Then I modify my code. Here is my code looks like.
//below code inside RegisterController
$scope.upload = function () {
//upload file
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
console.log(file.name);
var uploadUrl = "http://128.199.249.233:1337/parse/files/"+file.name; //added file.name
fileUpload.uploadFileToUrl(file, uploadUrl);
//end upload file
}
//above code inside RegisterController
//below code outside any controller
rentalkika.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
rentalkika.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {
'X-Parse-Application-Id': 'secret', //added this
'Content-Type': undefined
}
})
.success(function(response){
console.log(response);
})
.error(function(){
});
}
}]);
//above code outside any controller
Here is my HTML
<form ng-controller="RegisterController">
<label>Upload file</label>
<input type="file" name="ktp" file-model="myFile">
<label class="checkbox">
<input type="checkbox">Get hot offers via e-mail
</label>
<input type="submit" value="Sign up" class="btn btn-primary">
<input type="button" value="Upload" ng-click="upload()" class="btn btn-primary">
</form>
It successfully upload file indicated with 201 created status code and I get success response including name and image url.
The image looks like this blank image
Is something missing or wrong with my code?

Answer 1

It's happen because your binary data of image not sent.
Then I use this https://github.com/danialfarid/ng-file-upload and little bit configuration for headers.
And it works.