Multiple File Options When Upload File in Input Accept Attribute

Question

I want to show multiple file type option when upload the files.

I refer to this: http://jsfiddle.net/dirtyd77/LzLcZ/144/ .

It works great when only one type of file is appear on the option.

<p>Only show Excel (.xlsx) files...</p>
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ID="fileSelect" runat="server" />

but it will show 'Custom Files' when it has multiple options. as shown in image below.

<p>Show .xls, .xlsx, .csv files...</p>
<input type="file" accept=".csv, .pdf" ID="fileSelect" runat="server" />

Is there any way to show multiple options (1row for PDF, 1row for image, 1row for Excel, etc) in the file type dropdown menu? Instead of showing 'Custom Files'?

which one is your code 1st one or second one/..? and i think you need to change your accept attribute's criteria it's working as you wrote code in html so what you need .?? or what is the problem.? — Himesh Aadeshara
– Himesh Aadeshara, Commented Sep 4, 2015 at 7:03
oky got the point you want to make all as upload as one but want to make choosy in file format — Himesh Aadeshara
– Himesh Aadeshara, Commented Sep 4, 2015 at 7:06

Himesh Aadeshara · Accepted Answer · 2015-09-04 07:13:33Z

50

hi i have tried this and worked

the problem was the space you have given between the .csv, .pdf as i thought

<p>MY CUSTOM ONE</p>
<input type="file" accept="image/*,video/*,.pdf,.csv" ID="fileSelect" runat="server" />

here is your updated fiddle work

DEMO code working

answered Sep 4, 2015 at 7:13

Himesh Aadeshara

2,2281 gold badge18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Himesh Aadeshara Over a year ago

@hahahaha check out the answer

feature_engineer Over a year ago

It works on Firefox, but not on Chrome... Chrome still shows "Custom Files".

Gustavo Oliveira Over a year ago

@feature_engineer I opened a bug in Chromium regarding this matter issues.chromium.org/342067849

leiikun · Accepted Answer · 2023-12-29 18:45:21Z

1

For PDFs in 2023 via chrome

image/*, application/pdf

answered Dec 29, 2023 at 18:45

leiikun

3132 silver badges12 bronze badges

Collectives™ on Stack Overflow

Multiple File Options When Upload File in Input Accept Attribute

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related