AngularJS sending file to Google Blobstore - Blob Key retrieved as 'null' - angularjs

Question

I want to send a video file to GAE Blobstore using AngularJS, following are the code snippet.
I am getting the upload url through endpoint API call and using it in Form action field and http POST call.
When the BlobKey was retrieved it was always returned as null. The admin console has entry for the item in 'BlobUploadSession', but I could not verify whether the video file was uploaded.
How to identify whats going wrong when the BlobKey was retrieved?
HTML:
<form name="videoForm" action="{{uploadUrl}}" ng-init="init()" novalidate role="form">
<div class="form-group">
<label for="title">Video Title</label>
<input id="title" type="text" name="title" ng-model="video.title"
class="form-control"/>
</div>
<div class="form-group">
<label for="videoFile">File Path</label>
<input id="videoFile" type="file" name="videoFile" class="form-control"
onchange="angular.element(this).scope().setFile(this)"/>
</div>
<button ng-click="addVideo(videoForm)" class="btn btn-primary">Video Add
</button>
</form>
JS:
videoApp.controllers.controller('videoAddCtrl',
function ($scope, $log, $http, oauth2Provider, HTTP_ERRORS) {
$scope.video = $scope.video || {};
$scope.init = function () {
gapi.client.video.getUploadUrl().
execute(function (resp) {
$scope.$apply(function () {
if (resp.error) {
if (resp.code && resp.code == HTTP_ERRORS.UNAUTHORIZED) {
oauth2Provider.showLoginModal();
return;
}
} else {
console.log(resp.result.uploadUrl);
$scope.uploadUrl = resp.result.uploadUrl;
}
});
});
};
$scope.submit = function () {
console.log($scope.files);
console.log($scope.uploadUrl);
return $http({
method: 'POST',
url: $scope.uploadUrl,
headers: { 'Content-Type': undefined },
data: {
file: $scope.files,
},
transformRequest: function(data) {
var formData = new FormData();
angular.forEach(data, function(value, key) {
formData.append(key, value);
});
return formData;
}
}).success(function(data) {
console.log("video " + $scope.video.title + " Successfully Uploaded");
}).error(function(data){
console.log(data);
});
};
$scope.addVideo = function (videoForm) {
console.log($scope.video.title);
$scope.submit(videoForm);
};
$scope.setFile = function(element) {
$scope.$apply(function($scope) {
$scope.files = element.files;
console.log($scope.files);
});
}
});
Java Servlet:
public class UploadVideo extends HttpServlet {
private static final Logger Log = Logger.getLogger(UploadVideo.class.getName());
private BlobstoreService blobstoreService =
BlobstoreServiceFactory.getBlobstoreService();
#Override
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
Log.info("+Enter");
Map<String, List<BlobKey>> blobs = blobstoreService.getUploads(req);
List<BlobKey> blobKeys = blobs.get("videoFile");
Log.info("Blob Key: " + blobKeys);
if (blobKeys == null || blobKeys.isEmpty()) {
Log.info("Blob is null or empty");
res.sendRedirect("/");
} else {
Log.info("Serve blob");
res.sendRedirect("/serve?blob-key=" + blobKeys.get(0).getKeyString());
}
Log.info("-Exit");
}
}