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 — nem035
– nem035, Commented Feb 23, 2016 at 17:04
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
– Murad Hasan, Commented Feb 23, 2016 at 17:06
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
– sbeliv01, Commented Feb 23, 2016 at 17:55
@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 : stackoverflow.com/questions/18299806/… — stark
– stark, Commented Feb 23, 2016 at 19:21

Community · Accepted Answer · 2017-05-23 11:53:14Z

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, 2017 at 11:53

CommunityBot

11 silver badge

answered Feb 23, 2016 at 19:12

stark

2,2562 gold badges24 silver badges35 bronze badges

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

4 Comments

Stack0verflow Over a year ago

OP said that he would like to get file type information without relying on the extension of the file name.

stark Over a year ago

@Stack0verflow : The above snippet gives the correct file type irrespective of the extension of the file name.

Stack0verflow Over a year ago

It does not when I try it multiple times.

RGI Over a year ago

@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?

Collectives™ on Stack Overflow

Get Original file type using jQuery

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related