title: How to save image into your local folder using Angular.js and PHP
body: <p>I need to store image in my local folder using Angular.js and PHP. Here is my code:</p>
  
  <pre><code>&lt;div class="col-md-6 bannerimagefile" ng-controller="imgController"&gt;
      &lt;form  name="form"&gt;
          &lt;label for="bannerimage" accesskey="B"&gt;
              &lt;span class="required"&gt;*&lt;/span&gt; Banner Image
          &lt;/label&gt;
          &lt;input type="file" class="filestyle" data-size="lg" name="bannerimage" id="bannerimage" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}" custom-on-change="uploadFile" multiple&gt;
          &lt;label for="bannerimage" accesskey="B" &gt;
              &lt;span class="required"&gt;*&lt;/span&gt; View Image
          &lt;/label&gt;
          &lt;div style="padding-bottom:10px;" ng-repeat="step in stepsModel"&gt;
              &lt;img ng-src="{{step}}" border="0" name="bannerimage" style="width:70px; height:70px;"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="button" id="btn" ng-click="submitImage();" value="Upload" /&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The controller file is given below.</p>
  
  <pre><code>var app=angular.module('testImage',['ngFileUpload']);
  app.controller('imgController',function($scope,$http){
      $scope.submitImage=function(){
          console.log('image',$scope.file);
      }
      $scope.stepsModel = [];
      $scope.uploadFile = function(event){
          console.log('event',event.target.files);
          var files = event.target.files;
          for (var i = 0; i &lt; files.length; i++) {
              var file = files[i];
              var reader = new FileReader();
              reader.onload = $scope.imageIsLoaded; 
              reader.readAsDataURL(file);
          }
      };
      $scope.imageIsLoaded = function(e){
          $scope.$apply(function() {
              $scope.stepsModel.push(e.target.result);
          });
      }
  });
  app.directive('customOnChange', function() {
      return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              var onChangeHandler = scope.$eval(attrs.customOnChange);
              element.bind('change', onChangeHandler);
          }
      };
  });
  </code></pre>
  
  <p>Here my requirement is when user will click on upload button the validation will check and image will save inside the project folder. </p>