Angular how to style input type file

Issue

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

Solution

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}}

Answered By - Fissio