How to pass angular value when input type file changed

Question

I'd like to create thumbnail when choose new image for review. ng-change doesn't work for input type file in angular and use onchange instead.

<div ng-repeat="images in listImages">
<img id="imageId{{$index}}" ng-src="images.fileLocation">
<input type="file" onchange="angular.element(this).scope().imagePreview(this, imageId{{$index}})" accept="image/*" />
</div>

  $scope.imagePreview = function(fileInput, imageId) {
    if (fileInput.files && fileInput.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#' + imageId).attr('src', e.target.result);
        }
        reader.readAsDataURL(fileInput.files[0]);
    }
  }

Using code above, there's an error. It couldn't read imageId{{$index}}. Is there any ways to pass imageId with index to imagePreview method?

just pass $index and construct imageId inside imagePreview as string "imageId" is static. — sdfacre
– sdfacre, Commented Jan 21, 2016 at 4:48
What version of angular are you using. I cannot replicate the error, instead I get: "Interpolations for HTML DOM event attributes are disallowed. Please use the ng- versions". So why again aren't you using ng-change?? — Urielzen
– Urielzen, Commented Jan 21, 2016 at 5:23
@Urielzen ng-change doesn't work for input type file in angular — greenthunder
– greenthunder, Commented Jan 21, 2016 at 6:20
what about put the $index in an attribute and pass the input object to the function? <input data-img-ref="{{$index}}" onchange="angular.element(this).scope().imagePreview(this)"/>. then in imagePreview() just do var imgId = "imageId" + fileInput.attributes['data-img-ref'].value; — sdfacre
– sdfacre, Commented Jan 21, 2016 at 7:49

Abhay · Accepted Answer · 2016-01-21 05:56:48Z

If i don't misunderstand Why don't use "ng-file-upload" directive to upload the files, It provide all the features preview, crop & many more.

Have a look :

ng-file-upload

Or try this code to upload image with preview Js fiddle for image upload

 <form name="myForm">
<fieldset>
  <legend>Upload on form submit</legend>
  <br>Photo:
  <input type="file" ngf-select ng-model="picFile" name="file"    
         accept="image/*" ngf-max-size="2MB" required
         ngf-model-invalid="errorFiles">
  <i ng-show="myForm.file.$error.required">*required</i><br>
  <i ng-show="myForm.file.$error.maxSize">File too large 
      {{errorFiles[0].size / 1000000|number:1}}MB: max 2M</i>
  <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button>
  <br>
  <button ng-disabled="!myForm.$valid" 
          ng-click="uploadPic(picFile)">Submit</button>
  <span class="progress" ng-show="picFile.progress >= 0">
    <div style="width:{{picFile.progress}}%" 
        ng-bind="picFile.progress + '%'"></div>
  </span>
  <span ng-show="picFile.result">Upload Successful</span>
  <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</fieldset>
<br>

var app = angular.module('fileUpload', ['ngFileUpload']);

 app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.uploadPic = function(file) {
file.upload = Upload.upload({
  url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
  data: {file: file, username: $scope.username},
});

file.upload.then(function (response) {
  $timeout(function () {
    file.result = response.data;
  });
}, function (response) {
  if (response.status > 0)
    $scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
  // Math.min is to fix IE which reports 200% sometimes
  file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}]);

because i'd like to create dynamic multiple file upload and already use base-sixty-four as directive

Collectives™ on Stack Overflow

How to pass angular value when input type file changed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related