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)
