AngularJS with Blobstore - Blob Key retrieved as 'null'

[setv tech]

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");
    }
}

[Patrice (Cloud Platform Support)]

Hi!

While this is a very interesting question, it would probably be better in Stack Overflow. Asking questions about the Google Cloud Platform, you have three venues available to you:

1- Issue Tracker: Should be used to either send feature requests to us, or to draw our attention on a defect.

2- StackOverflow: To ask technical, how-to questions. Always make sure to read their help center and ask on topic questions.

3- GoogleGroups: To ask questions that, while still technical, are not on topic for Stack Overflow (so "which book should I read to start using this platform" or "I'm using this method, what is the expected speed when compared to "that method""). You can also come here to develop Feature Requests before sending them to the Issue tracker.

With that in mind, your question seems to fall more under the second one. So I would definitely ask something like this on Stack. Be aware that the same people who monitor this group also monitor and answer on Stack, so you have the same people answering there, with the added benefit of the huge community behind Stack Overflow.

Cheers!

...