Get Original file type using jQuery

Question

How can I check the file type (original type) with JQuery? I mean even if I change the file format manually from .pdf to .jpg, I should get .pdf because this file is PDF document not picture. I am using the following code for checking file type :

var fileExtension = ['jpeg', 'jpg', 'png'];
if ($.inArray(file_input.val().split('.').pop().toLowerCase(), fileExtension) == -1) {
  alert("Wrong format!");       
}
else {
  alert("Correct format!");
}

Possible duplicate of [Validation of file extension before uploading file](http://stackoverflow.com/questions/4234589/validation-of-file-extension-before-uploading-file) — nem035, Feb 23 '16 at 17:04
Possible duplicate of [Check file type when form submit?](http://stackoverflow.com/questions/7977084/check-file-type-when-form-submit) — Marcos Pérez Gude, Feb 23 '16 at 17:05
i don't have any idea is it possible or not?? But if just need the current file extension then `var ext = fileName.split('.').pop();` will be okey. — Murad Hasan, Feb 23 '16 at 17:06
upvote - Cause this is a unique question, if it is possible then i will make a note of it. — Murad Hasan, Feb 23 '16 at 17:09
Thanks guys but I have already seen all above given links but all of them just checking the extension from file name but not real file format. Is there any suggestion how to achieve this goal? Thanks! — Umidjon Urunov, Feb 23 '16 at 17:18
I think the only reliable way of fetching the `mime-type` would be on the server so perhaps an AJAX request is necessary to return the `mime-type` from the server. — sbeliv01, Feb 23 '16 at 17:55
I am not sure if client side JavaScript would allow you to do this. But you will have to read the metadata (the header for example) of a given file to determine its type. However, there is no standard, to my understanding. See here: http://stackoverflow.com/questions/4177922/how-to-determine-file-type — Stack0verflow, Feb 23 '16 at 17:59
@Stack0verflow How can I validate the file content with PHP without uploading it into directory? I tried to get temp file location after selecting file with file input but got an error. — Umidjon Urunov, Feb 23 '16 at 18:27
@UmidjonUrunov : using jquery itself, you can get the filetype and you can then use it to validate your code, check my answer below or the answer here : http://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload?answertab=active#tab-top — stark, Feb 23 '16 at 19:21
@UmidjonUrunov, This may help you. [check it out](http://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload) — Murad Hasan, Feb 24 '16 at 03:38

score 2 · Answer 1 · edited May 23 '17 at 11:53

2

Borrowing the JS from @Drakes answer here.

I've posted the JQuery Implementation for the same below :

$('#show').on("click", function() {
  var files = $("#your-files")[0].files[0];
  var temp = "";
  temp += "<br>Filename: " + files.name;
  temp += "<br>Type: " + files.type;
  temp += "<br>Size: " + files.size + " bytes";
  $('#details').html(temp);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="your-files" multiple>
<button id="show">
  Show Details
</button>
<div id="details">
</div>

You can then use the file type that you get using the above jQuery in the control statements of the code posted in your question.

edited May 23 '17 at 11:53

Community

1
1

answered Feb 23 '16 at 19:12

stark

2,246
2
23
35

OP said that he would like to get file type information without relying on the extension of the file name. – Stack0verflow Feb 24 '16 at 14:59
@Stack0verflow : The above snippet gives the correct file type irrespective of the extension of the file name. – stark Feb 24 '16 at 15:45
It does not when I try it multiple times. – Stack0verflow Feb 24 '16 at 15:47
@stark, I changed extension of jar file to .txt means original file is jar but i changed to text file manually so file type should be come jar but is showing only text/plain so its not working. can you update your answer? – RGI Aug 16 '17 at 10:30

Get Original file type using jQuery

1 Answers1