File Upload (with progress) from Angular App

Clients JavaScript
1

I need to call a ServiceStack service from an HTML/CSS/Javascript app (leveraging Angular) and POST a Request DTO while uploading a file at the same time (similar to what is achieved by PostFileWithRequest in the C# client). While the upload is busy I need to report back to the UI using a progress bar. Is there an example of this that I can follow somewhere?

2

Hi @RyanBritton,

I’ve created a quick demo of something similar to what I think you’re trying to achieve.

Basically I am using a normal service posting a file via JS (using AngularJS $http service) and letting another library display the progress.

The following method is bound to the ng-click of the upload.

$scope.uploadFile = function () {
                var file = $scope.myFile;
                console.log('file is ' + JSON.stringify(file));
                var uploadUrl = "/myfileupload?FirstName=Test&LastName=McTest";
                fileUpload.uploadFileToUrl(file, uploadUrl);
            };

A simple directive is being used to bind the file selected by the user on change and a service to wrap the $http post.

app.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]);
                });
            });
        }
    };
}]);

app.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: { 'Content-Type': undefined }
        })
        .success(function () {
        })
        .error(function () {
        });
    }
}]);

The values on the DTO I’m populating by querystring and using them in the saved file name as an example.

If you don’t want to use the angular-loading-bar library like I have you could handle the JS XHR request yourself and hook into the progress callback, eg xhrrequest.upload.onprogress. The lvlFileUpload library might be a good one to look at.

Hope that helps.

3

Thanks @layoric, I’ll give it a bash and see if I come right. I’ve been playing with the angular-file-upload library since posting…I managed to get the file upload working, and the progress feedback, but I cannot seem to deserialise the message DTO from the form collection (although I can see the JSON is there in Fiddler).

Let me see if I have more luck with your approach…

4

Hi Ryan, did you find out how to manage the file upload using angular-file-upload?
I can’t understand how to get the progress feedback…
I think my client side is correct but I don’t know how to handle it on the ServiceStack side.
I was wondering if you could post your server side solution, please… if it’s not too much trouble!

Thank you very much!