AngularJS Material Form Image Upload Using ng-file-upload Library in Browser Full Project For Beginners

 

Welcome folks today in this blog post we will be uploading image in angular 9 in material form using ng-file-upload library in browser. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to install the below library using the npm command as shown below

 

 

npm i ng-file-upload

 

 

And now make a index.html file and copy paste the below code

 

 

index.html

 

 

<html lang="en" ng-app="StarterApp">
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
  </head>
  <body layout="column" ng-controller="AppCtrl">
  
<md-content id="mainContent" flex>
  <div layout="row" layout-align="center center" layout-margin>
  <md-card class="md-whiteframe-z2" flex="66" ng-if="admin.successMessage">
    <md-card-content>
      <div class="alert alert-success">
        {{ admin.successMessage }} 
        <a ui-sref="actor({name:admin.newActorPageUrl, id:admin.newActorPageId})">View it now!</a>
      </div>
    </md-card-content>
  </md-card>
</div>
<div layout="row" layout-align="center center" layout-margin class="ng-cloak">
<md-card class="md-whiteframe-z2" flex="66">
  <md-card-content>
  <h2>Page Creation</h2>
    <form name="createActorPageForm" ng-submit="admin.createActorPage()" novalidate>
        <md-input-container>
            <label for="firstname">firstname</label>
            <input id="firstname" label="firstname" name="firstname" ng-model="admin.actorpageData.firstname" required/>
        </md-input-container>
        <md-input-container>
            <label for="lastname">lastname</label>
            <input id="lastname" label="lastname" name="lastname" ng-model="admin.actorpageData.lastname" required/>
        </md-input-container>
    

        <md-input-container>
            <label for="pictures">Upload Image with resizing...smaller image does not show warning message</label>
            <input id="pictures" label="Upload Images" name="pictures" ngf-select="upload($file)" ng-model="pictures" accept="image/*" ngf-max-size="5MB" ngf-validate="{width: {min: 1400, max:2000}, height: {min: 630, max: 900}}" ngf-resize="{width: 1600, height: 720, quality: 1.0}">
            <div ng-messages="createActorPageForm.pictures.$error">
                <div ng-message="minWidth">
                    Min Width has to be 1400.
                </div>
                <div ng-message="minHeight">
                    Min height has to be 630.
                </div>
              <div ng-message="maxWidth">
                    Max Width has to be 2000.
                <div ng-message="maxSize">
                    File is bigger than 2MB.
                </div>
            </div>
        </md-input-container>
           <img style="width:100%;" ngf-src="pictures">
          <div style="margin-bottom: 30px;"></div>
          <md-input-container>
            <label for="picture">Upload Image without resizing.</label>
            <input id="picture" label="Upload Images" name="picture" ngf-select="upload($file)" ng-model="picture" accept="image/*" ngf-max-size="5MB" ngf-validate="{width: {min: 1400, max:2000}, height: {min: 630, max: 900}}">
            <div ng-messages="createActorPageForm.picture.$error">
                <div ng-message="minWidth">
                    Min Width has to be 1400.
                </div>
                <div ng-message="minHeight">
                    Min height has to be 630.
                </div>
              <div ng-message="maxWidth">
                    Max Width has to be 2000.
                <div ng-message="maxSize">
                    File is bigger than 2MB.
                </div>
            </div>
        </md-input-container>
        
        
        
            <img style="width:100%;" ngf-src="picture">

        <div class="button-toolbar" layout="row" layout-align="end center">
            <md-button class="md-primary" ng-disabled="createActorPageForm.$invalid" type="submit">Create</md-button>
        </div>
    </form>

  </md-card-content>
</md-card>
</div>
</md-content>
    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-scroll/0.7.3/angular-scroll.js"></script>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/9.0.9/ng-file-upload.min.js"></script>
  </body>
</html>

 

See also  Angular 9 jsPDF Billing Invoice PDF Generator Using Bootstrap 4 Web App Using Javascript Full Project For Beginners

 

And now make a script.js file and copy paste the following code

 

 

script.js

 

 

var app = angular.module('StarterApp', ['ngMaterial', 'ngMessages', 'duScroll', 'ngFileUpload']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', '$document', '$http', function($scope, $mdSidenav, $document, $http){
  
  
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };
  
  $scope.upload = function(file) {
            console.log (file);
    if (file) {
        // create an object for the ids
      var pictureId;

      // create a new formdata to store our image
      var fd = new FormData();
      fd.append('photo', file);
      
      console.log (fd);

      // process the upload
      $http({
          method: 'POST',
          url: 'https://actorreels.stamplayapp.com/api/cobject/v1/pictures',
          data: fd,
          headers: { 'Content-Type': undefined },
          photo: file
      }).then(function(response) {
            console.log ("Upload Single Image to Stamplay successful!");
            console.log (response);

      }, function(err){
            console.log (err);
      });
    }
      
            
        }
 
  $scope.scroll = function(){
    
    var someElement = angular.element(document.getElementById('bottom'));
    var container   = angular.element(document.getElementById('container'));
    $scope.something = "clickeddd"; 
    container.scrollTo(someElement,0,1000);    
  }
  
}]);

Leave a Reply