Angular onChange not being triggered

Question

I have a web app: frontend in Angular and backend in Rails. In my app, I'm trying to add PDF file using Paperclip gem and send it to S3 storage.

Here is code for frontend(I found this code online but not sure whether I wrote onchange part correctly. Got it from here: Use angular js to submit file via rails paperclip ):

<input type="file" name="attachment" onchange="angular.element(this).scope().uploadFile(this)">

Here is my javascript method for uploadFile:

$scope.uploadFile = function(files) {
    var fd = new FormData();
    fd.append('user[attachment]', files[0]); // 'user[avatar]' is important, so that params[:user][:avatar] contains the file, as expected by Rails
    $http.put('/users.json', fd, { // The update method of the users controller
        withCredentials: true,
        headers: {
            'Content-Type': undefined,
            'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
        },
        transformRequest: angular.identity
    }).success(function(e) {
        console.log(e);
    }).error(function(e) {
        console.log(e);
    });
};

And this is how I configured this javascript file:

app.controller('PrescreeningBasicinfoCtrl', ['$scope', '$location', 'ApplicationModule', 'Restangular',
    function ($scope, $location, ApplicationModule, Restangular) {

Whenever I upload a file, it should trigger uploadFile. However, it does not get triggered. Instead i get an error saying

"Uncaught TypeError: angular.element(...).scope(...).uploadFile is not a function"

What am I doing wrong here?

Do you have any messages logged in the output of your browser that tell you anything when the input is used? — mariocatch, May 16 '16 at 00:25
One thing is that you have to inject `$http` in your controller — Yosvel Quintero, May 16 '16 at 00:26
@YosvelQuintero, yeah I forgot. but the problem is that onchange doesn't even trigger. — Jokingpsh, May 16 '16 at 00:30
strange usage of .scope and this, but technically should work if debugInfo are enabled, which should be default. but you can also try ng-change and pass $event and use $event.target to get dom instance — YOU, May 16 '16 at 00:35
It's trying, but it can't find the method off your scope. Is that all the angular code you have? — mariocatch, May 16 '16 at 00:36
@mariocatch I have other Angular codes but they are not related to this. At least in this javascript file. — Jokingpsh, May 16 '16 at 00:41
do you have ng-app and ng-controller? is the app file and controller correctly loaded without any error? — YOU, May 16 '16 at 01:23

Angular onChange not being triggered

0 Answers0