Getting a file type from URL

Question

I need To find out the file type from a url image located on my server without checking the extension, but I'm not sure how to do that without putting the image into an "input" like this:

 <input type="file" id="upload_file" accept="image/*|audio/*|video/*"/>
 <input type="submit"  onclick="sumbit()"/>

<script type="text/javascript">
    function sumbit(){
        var file_Element = document.getElementById("upload_file")
        alert(file_Element.files[0].type);
        //alert: image/png
    } 
<script>

I understand that ".type" only work with a file object, so how do I turn the url image into an object like this image of google's logo: https://www.google.ca/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png. Do I need to use a ajax/flilereader? if so, how?

Answer 1

The accept attribute value is not valid. There should be comma , instead of pipe | character separating MIME types.

You can use change event to check File object .type

<input type="file" id="upload_file" accept="image/*,audio/*,video/*"/>
 <input type="submit"  onclick="submit()"/>

<script type="text/javascript">
    var elem = document.getElementById("upload_file");
    elem.onchange = function(e) {
      console.log(e.target.files[0].type)
    }
    function submit() {
      if (elem.files.length) {
        console.log(elem.files[0].type)
      } else {
        alert("no files selected")
      }
    }
</script>

Answer 2

Use XHR to download the file, and then use the Blob api to determine the mime type:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
    //Here's the type
    console.log(xhr.response.type);
};

xhr.send();

Answer 3

Assuming your Content-Type HTTP headers are accurate, you can avoid downloading the whole file just to check the type by creating a HEAD request. Assuming you don't also need the whole file for something else, this could be a much-quicker operation, especially for large files.

Working Example:

var xhr = new XMLHttpRequest();
xhr.open('HEAD', 'https://crossorigin.me/http://placehold.it/350x150', true);

xhr.onload = function() {
    var contentType = xhr.getResponseHeader('Content-Type');
    console.log(contentType);
};

xhr.send();

Alternately, you can achieve a similar result with a regular GET request by calling abort on the AJAX request object before it loads the whole body (in any remotely recent browser anyway).

Alternate Working Example:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://crossorigin.me/http://placehold.it/350x150', true);

xhr.onreadystatechange = function() {
    // Wait for header to become available.
    var contentType = xhr.getResponseHeader('Content-Type');
    if (contentType) {
        // Stop downloading, the headers are all we need.
        xhr.abort();
        console.log(contentType);
    }
};

xhr.send();