How to upload image with Angular and Node EASY WAY - Ybus
5025
post-template-default,single,single-post,postid-5025,single-format-standard,ajax_fade,page_not_loaded,,side_area_uncovered_from_content,qode-child-theme-ver-1.0.0,qode-theme-ver-10.0,wpb-js-composer js-comp-ver-4.12,vc_responsive

How to upload image with Angular and Node EASY WAY

How to upload image with Angular and Node EASY WAY

Captura de Tela 2015-06-08 às 21.35.56
It took me a while to figure this out, but my professor Vivek Sharma helped to complete this.

For the Node part, I used Multer. This example by Shahid Shaikh  below from is great for it.

File uploads using Node.js

Ok, now change the name of the function “/api/photo” to “upload/url” because the next step is going to call this function.

NEXT STEP: For the Angular part, I used:

https://www.npmjs.com/package/ng-file-upload

My html button is just:

<div class=”button btn btn-default” ngf-select ng-model=”files” ngf-multiple=”multiple”>Select File</div>

All you need is this:

var app = angular.module(‘fileUpload’, [‘ngFileUpload’]);app.controller(‘MyCtrl’, [‘$scope’, ‘Upload’, function ($scope, Upload) {
$scope.$watch(‘files’, function () {
$scope.upload($scope.files);
});$scope.upload = function (files) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
Upload.upload({
url: ‘upload/url’,
fields: {‘username’: $scope.username},
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);
});
}
}
};
}]);