Upload function not getting called with ng-file-select

Question

I am trying to upload a file to a cloud using the ng-file-select directive of Angular. The function called for uploading the image should be called only when the form containing the upload field is submitted. The code is given below:

<form class="form-horizontal" name="reviewEntry" role="form" ng-controller="reviewController" ng-submit="submitFeedback(reviewer.image)" novalidate>   
    ...
    <input type="file" id="image" name="image" ng-file-select="onFileSelect($files)" accept="image/*" ngf-max-size="5MB" ngf-model-invalid="errorFiles">
    ...       
</form>

My controller code:

$scope.submitFeedback = function(file) {

    $scope.showSuccess = false;
    $scope.message = "Loading ...";

    var review = {
        name: $scope.reviewer.name,
        model: $scope.reviewer.model,
        image: $scope.reviewer.image,
        review: $scope.reviewer.review
    };

    $scope.onFileSelect = function(files) {

    if (files && files.length) {
        $scope.file = files[0];
    }
    alert("ON FILE SELECT");

    Upload.upload({

        url: '/images/upload',
        method: 'POST',
        file: $scope.file

    }).success(function(data) {
        console.log("SUCCESS: " + data);
    }).error(function(err) {
        console.log("ERROR: " + err.message);
    });

    ...
};

However, onFileSelect inside submitFeedback is never called (no alert box) - the upload should happen only after the submit button is pressed. I am relatively new to Angular - can anyone help me fix this?

Bata · Accepted Answer · 2016-03-13 10:02:40Z

1

Edit: onFileSelect is called on file select event. You should not define that function inside the submitFeedback function. So move $scope.onFileSelect outside of the $scope.submitFeedback.

Also when you move it, you need to change it and let the $scope.submitFeedback have the logic for uploading, not the $scope.onFileSelect function.

answered Mar 13, 2016 at 10:02

Bata

6513 silver badges7 bronze badges

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

2 Comments

user3033194 Over a year ago

But if I move the uploading logic to $scope.submitFeedback, it makes no sense to have the $scope.onFileSelect function at all. Also, I want the uploading to be done only when the submit button has been pressed.

user3033194 Over a year ago

OK, I got it to work the way you said. I set a $scope.file variable in the $scope.onFileSelect function, and used it in the submit function. Thank you!

Collectives™ on Stack Overflow

Upload function not getting called with ng-file-select

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related