Angular JS Express JS File Upload throwing error, undefined is not a function

Question

This is the error I'm getting on the console

TypeError: undefined is not a function
    at C:\nodefiles\new\server.js:101:16
    at Layer.handle [as handle_request] (C:\nodefiles\new\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\nodefiles\new\node_modules\express\lib\router\route.js:131:13)
    at done (C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:36:7)
    at indicateDone (C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:40:51)
    at C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:142:11
    at WriteStream.<anonymous> (C:\nodefiles\new\node_modules\multer\storage\disk.js:43:9)
    at WriteStream.emit (events.js:129:20)
    at finishMaybe (_stream_writable.js:484:14)
    at afterWrite (_stream_writable.js:362:3)
    at onwrite (_stream_writable.js:352:7)
    at WritableState.onwrite (_stream_writable.js:105:5)
    at fs.js:1799:5
    at FSReqWrap.strWrapper (fs.js:568:5)

This is my HTML page

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <style>

        .thumb {
            width: 24px;
            height: 24px;
            float: none;
            position: relative;
            top: 7px;
        }

        form .progress {
            line-height: 15px;
        }


        .progress {
            display: inline-block;
            width: 100px;
            border: 3px groove #CCC;
        }

        .progress div {
            font-size: smaller;
            background: orange;
            width: 0;
        }
    </style>
</head>
<body ng-app="fileUpload" ng-controller="MyCtrl">
<h4>Upload on file select</h4>
<button ngf-select="uploadFiles($files)" multiple
        accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
    Select Files</button>
<br><br>
Files:
<ul>
    <li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}
      <span class="progress" ng-show="f.progress >= 0">
        <div style="width:{{f.progress}}%"
             ng-bind="f.progress + '%'"></div>
      </span>
    </li>
</ul>
{{errorMsg}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="controller3.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
</body>


</html>

This is my controller

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.uploadFiles = function(files) {
        $scope.files = files;
        angular.forEach(files, function(file) {
            if (file && !file.$error) {
                file.upload = Upload.upload({
                    url: '/api/data',
                    file: file
                });

                file.upload.then(function (response) {
                    $timeout(function () {
                        file.result = response.data;
                    });
                }, function (response) {
                    if (response.status > 0)
                        $scope.errorMsg = response.status + ': ' + response.data;
                });

                file.upload.progress(function (evt) {
                    file.progress = Math.min(100, parseInt(100.0 *
                        evt.loaded / evt.total));
                });
            }
        });
    }
}]);

This is my code on the server side

var multer = require('multer');
var upload = multer({
    dest: __dirname + '/public',
});

app.post('/api/data', upload.single('file'), function (req, res, next) {
    console.log("We are here fellas");
    return res.ok();
});

The problem I think is because of that single thing mentioned in the end where I have written the code at the backend. I am following several tutorials because I am new to this subject.

I am following the github of Danial Farid, he made that nf-fileupload thing.

Please help me how to resolve this error.

Sorry if I sound stupid, I am new to this.

I don't know if this is necessary but this is the error I get on my front end after selecting the files (In Google Chrome Developer Console)

angular.js:10661 POST http://localhost:1339/api/data 500 (Internal Server Error)

return res.ok(); this was there now I have commented it and the code is working properly. Thanks you everyone. — Gandalf the White
– Gandalf the White, Commented Sep 17, 2015 at 9:09

taxicala · Accepted Answer · 2015-09-16 21:35:51Z

1

The following line is wrong:

return res.ok();

Thats not an expressjs or nodejs function of the response object. Should be something like:

res.status(200).send('OK');

answered Sep 16, 2015 at 21:35

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

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

1 Comment

taxicala Over a year ago

No problem. glad to help.

Collectives™ on Stack Overflow

Angular JS Express JS File Upload throwing error, undefined is not a function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related