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

Ivan Chernykh · Accepted Answer · 2013-10-01 06:35:52Z

53

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

answered Oct 1, 2013 at 6:35

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

danikoren Over a year ago

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 Over a year ago

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

Michael J. Calkins Over a year ago

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

Ivan Chernykh Over a year ago

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

Ivan Chernykh Over a year ago

@osiris355 , try Michael J. Calkins solution above

|

Sourabh Agrawal · Accepted Answer · 2015-08-11 22:12:59Z

36

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.

answered Aug 11, 2015 at 22:12

Sourabh Agrawal

85610 silver badges23 bronze badges

3 Comments

durron597 Over a year ago

Why is this better than the previous answer?

James Gentes Over a year ago

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

Iker Aguayo Over a year ago

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

Bart · Accepted Answer · 2016-01-28 18:14:13Z

9

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

edited Jan 28, 2016 at 18:14

Bart

5,2033 gold badges38 silver badges43 bronze badges

answered Jan 20, 2014 at 1:12

Kirk Strobeck

18.8k21 gold badges83 silver badges122 bronze badges

1 Comment

dotnethaggis Over a year ago

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.

Sangeet Shah · Accepted Answer · 2017-01-15 10:58:52Z

5

  // 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}}" />

answered Jan 15, 2017 at 10:58

Sangeet Shah

3,1173 gold badges24 silver badges25 bronze badges

1 Comment

Patterson Over a year ago

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

Collectives™ on Stack Overflow

Preview Image before uploading Angularjs

4 Answers 4

7 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related