html5 pattern validation for file not working

Question

I searched in Google there has no option for validate file by using URL pattern.

I also have tried in my site. But pattern for file not working. Check my code -

<input type="file" class="form-control" id="mp3file_name" name="mp3file_name"  pattern="([^\s]+(\.(?i)(mp3))$)" accept="audio/mpeg, audio/mp3" required="required" />

Attribute accept working fine but I need to validate If I will uploading other files except mp3

you can use javascript function along with button to validate.. — Anoop B.K, Aug 19 '15 at 08:23

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

Remove the pattern and just use:

<input type="file" class="form-control" id="mp3file_name" name="mp3file_name" accept="audio/mpeg, audio/mp3" required="required" />

Also as said by Mave:

The accept attribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input. While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they're looking for without having to sift through a hundred different file types.

edited May 23 '17 at 12:07

Community

1
1

answered Aug 19 '15 at 07:59

Praveen Kumar Purushothaman

154,660
22
177
226

Your code accepted all files like `.doc`, `.zip` etc. – Chinmay235 Aug 19 '15 at 08:00
@Chinu What browser are you using? It doesn't allow me to add anything other than `.mpg` and `.mp3`! – Praveen Kumar Purushothaman Aug 19 '15 at 08:01
Click on browse bottom and select `All Files ('*')` then choose any other file – Chinmay235 Aug 19 '15 at 08:01
I am using `mozilla firefox version - 39.0.3` – Chinmay235 Aug 19 '15 at 08:02
^ That I don't think you can stop. It is a feature of all platforms. – Praveen Kumar Purushothaman Aug 19 '15 at 08:02
I am using Chrome. And what you say is normal expected behaviour that you need to handle in server side by reading the MIME type. – Praveen Kumar Purushothaman Aug 19 '15 at 08:02
I know i can validate in server side. But Just want to know is there any option for validate file extension in url pattern? I am using popup. once page refresh then popup will disappear – Chinmay235 Aug 19 '15 at 08:04
Nopes. You can't do that buddy! `:(` – Praveen Kumar Purushothaman Aug 19 '15 at 08:06

score 0 · Answer 2 · edited May 23 '17 at 12:23

Please see File input 'accept' attribute - is it useful?:

The accept attribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input. While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they're looking for without having to sift through a hundred different file types.

You can make it easier for users to browse through their files, but ultimately you have no control over it, as it is user input. Make sure you check the file in whatever language you receive the form in.

html5 pattern validation for file not working

2 Answers2