JS - File Reader API get image file size and dimensions

Question

Hi i'm using the following code to get the upload image using File Reader API:

<script type="text/javascript">
var loadImageFile = (function () {
    if (window.FileReader) {
        var oPreviewImg = null, oFReader = new window.FileReader(),
            rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

        oFReader.onload = function (oFREvent) {

            /*get image*/
            var _img = oFREvent.target.result;
            console.log(oFREvent.target);
            /*add img to hidden input text*/
            localStorage.photo = _img;
            oPreviewImg.src = oFREvent.target.result;
        };

        return function () {
            var aFiles = document.getElementById("imageInput").files;
            if (aFiles.length === 0) { return; }
            if (!rFilter.test(aFiles[0].type)) { 
                notify("You must select a valid image file!",3400,false); return; 
            }
            oFReader.readAsDataURL(aFiles[0]);
        }

    }

})();
</script>

<form name="uploadForm">
<p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
<input type="submit" value="Send" /></p>
<input type="hidden" id="photo_1_hidden" name="photo_1"/>
</form>

it works great and it returns the base64 data of the image.

now i would like to get also the image file size and the image width and height.

Is it possible?

I tryed to log in console the file but i can't find what i'm searching for.

Any help appriciated thanks so much!

Rancor

Answer 1

Something like this?

var oPreviewImg = new Image();
oPreviewImg.onload = function(){
  console.log(this.size);
  alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size.");
  return true;
};

oPreviewImg.onerror = function(){
  alert("'" + this.name + "' failed to load.");
  return true;
}

oPreviewImg.src = "//placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150";

var xhr = new XMLHttpRequest();
xhr.open('HEAD', oPreviewImg.src, true);
xhr.onreadystatechange = function() {
    console.log('this', this);
  if ( xhr.readyState == 4 ) {
    if ( xhr.status == 200 ) {
      alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
    } else {
      alert('ERROR');
    }
  }
};
xhr.send(null);

Live version

Update Live version replaced with Fiddle, however, due to cross site scripting concerns, the size is no longer being retrieved effectively.

Neva

yeah but what about file size? – Rancor

added size, sorry about that, just missed that you'd like the size as well. If you were clever you could probably make only the one request. – Neva

You live version url got a DNS problem. – Schott

@Schott Thank you, I've changed to jsfiddle, unfortunately the size portion does not seem to be working due to cross site scripting issues – Neva

Answer 2

const reader = new FileReader()
reader.onload = (theFile) => {
     const image = new Image()
     image.src = theFile.target.result
     image.onload = () => {
         console.log('image width ===== ' + image.width + 'Image height 
          ===== ' + image.height)
     }
}
reader.readAsDataURL(item)

Beaconsfield

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Mckee

Simple and worked as part of my FileReader flow before having to load image into view. – Vanbuskirk

Answer 3

I don't believe that JS is going to be capable of getting that data without first rendering the image to the viewport. That is to say, I am unfamiliar of any method that would do what you ask in the JavaScript, or JQuery libraries. Your best bet for getting data like that is going to be rendering the image to the page in a preview capacity or using a more powerful language like PHP and using an Ajax request to get the data you're looking for.

Rich