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

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 (XHR):

var url = 'https://raw.githubusercontent.com/unikong/unikong.github.io/master/img/unikong/heart.png';
var xhr = new XMLHttpRequest();
xhr.open('HEAD', url, true);
xhr.onload = function() {
    var contentType = xhr.getResponseHeader('Content-Type');
    console.log(contentType);
};
xhr.send();

Working Example (fetch):

(async () => {
    var url = 'https://raw.githubusercontent.com/unikong/unikong.github.io/master/img/unikong/heart.png';
    const reponse = await fetch(url, {
        method: 'HEAD'
    });
    console.log(reponse.headers.get('Content-Type'));
})();

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 url = 'https://raw.githubusercontent.com/unikong/unikong.github.io/master/img/unikong/heart.png';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, 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();

Answer 2

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>