input type file, select only .css and font files?

Question

I have an <input type="file" multiple="multiple">. I need to restrict the user to select only css and font files as file types.

Edit : Yes there are plenty question with input type file. But I need specific to only font files and css. I got it for css but not for font files since there are a lot of different font files. eg. https://www.file-extensions.org/filetype/extension/name/font-files

Use accept attribute and Choose you mime types https://www.sitepoint.com/web-foundations/mime-types-complete-list/ — Gaurav joshi, Jan 12 '17 at 06:56

Ashish Patel · Answer 1 · 2017-01-12T06:56:38.787

0

You can add accept parameter in input type="file" and write types of extensions you need to required. For Eg:

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

Or otherwise you can check extension of uploaded file by javascript after file uploaded by user.

edited Jan 12 '17 at 06:56

answered Jan 12 '17 at 06:55

Ashish Patel

1,011
13
27

As explained here though, it's up to the browser to respect this indication or not: http://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file – Marc-Antoine Parent Jan 12 '17 at 06:56

score 0 · Answer 2 · answered Jan 12 '17 at 07:08

If you need script validation you can try something like this:

var mimeTypeArray=['text/x-script.csh','application/x-pointplus','text/css','text/plain'];
$("input[type=file]").on("change",function(){
var file = $('input[type=file]').prop('files')[0];
if (file) {
    var mime = file.type;
    console.log(mime);
    var check = $.inArray( mime, mimeTypeArray);
    if (check == -1 ) {// if mime type not found in the array
        alert(' css files only!');
        return;
    }
} 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple="multiple">

input type file, select only .css and font files?

2 Answers2