how to hang on the field type file?

Question

please help solve the problem. is a form of: jsfiddle

.if a user enters data into the fields:

name, email, phone, message

Then is output to the console.

but if a user adds a file to the field

attachment

, there is NO output to the console (should show "55555")

js:

briefApp.directive('attachmentValidate', function() {
    return {
        link: function($scope, element, attrs, ctrl) {
            $scope.$watch('attachment', function(value){
                console.log(55555);

            });            
        }
    };
});

I need to file when adding (or removing) operates the controller "attachmentValidate" and the console output "55555"

I believe you need to bind ng-change event that will get fired on selecting file instead of watch — Pankaj Parkar, Mar 07 '15 at 10:12
why your directive only contains a watch rather directive should use when you need to manipulate DOM, you can always keep that code inside your controller — Pankaj Parkar, Mar 07 '15 at 11:04

score 2 · Answer 1 · edited May 23 '17 at 12:14

input type="file" will not change the ng-model in any way, you need to do it by using directive. In directive we will bind change event of file, and whenever file is changed then we assign that file name to the ng-model variable.

Directive

briefApp.directive("fileread", [function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attributes,ngModel) {
            element.bind("change", function (changeEvent) {
                scope.$evalAsync(function () {
                    // this will assigned 1st file to ng-model
                    ngModel.$setViewValue(changeEvent.target.files[0]);
                });
            });
        }
    }
}]);

HTML

<input type="file" size="1" name="attachment" value="" id="fileUploadField" 
ng-model="attachment" fileread attachment-validate />

Above directive will update scope value and then the watch gets fired & console.log(5555) get printed.

Working Fiddle

score 2 · Accepted Answer · answered Mar 07 '15 at 10:41

2

According to the official angularjs docs as in https://docs.angularjs.org/api/ng/directive/input

Note: Not every feature offered is available for all input types. Specifically, data binding and event handling via ng-model is unsupported for input[file].

So you may try binding this file select event as a change event over element

     link: function($scope, element, attrs, ctrl) {
         element.bind('change', function(value){
           console.log("5555");
           console.log("Hurray");
        });
   });

answered Mar 07 '15 at 10:41

NavyCody

492
2
10

he wants update the scope variable to print `console.log("5555");` this solution will never update the `attachment` scope variable. – Pankaj Parkar Mar 07 '15 at 10:55
his main problem was why the console log statement is nt being executed. I just answered why it could nt be done. There are umpteen number of ways to update the filemodel. Iam sure he is clear on what he wants. Whether to update file model or fire other events. – NavyCody Mar 07 '15 at 11:00
your answer tells that there is no any requirement of ng-model on field, as such it shouldn't be like that – Pankaj Parkar Mar 07 '15 at 11:02
i think u shud properly go through answer. no where i mentioned theres no use of ngmodel. i just said ngmodel is nt supported for all elements by angularjs yet. Stackoverflow is nt a spoon feeding platform to give exact solutions. Its more of helping users to arrive at their own answers. – NavyCody Mar 07 '15 at 11:04
@navin Yes sir, that is what I'm saying you never explained, how he should bind that value to ng-model :p – Pankaj Parkar Mar 07 '15 at 11:15
1

yes bro. the approach is nt suggested by me as i felt his main doubt was why the output is nt being made. Thats why i suggested yoy may try. The approach u suggested is clear cut solution and personally i like it. .Cheers. – NavyCody Mar 07 '15 at 11:20
@navin Chill bro, your is also better than me :-) Gave correct way to him – Pankaj Parkar Mar 07 '15 at 11:23

how to hang on the field type file?

2 Answers2