Skip to content

Instantly share code, notes, and snippets.

@aksakalli

aksakalli/_example_ng-file-upload.md

Last active October 28, 2018 09:51
Show Gist options
  • Save aksakalli/1a56072f066d65248885 to your computer and use it in GitHub Desktop.
Save aksakalli/1a56072f066d65248885 to your computer and use it in GitHub Desktop.
Download ZIP
ng-file-upload example with NodeJS
Raw
_example_ng-file-upload.md

ng-file-upload example with NodeJS

index.html should be in public folder in the same directory with app.js.

Raw
app.js
var express = require('express'),
path = require('path'),
multiparty = require('connect-multiparty'),
multipartyMiddleware = multiparty(),
PORT = process.env.PORT || 27372;
var app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.post('/api/upload', multipartyMiddleware, function(req, res) {
var file = req.files.file;
console.log(file.name);
console.log(file.type);
console.log(file.path);
});
var server = app.listen(PORT, function() {
var host = server.address().address;
var port = server.address().port;
console.log('the App listening at http://%s:%s', host, port);
});
Raw
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Upload example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<div class="container">
<div>
<h1>Upload example</h1>
<hr />
<div ng-app="fileUpload" ng-controller="MyCtrl">
<button type="button" class="btn btn-default" ngf-select ng-model="file">Upload using model $watch</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="http://rawgit.com/danialfarid/ng-file-upload/master/dist/ng-file-upload.min.js"></script>
<script>
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', function($scope, Upload) {
$scope.$watch('file', function() {
var file = $scope.file;
if (!file) {
return;
}
Upload.upload({
url: 'api/upload',
file: file
}).progress(function(evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
}).success(function(data, status, headers, config) {
console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
}).error(function(data, status, headers, config) {
console.log('error status: ' + status);
})
});;
}]);
</script>
</body>
</html>
@JSONRice
Copy link

JSONRice commented Jun 14, 2017 •
edited
Loading

Your API REST POST is misleading. It's not actually posting anything. Something like the following should work but I haven't tested this yet:

  fs.writeFile(file.path, file, function (err) {
    if (err) {
      return console.warn(err);
    }
    console.log("The file: " + file.name + " was saved to " + file.path);
  });

@DrMMu
Copy link

DrMMu commented Dec 3, 2017 •
edited
Loading

At the time of this writing, connect-multiparty automatically saves the file to a temporary location (with a random filename).
So if you upload dummy.jpg, the console shows the following lines:

dummy.jpg
image/jpeg
/temp/path/7CcSPhgUnROASPVgCoZ-wZnW.jpg

-- and the uploaded file has indeed been copied to /temp/path/7CcSPhgUnROASPVgCoZ-wZnW.jpg.

As mentioned in the short connect-multiparty documentation, you have to take care yourself to delete those temporary files when they are no longer needed.

Another thing: The server accepts the file, but never answers (so the script in index.html always runs into the .error part). I added

res.send(file.name + ' uploaded.');

after the third console.log in app.post.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment