AngularJs File uploading using Ajax, NodeJs rest Api and file-upload Java-Script file

AngularJs Ajax NodeJs API Java-Script

By Code solution
Jan 20th, 2021
0 comments
0

AngularJS is a very powerful JavaScript FrameworkFile uploading using Ajax, NodeJs rest Api and file-upload Java-Script file.

Setup

Project Structure

Project Name                          // Project directory

   - node_modules                     // Npm Package

   -  package-lock.json.              // package-lock.json

   -  package.json                    // package.json

   -  server.js                       // server.js file

   -  Public                          // Html View and Angualrjs file

        - index.html                  // will hold the main template for our app

        - app.js                      // our angular code

        - angular-ui-router.min.js    // angular-ui-router.min JS

        - angular.min.js              // angularjs File

        - ng-file-upload-shim.min.js  // ng-file-upload-shim.min JS

        - ng-file-upload.min.js       // ng-file-upload.min File

        - services.js                 // Services JS File

           - pages                       // view directory

              - header.html             // about page code 

               - home.html               // home page code

              - about.html              // about page code

              - contact.html            //  about page code

Create Index.html and add code

<!DOCTYPE html>

<html>

<head>

<title>File Upload</title>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">

<style type="text/css">

.container{

padding: 0px;

width: 100%;

}

</style>

<script type="text/javascript" src="angularjs/angular.min.js""></script>

<script type="text/javascript" src="angularjs/angular-ui-router.min.js"></script> 

<script src="angularjs/ng-file-upload-shim.min.js"></script>

 <script src="angularjs/ng-file-upload.min.js"></script>

<script src="js/app.js"></script>

<script src="angularjs/services.js"></script>

<script src="js/controllers/home.js"></script>

<script src="js/controllers/about.js"></script>

<script src="js/controllers/contact.js"></script>

</head>

<body ng-app="UiRouting">

    <div ui-view></div>

</body>

</html>

Create app.js and add code

var app = angular.module('UiRouting', ['ui.router', 'ngFileUpload', 'APIModule', 'home.controllers', 'About.controllers', 'Contact.controllers']);

app.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/header/home');

    $stateProvider

  .state('header', {

    url: '/header',

    abstract: true,

    templateUrl: 'pages/header.html'

    })

.state('header.home', {

    url: '/home',

    views: {

      'container': {

        templateUrl: 'pages/home.html',

        controller: 'HomeCtrl'

      }

    }

})

.state('header.about', {

    url: '/about',

    views: {

      'container': {

        templateUrl: 'pages/about.html',

        controller: 'AboutCtrl'

      }

    }

})

.state('header.contact', {

    url: '/contact',

    views: {

      'container': {

        templateUrl: 'pages/contact.html',

        controller: 'ContactCtrl'

      }

    }

});

});

Create Home.html and add code

<form>

  <div class="form-group">

    <label for="exampleFormControlFile1">Multipal file Upload Examples</label>

    <input type="file" class="form-control-file" ype="file" ngf-select="multipalupload($files)"  accept="image/*" multiple>

  </div>

</form>

<div class="container" ng-repeat="imagedata in ImagePath track by $index">

<img src="http://localhost:9000/{{imagedata}}" class="rounded mx-auto d-block" style="width: 100%;padding: 20px">

</div>

<form>

  <div class="form-group">

    <label for="exampleFormControlFile1">Single file Upload Examples</label>

    <input type="file" class="form-control-file" ype="file" ngf-select="uploadPhoto($files)"   accept="image/*">

  </div>

</form>

<div class="container" ng-if="image">

<img src="http://localhost:9000/{{image}}" class="rounded mx-auto d-block"  style="width: 100%">

</div>

Create home.js and add code

angular.module('home.controllers', [])

.controller('HomeCtrl', function($scope, APIService, Upload) {

  $scope.ImagePath = [];

    $scope.multipalupload = function(file) {

        file.upload = Upload.upload({

            url:  'http://localhost:9000/api/uploadPhotos',

            arrayKey: '',

            data: {

                file: file

            }

        });


        file.upload.then(function(response) {

            console.log(response);

            if (response.data) {

                angular.forEach(response.data, function(item) {

                console.log(item);

                    $scope.ImagePath.push(item.path);

                    console.log($scope.ImagePath);

                });

            }

        }, function(response) {

            if (response.status > 0)

                $scope.errorMsg = response.status + ': ' + response.data;

        }, function(evt) {

            // Math.min is to fix IE which reports 200% sometimes

            file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));

        });

    };

    $scope.image = '';

    $scope.uploadPhoto = function(file) {

        file.upload = Upload.upload({

            url:  'http://localhost:9000/api/uploadPhoto',

            data: {

                file: file[0]

            }

        });


        file.upload.then(function(response) {

            console.log(response);

            $scope.image = response.data.path;

        }, function(response) {

            if (response.status > 0)

                $scope.errorMsg = response.status + ': ' + response.data;

        }, function(evt) {

            // Math.min is to fix IE which reports 200% sometimes

            file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));

        });

    };

})

Create Other HTML pages and JS file like home about contact etc..

Github Link :

https://github.com/Sudarshan101/FileuploadNodejsAngularjs

See demo :

https://www.youtube.com/watch?v=yQ_iYzFqg9A

Thank you :)

About the author

Code solution

info@codesolution.co.in

Discussion

0 comments

Add comment To Login

Add comment