title: Preview Image before uploading Angularjs
body: <p>Hi I was wondering if there was a way to preview images before I upload them using angularjs?  I am using the this library. <a href="https://github.com/danialfarid/angular-file-upload">https://github.com/danialfarid/angular-file-upload</a></p>
  
  <p>Thanks.  Here is my code:</p>
  
  <p>template.html</p>
  
  <pre><code> &lt;div ng-controller="picUploadCtr"&gt;
  &lt;form&gt;
          &lt;input type="text" ng-model="myModelObj"&gt;
        &lt;input type="file" ng-file-select="onFileSelect($files)" &gt;
   &lt;input type="file" ng-file-select="onFileSelect($files)" multiple&gt;
  
   &lt;/form&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>controller.js</p>
  
  <pre><code>  .controller('picUploadCtr', function($scope, $http,$location, userSettingsService) {
  
   $scope.onFileSelect = function($files) {
  //$files: an array of files selected, each file has name, size, and type.
  for (var i = 0; i &lt; $files.length; i++) {
    var $file = $files[i];
    $http.uploadFile({
      url: 'server/upload/url', //upload.php script, node.js route, or servlet uplaod url)
      data: {myObj: $scope.myModelObj},
      file: $file
    }).then(function(data, status, headers, config) {
      // file is uploaded successfully
      console.log(data);
    }); 
  }
  }
  </code></pre>