AngularJS factory function undefined

Question

I've been looking over this problem for the past 3 hours now and I'm extremely confused. The apache2 error logs say that the php script is being run, however I'm getting a an error from my factory when it's called.

TypeError: InputUpload.uploadImage(...) is undefined

I don't see how the javascript even gets that far to run the php script when the firefox debugger says it isn't defined...

var app = angular.module("app", ["ui.bootstrap"]);

//http://stackoverflow.com/questions/18571001/file-upload-using-angularjs
app.factory("API", function ($http) {
    return {
    uploadImage: function (image) {
        $http.post('/js/upload_image.php', image);
    }
    }
});

app.controller("MainController", ['$scope', '$http', 'API', function($scope, $http, 'API') {
    $scope.imageUrl = "";

    $scope.template = "";

    $scope.templates = [];

    $scope.templates.push("select an option...");
    $scope.templates.push("MakeGray");
    $scope.templates.push("Canny");

    $scope.template = $scope.templates[0];

    $scope.add = function() {
    alert("HELLO");
    var f = document.getElementById('file').files[0];
    var r = new FileReader();
    r.onloadend = function(e) {
        var data = e.target.result;

        API.uploadImage(data)
        .success(function (imgUrl) {
            $scope.imageUrl = imgUrl;
        })
        .error (function (error) {
        });
    }

    r.readAsBinaryString(f);
    }
});

there shouldn't have ' in function parameter `'API'` .. remove `'` from `API` . that's may be typo right ? — Anik Islam Abhi, Dec 17 '15 at 08:54
are you using any lazy loading functionality in your angular? — Jeeva J, Dec 17 '15 at 08:55
The code I posted is all the angularJS I'm using in my website, I'm also using just the angularJS min file. — Zypps987, Dec 17 '15 at 08:58
do changes as `app.controller("MainController", ['$scope', '$http', 'API', function($scope, $http, API)` — vpsingh016, Dec 17 '15 at 08:58
Additionally, try using JsHint, and JsLint, because you `.js` file has errors — ssuperczynski, Dec 17 '15 at 09:03

score 2 · Answer 1 · answered Dec 17 '15 at 08:54

2

try this

    app.controller("MainController", ['$scope', '$http', 'InputUpload', 'API', function($scope, $http, API) {
//your code here..........

answered Dec 17 '15 at 08:54

Durgpal Singh

11,481
4
37
49

Adding return in app.factory removed the error message saying it was undefined. However there is a new problem that popped up and I'm not sure why... I'm trying to upload an image to my webserver and I followed http://stackoverflow.com/questions/18571001/file-upload-using-angularjs And it still isn't working... – Zypps987 Dec 17 '15 at 09:09
error in post request or in factory method? actually I am java developer and we use servlet for image saving. – Durgpal Singh Dec 17 '15 at 09:12

score 1 · Accepted Answer · answered Dec 17 '15 at 09:01

1

you need to return $http promise :

app.factory("API", function ($http) {
    return {
        uploadImage: function (image) {
           //add return her 
           return $http.post('/js/upload_image.php', image);
        }
    }
});

answered Dec 17 '15 at 09:01

AlainIb

4,544
4
38
64

That got rid of the undefined part but now I'm dealt with an even bigger problem xD Error: Argument 1 of FileReader.readAsBinaryString does not implement interface Blob. – Zypps987 Dec 17 '15 at 09:07
nvm I forgot to undo a stupid change before adding in what you suggested, error message is gone now, thanks! – Zypps987 Dec 17 '15 at 09:25

score 0 · Answer 3 · answered Dec 17 '15 at 09:08

0

Your problem is in controller injection.

In your controller replace it to

.controller("MainController", ['$scope', '$http', 'API', function($scope, $http, API) {

and the call your function API.uploadImage(img)

answered Dec 17 '15 at 09:08

Andrew

1,474
4
19
27

AngularJS factory function undefined

3 Answers3