ngf-pattern not working for ng-file-upload

Question

I am trying to limit the file type to CSV in the ng-file-upload component but it isn't working - it still accepts all files.

I have tried both ngf-pattern="'*.csv'" and ngf-pattern="*.csv".

Code:

   <button class="btn btn-info" type="file" ngf-select="uploadFiles($file, $invalidFiles)"
                        ngf-pattern="'*.csv'" ngf-max-height="1000" ngf-max-size="1MB">
                    <i class="fa fa-upload"></i> {{'main.users.import.button' |translate}} </button>

Dependency:

  "ng-file-upload": "~10.0.2",

score 21 · Accepted Answer · answered Dec 07 '15 at 07:40

21

Try to add the accept attribute too and remove the *:

<button class="btn btn-info" 
type="file" 
ngf-select="uploadFiles($file, $invalidFiles)" 
ngf-pattern="'.csv'" 
accept=".csv" 
ngf-max-height="1000" 
ngf-max-size="1MB">

EDIT: accept without single quotes

answered Dec 07 '15 at 07:40

michelem

14,430
5
50
66

how to add multiple filters? – Vikas Bansal Nov 30 '16 at 08:11
like this - ngf-pattern="'.csv','.pdf'" accept=".csv,.pdf". – japu soft dev Jan 16 '20 at 08:40

score 3 · Answer 2 · answered Jan 27 '17 at 01:53

<button id="select_resume_btn" class="btn btn-default" type="file" 
        ngf-select="uploadFiles($file, $invalidFiles)" 
        ngf-pattern="'.docx,.pdf'" 
        accept=".docx,.pdf" 
        ngf-max-size="5MB">Select Resume</button>

This worked for me !! Thanks @Michelem

ngf-pattern not working for ng-file-upload

2 Answers2