AngularJS return a value from service

Question

I followed this tutorial to image upload for ionic app.

https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

It works but I have one issue: in the file upload, I am returning the new filename from the server. I have to save it to a variable in the controller. I can't save the value from services to controller.

Here is my controller, services and views

Directive & Service

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

.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(data){
            alert(data);
        })
        .error(function(){
        });
    }
}])

Controller

.controller('MyCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
    $scope.uploadBtn1 = false;
    $scope.uploadSpin1 = true;
    $scope.uploadFile = function(){
        var file = $scope.myFile;
        $scope.uploadBtn1 = true;
        $scope.uploadSpin1 = false;
        console.log('file is ' + JSON.stringify(file));
        var uploadUrl = "http://example.com/app/upload.php";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };

}]);

HTML

<input type="file" file-model="myFile"/>
<button type="button" ng-click="uploadFile()" 
        ng-hide="uploadBtn1" class="ng-hide">upload me</button>
<ion-spinner icon="ios-small" ng-hide="uploadSpin1" class="ng-hide"></ion-spinner>

I also added the loading spinner when the upload starts and I want to hide it when the upload ends.

Thanks

trees_are_great · Accepted Answer · 2015-05-08 13:39:34Z

1

I have made a few changes to the example in question. The service is now implemented as a factory which returns a promise.

You can then wait in your controller for the promise to return and then handle the data in your controller.

codepen example

var uploadFile = fileUpload.uploadFileToUrl(file, uploadUrl);

uploadFile.error(function(data){
    alert('data returned - handle me', data);
});

In my example, I have changed the returned data to a string and passed this back to the controller which then alerts the user of this data.

answered May 8, 2015 at 13:39

trees_are_great

3,9113 gold badges34 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Soundhar Raj Over a year ago

thanks for the reply. i have to replace the uploadFile.error to success?

trees_are_great Over a year ago

yes, exactly, you will want to chain a .success and a .error together to match how it is done in the service.

trees_are_great Over a year ago

Notice also, the changes to the service (now created using factory), which now returns the promise returned by $http

Soundhar Raj Over a year ago

Thank yo so much. and i'm just beginner to AngularJS. Can you please suggest some tutorial or give me tips please.

trees_are_great Over a year ago

My pleasure. Sure, I use PluralSight.com - it usually costs, but they do a free trial. The following courses on here are great: > getting started with AngularJs (so I'm told) > AngularJs Fundamentals (some parts slightly dated) > AngularJs Directives Fundamentals (very helpful - I use this a info a lot)

|

Collectives™ on Stack Overflow

AngularJS return a value from service

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related