Preview Image before uploading Angularjs

Question

Hi I was wondering if there was a way to preview images before I upload them using angularjs? I am using the this library. https://github.com/danialfarid/angular-file-upload

Thanks. Here is my code:

template.html

 <div ng-controller="picUploadCtr">
<form>
        <input type="text" ng-model="myModelObj">
      <input type="file" ng-file-select="onFileSelect($files)" >
 <input type="file" ng-file-select="onFileSelect($files)" multiple>

 </form>
     </div>

controller.js

  .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 < $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);
  }); 
}
}

Solution 1

OdeToCode posted great service for this stuff. So with this simple directive you can easily preview and even see the progress bar:

.directive("ngFileSelect",function(){    
  return {
    link: function($scope,el){          
      el.bind("change", function(e){          
        $scope.file = (e.srcElement || e.target).files[0];
        $scope.getFile();
      });          
    }        
  }

It is working in all modern browsers!

Example: http://plnkr.co/edit/y5n16v?p=preview

Solution 2

JavaScript

 $scope.setFile = function(element) {
  $scope.currentFile = element.files[0];
   var reader = new FileReader();

  reader.onload = function(event) {
    $scope.image_source = event.target.result
    $scope.$apply()

  }
  // when the file is read it triggers the onload event above.
  reader.readAsDataURL(element.files[0]);
}

Html

<img ng-src="{{image_source}}">
<input type="file" id="trigger" class="ng-hide" onchange="angular.element(this).scope().setFile(this)" accept="image/*">

This worked for me.

Solution 3

See the Image Upload Widget from the Jasney extension of Bootstrap v3

Solution 4

  // start Picture Preview    
    $scope.imageUpload = function (event) {
        var files = event.target.files;

        for (var i = 0; i < 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.img = e.target.result;            
        });
    }


<input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(event)" />
<img class="thumb" ng-src="{{img}}" />

View more solutions

Comments

[danikoren]

just a side note, this (excellent) solution based on the file reader api, which does not support ie9 and early versions of ie.

[Ivan Chernykh]

@saniko yes. but thanks god that its global usage is only 2.99% (caniuse.com/#feat=filereader)

[Michael J. Calkins]

I updated this one to work with Angular 1.3 and organized the code a bit plnkr.co/edit/JSuY2j?p=preview

[yu.pitomets]

This solution is very good example how people are in their sand boxes and make an answers in stackoverflow. They just provide solution that work in current situation. For example this solution does not work absolutely if I want for example put two independent file choosers in one page.

[Ivan Chernykh]

@user1315599 you are definitely invited to give here your more generic answer, or even ask your more specific question!

[Israel Barba]

you need to use the directive angular-file-model github.com/ghostbar/angular-file-model

[durron597]

Why is this better than the previous answer?

[James Gentes]

It appears this solution doesn't require use of github.com/ghostbar/angular-file-model

[Ivan Chernykh]

@osiris355 , try Michael J. Calkins solution above

[dotnethaggis]

I'm actually looking for an alternative to the Jasney Extension as you don't have control over the elements of the preview and buttons. I want my preview to be displayed away from the upload button but they are all contained in the same container. That being said this is a viable option for most people and for that reason I will upvote your answer.

[Iker Aguayo]

Here there is an explanation, why this solution is not a good idea: stackoverflow.com/questions/17922557/…

[Patterson]

Great! And if I want to get the Image name and extension, how can I do?