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:

<input type="file" multiple ng-if="allow_multiple">
<input type="file" ng-if="!allow_multiple">

But, we know that is not ideal.

I tried

<input type="file" ng-multiple="allow_multiple">

But that doesn't work.

It seems that AngularJS has no such ngMultiple directive, but everyone is using it anyway (or am I missing something?)

Anyway, what is the best way to accomplish that?

EDIT: From thw answers so far it really seems like there's no pretty way to do this. I opened this issue on their tracker, let's see what we get :-) https://github.com/angular/angular.js/issues/7714

Answer 1

I come to this page for same issue with Angular 2

And finally fixed like this:

<input type="file" 
    [accept]="extAccepts" 
    [multiple]="(maxFiles > 1)" />

Note: both file type (extAccepts) and maxFiles are reading from component as @input() from the user.

Hope it will help for someone!

Answer 2

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.