How to integrate AngularJS Upload File and ServiceStack

Question

Can anybody help me to integrate ServiceStack with this AngularJS Upload File ?

https://github.com/tamtakoe/oi.file

I don't know where to start! Post(Stream file) ?

Thanks!

Answer 1

You have to use https://stackoverflow.com/a/17504429/261560 for AngularJs side of it. For servicestack implementation, simply create a request DTO with single field like public Byte[] postData { get;set;} and write a post implementation of the service to save your file.

see https://stackoverflow.com/a/16476661/261560 for uploading files with servicestack

Answer 2

for example look at the following scenario, saving a profile picture for a user in the system: SS side:

 public string Post(ProfilePictureRequest profilePictureRequest) // your request DTO
        {
            var user = _userRepository.GetByEmail(this.GetSession().Email);
            foreach (var uploadedFile in RequestContext.Files)
            {
                using (var fileStream = new MemoryStream())
                {
                  // save changes to your database
                  // save file to disk       

                }
            return user.ProfilePicture;
        }

Client side in angularjs inside your controller

$scope.changeProfilePicture = function ($data) {
  // some success messsage to the user
 };

$scope.onFileSelect = function ($files) {
        //$files: an array of files selected, each file has name, size, and type.
        for (var i = 0; i < $files.length; i++) {
            var $file = $files[i];
            $http.uploadFile({
                url: '/yourServiceStackUrl', 
                // headers: {'optional', 'value'}
                //data: { myObj: $scope.myModelObj },
                file: $file
                }).progress(function (evt) {
                    $scope.previewLoading = true;
                    console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                }).success(function (dataImg, status, headers, config) {
                    // file is uploaded successfully
                    $rootScope.user.ProfilePicture = dataImg;

                   // to fix IE not updating the dom
                    if (!$scope.$$phase) {
                        $scope.$apply();
                    }

            });
        }
    };

in your view you need to call your directive:

<input type="file" id="changeImage" data-upload-file="/pathToSaveThePicture" data-upload-success="changeProfilePicture($data)" class="file" />

the directive code:

directive.uploadFile = function ($rootScope, $parse, $log) {
    function handleError(json) {
        var data = angular.fromJson(json);
        if (data.ResponseStatus) {
            $rootScope.notification.errors = [];
            $rootScope.notification.visible = true;
            $rootScope.notification.listdisplay = false;
            if (data.ResponseStatus.Errors != null && data.ResponseStatus.Errors.length > 0) {
              // log errors
             } 

        }
    }

    return {
        restrict: "A",
        scope: {
            callback: "&uploadSuccess"
        },
        link: function (scope, element, attribute) {

                element.bind("change", function (event) {
                var files = event.target.files;
                for (var i = 0, length = files.length; i < length; i++) {
                    var data = new FormData();
                    var xhr = new XMLHttpRequest();
                    data.append('file', files[i], files[i].name);
                    xhr.open('POST', attribute.mseUploadFile);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var result = xhr.responseText;

                            if (scope.callback) {
                                scope.$apply(function () {
                                    scope.callback({ $data: result });
                                });
                            }

                        }
                        else if (xhr.readyState == 4 && xhr.status == 400) {
                            scope.$apply(function () {
                                // handle xhr error
                            });

                        }
                    };
                    xhr.send(data);
                }
            });
        }
    };
};

the otehr option is to search for a upload file directive there are some in github, so that depends on the needs you have.

my two cents