Full Stack Solutions
uploading

How to upload an image using Node js Angular Js and multer with image preview – 1


Upload an image using Node js Angular Js and multer

This article is about uploading a file through multer in Node JS.You can obviiously find the
documentation for multer & usage of the multer on Github.

Multer is a middleware for handling the multipart/form-data.Because of busboy it gives you maximum effieciency. busboy is streaming parser for HTML form data for node.js.It’s a node js module that’s used for parsing the HTML Form Data.

The Article is divided in two part Client and Server. Client is obviiously in Angular JS that is using the “ng-file-upload” and Server is in NODE JS that is using the module multer.

Article’s first part is in Angular.ngFileUpload can be easily injected in Angular Application.”ngf-select” is the attribute in the input type file and “ngf-max-size” is to validate the file size.

Errors can be displayed via “up.upload_form.file.$error.required” for empty submission and “up.upload_form.file.$error.maxSize” to display the errors regarding file size.

index.html

//index.html
<form  ng-controller="MyCtrl as up" name="up.upload_form">
                Single Image with validations
            <input 
                type="file" 
                ngf-select 
                ng-model="up.file" 
                name="file" 
                ngf-pattern="'image/*'"
                accept="image/*" 
                ngf-max-size="20MB" 
                />
            Image thumbnail: <img style="width:100px;" ng-show="!!up.file" ngf-thumbnail="up.file || '/thumb.jpg'"/>
            <i ng-show="up.upload_form.file.$error.required">*required</i><br>
            <i ng-show="up.upload_form.file.$error.maxSize">File too large 
            {{up.file.size / 1000000|number:1}}MB: max 20M</i>
           
           
            <button type="submit" ng-click="up.submit()">submit</button>
            <p>{{up.progress}}</p>
  </form>

controller.js

controller.js

// dependency injection of "ngFileUpload"

angular.module('fileUpload', ['ngFileUpload'])
.controller('MyCtrl',['Upload','$window',function(Upload,$window){
//Upload is a service that's used to upload a file
    var vm = this;
    vm.submit = function(){ //function to call on form submit
        if (vm.upload_form.file.$valid && vm.file) { //check if from is valid
            vm.upload(vm.file); //call upload function
        }
    }
    
    vm.upload = function (file) {
        Upload.upload({
            url: 'http://localhost:3000/upload', //webAPI exposed to upload the file
            data:{file:file} //pass file as data, should be user ng-model
        }).then(function (resp) { //upload function returns a promise
            if(resp.data.error_code === 0){ //validate success
                $window.alert('Success ' + resp.config.data.file.name + 'uploaded. Response: ');
            } else {
                $window.alert('an error occured');
            }
        }, function (resp) { //catch error
            console.log('Error status: ' + resp.status);
            $window.alert('Error status: ' + resp.status);
        }, function (evt) { 
            console.log(evt);
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
            vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
        });
    };
}]);

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular