0

I need to call a method declared in my Angular component from a Javascript I have written inside the constructor of the same component. My target is to detect the change of a file input filed and upload the file to the server through a service.

I have added this declaration after the imports.

declare var $: any;

In my constructor, I have written following code.

$(document.body).on("change.bs.fileinput", ".fileinput-exists", function () {

    console.log($(this).parent().find('.myImage').val());
    let input = $(this).parent().find('.myImage');
    this._photoToBeSaved = input.prop('files')[0];
    console.log("my file = " + this._photoToBeSaved);
    //upload the image
    () => {
        this.uploadPhoto(this._photoToBeSaved);
    }
});

Following is the uploadPhoto method in the same component.

uploadPhoto(photo: any) {
    console.log("here i am at upload method);
    // call service method to upload
    .....
}

However, this does not work.

Note that for the following part in the constructor, I have followed the answer for this question. Can I really do that. Is it correct?

() => {
   this.uploadPhoto(this._photoToBeSaved);
}

the uploadPhoto() method does not get called. Why is that? How to correct this?

Community
  • 1
  • 1
vigamage
  • 1,975
  • 7
  • 48
  • 74

2 Answers2

2

Found the solution. Posting it here, so that it might help someone in need.

I do not know the reason why the way I have asked in the question does not call the method in Angular2 component. The way to go for is ARROW FUNCTIONS.

$(document.body).on("change.bs.fileinput", ".fileinput-exists", (event: Event) => {
    alert("fired");
    let photoToSave = $(event.currentTarget).parent().find('.myImage').val();
    this.uploadPhoto(photoToSave);
});

the uploadPhoto() method gets called fine now.

vigamage
  • 1,975
  • 7
  • 48
  • 74
0

So your target is to detect the change of a file input and uploading it! doing it using angularjs. To detect change angular has two in-build function : $scope.$watch an ng-change. However You can use $scope.watch Here.

html:

 <input ng-model="value" type="file">

Angular

 //whenever input value will change will automatically updated here
  $scope.value = '';
 //and when $scope.value will change it will trigger this function
 $scope.$watch = function('value' function(){
     //upload code here
 });
Anirban Bhui
  • 6,373
  • 1
  • 11
  • 15
  • Can you elaborate this a little more. I find it hard to understand this – vigamage May 22 '17 at 11:23
  • I get the Jquery function fired whenever a file is uploaded to the input field. The problem I have is not being able to call the upload function in the component class from Jquery. I think I will face the same in your answer. Isn't it? – vigamage May 22 '17 at 11:43
  • It's sure that uploadPhoto(element) inside the $scope.$watch will be triggered. Now its up to you. – Anirban Bhui May 22 '17 at 11:54
  • That is where I have the problem. method does not get called – vigamage May 22 '17 at 15:27