I want to send a video file to GAE Blobstore using AngularJS following are
the code snippets.
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");
}}
--
You received this message because you are subscribed to the Google Groups
"Google App Engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-appengine.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-appengine/f43aed5d-d9a6-4424-9e57-3a2f2fb51839%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
