JQuery how to validate file type by getting it's extension using `file.type` function?

Question

I know you can validate a file type by getting it's extension using pop

e.g.

var ext = $('#file-input').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

I also know that you can set an attribute to html input element itself to accept only specific file type.

e.g.

<input type="file" accept=".xls,.xlsx" />

but I've found another way to get the file type

e.g.

$('#file').change(function(){
    var file = this.files[0];
    type = file.type;
});

It's only works in newly browser though, I wanted to know on how to validate specific file type with this, for example allow only pdf, jpg, docx, xlsx.

I've tried to print in console the output of file.type and I get application/vnd.openxmlformats-officedocument.wordprocessingml.document for docx type so I tried it like this:

if(file !== 'application/docx'){
    alert('Invalid File Type');
}

Unfortunately, it doesn't work.

is it really necessary for you to use a script to check this? you could do something like `` — Carsten Løvbo Andersen, Feb 05 '19 at 08:12
@guest271314 - It's from what I read, it will only works in newly browser. e.g., IE10. — Polar, Feb 05 '19 at 08:13
@Banny That is not accurate. Can you post a link to what you read? Why do you expect the MIME type of a `.docx` file to be something other that what `File.type` is? _".docx: application/vnd.openxmlformats-officedocument.wordprocessingml.document"_ — guest271314, Feb 05 '19 at 08:14
[Office 2007 File Format MIME Types for HTTP Content Streaming](https://blogs.msdn.microsoft.com/vsofficedeveloper/2008/05/08/office-2007-file-format-mime-types-for-http-content-streaming-2/) _"Ext: .docx, MIME Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document"_ — guest271314, Feb 05 '19 at 08:19
@CarstenLøvboAndersen - yep, it's necessary if you want to learn something new. `I found a new way` . — Polar, Feb 05 '19 at 08:20
I'm searching for it again, Actually, I only read it somewhere here, one of the answer in question. Let me put link later once I found it. — Polar, Feb 05 '19 at 08:23
That is a the link to a document published by the company that developed the `.docx` extension. Where the MIME types for their "File Format MIME Types" are listed. Why do you believe that the `.docx` extension MIME type is `application/docx`? — guest271314, Feb 05 '19 at 08:23
@guest271314 - I know I know ofcourse, what I mean is what is the connection of it to this question? — Polar, Feb 05 '19 at 08:26
The question is based on a false premise. `File.type` returns the correct MIME type for files having a `.docx` extension. What lead you to believe that the MIME type for a `.docx` extension is `application/docx`? — guest271314, Feb 05 '19 at 08:27
@guest271314 - do you mean do I have to really put `application/vnd.openxmlformats-officedocument.wordprocessingml.document`? instead of `application/docx`? — Polar, Feb 05 '19 at 08:32
@Banny You do not have to do anything. It is not your choice. You did not develop the file format, extension or the MIME type. And you have thus far failed to reference where you encountered a `application/docx` MIME type. — guest271314, Feb 05 '19 at 08:33
There is nothing to be confused about. The company that developed the file format, extension and MIME type for `.docx` lists the MIME type for `.docx` extension as `application/vnd.openxmlformats-officedocument.wordprocessingml.document` (see the link to the primary source at this comment https://stackoverflow.com/questions/54530032/jquery-how-to-validate-file-type-by-getting-its-extension-using-file-type-fun?noredirect=1#comment95861806_54530032). What is the primary source for `application/docx` being a valid MIME type for `.docx` files? That is the question that you must answer first. — guest271314, Feb 05 '19 at 08:35

score 0 · Answer 1 · answered Feb 05 '19 at 08:48

0

According to Office 2007 File Format MIME Types for HTTP Content Streaming, published by the company that developed the file format, .docx file extension, and MIME type, application/vnd.openxmlformats-officedocument.wordprocessingml.document is the valid MIME type of .docx files

Ext    MIME Type

.docx  application/vnd.openxmlformats-officedocument.wordprocessingml.document

application/docx is not listed as a valid MIME type for the .docx extension by the primary source.

See also What is a correct mime type for docx, pptx etc?

answered Feb 05 '19 at 08:48

guest271314

1
15
104
177

@Banny As suggested by Carsten Løvbo Andersen you can use the [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) attribute _"A string that defines the file types the file input should accept."_ at `` element to _suggest_ the file type that the user is able to upload ``. However, the user can ignore that suggestion. Validate the file at the server. Reliance on client-side validation has issues – guest271314 Feb 05 '19 at 08:58

JQuery how to validate file type by getting it's extension using `file.type` function?

1 Answers1