Calling a method in the component from a Javascript - Angular2

Question

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?

vigamage · Accepted Answer · 2017-05-22 18:12:14Z

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.

answered May 22, 2017 at 18:12

vigamage

2,1359 gold badges52 silver badges84 bronze badges

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

1 Comment

pasha Over a year ago

$('.fileinput-preview img').get(0).src;

Anirban Bhui · Accepted Answer · 2017-05-22 11:38:27Z

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

edited May 22, 2017 at 11:38

answered May 22, 2017 at 11:16

Anirban Bhui

6,5031 gold badge14 silver badges15 bronze badges

4 Comments

vigamage Over a year ago

Can you elaborate this a little more. I find it hard to understand this

vigamage Over a year ago

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?

Anirban Bhui Over a year ago

It's sure that uploadPhoto(element) inside the $scope.$watch will be triggered. Now its up to you.

vigamage Over a year ago

That is where I have the problem. method does not get called

Collectives™ on Stack Overflow

Calling a method in the component from a Javascript - Angular2

2 Answers 2

1 Comment

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Linked

Related