Angular如何设置输入类型文件的样式

Question

I have already seen many questions about style an input type file but I can't find out to do It in angular.

So how can I style inside an angular app an input type file?

This is my code inside and html page:

<input type="file" ngf-select ng-model="vm.attachment" name="file" accept="application/pdf" ngf-max-size="5MB" ngf-model-invalid="errorFile">

I have already tried with (after my input file hidde):

<md-button id="uploadButton" class="md-raised md-primary"> Choose Files </md-button>

link (scope, element, attrs) {
  const input   = element.find('#fileInput');
  const button = element.find('#uploadButton');

  if (input.length && button.length) {
    button.click((e) => input.click());
  }
}

But it doesn't work, my link function doesn't work because I'm using controller and inside the page retrieve error if i put this function

Answer 1

You can use the ngf-select directive on a button - check the example from their github doc page: https://jsfiddle.net/danialfarid/xxo3sk41/590

The ng-model file has a name attribute that you can use to display the filename:

<button ngf-select ng-model="picFile" accept="image/*"> Select Picture</button>
File name: {{picFile.name}}

Answer 2

It's not common to style a input file. I prefer to make it hidden, set a custom component and point its events to the input file. So, I can style this component as much as we want.

Input file hidden

Make it hidden with display: none

<input type="file" id="input-file" name="file" style="display: none">

My custom component

Add an onclick event, so a click here will point to our input file.

<md-button onclick="document.querySelector('#input-file').click()" class="md-raised md-primary"> Choose Files </md-button>

That's it, until here the job is done. But, if we also want to catch the document's name add onchange event to the input file.

<input type="file" onchange="angular.element(this).scope().onchange(this)" id="input-file" name="file" style="display: none">
<span>{{theFile.name}}</span>

$scope.onchange = function (sender) {
  $scope.$apply(function($scope) {
    $scope.theFile = sender.files[0]; 
  });
}