Conditional “multiple” attribute in <input type=“file”> with AngularJS

Question

I need an upload form field that may or may not allow the user to select more than one file.

I know I can do something like:

Answer 1

Besides the difficulty of doing this there is also the issue that some browser will not evaluate multiple="false" (Safari 8 on file input for ex). So the multiple attribute needs to be conditionally written.

I would wrap your html in a directive and conditionally apply the attribute within the directive such as:

var input = elem.find('input');
if(condition)
  input.attr('multiple', 'true');

Where the condition could be any directive attribute.

Answer 2

Solution is pretty simple since you are using directive or component - just manipulate DOM on the right moment. Take a glance here:

app.component('myComponent', {
    templateUrl: 'tmpl.html',
    bindings: {
        str: '@'
    },
    controller: function ($element) {
        this.$postLink = function () {
            $element.find('input').attr('multiple', 'multiple');
        }
    }
}