CODEWITHSUNDEEP
javascriptangularjs
greenthunder
greenthunder

Reputation: 727

How to pass angular value when input type file changed

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?

Upvotes: 0

Views: 2155

Answers (1)

Abhay
Abhay

Reputation: 6760

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

Upvotes: 1

Related Questions