0

I'm using a function to Validate the size of an uploaded image. That works fine, now I also want to check if the image is wider than certain pixels (like 1280 pixels). But the var width still gives zero. I already tried to use outerwith, innerwidth and file.files[0].width;

function ValidateSize(file) {
    var FileSize = file.files[0].size / 1024 / 1024; // in MB
    var NewFilze = FileSize.toFixed(2);

    var height = file.height;
    var width = file.width;

    if (FileSize > 13) {
        alert("The file size of your picture (" + NewFilze + " MB) exceeds the maximum allowed filesize (12,5 MB). Still problems with resizing your pictures? Use for example www.imageresize.org.");
    }else if(width < 1280){
        alert("The width of your image  (" + width + " pixels) is lower than the required minimum width (1280 pixels)");
    }else{

    }
}

Thanks in advance

Glenn S
  • 21
  • 7
  • 1
    what does the file object look like at this point. Does it have a .width and a .height? – FujiRoyale Jan 31 '20 at 08:15
  • For size you take the data from `file.files[0]` but for height and width you just check `file`? What *is* `file` and what is `file.files` supposed to be - what's the distinction? – VLAZ Jan 31 '20 at 08:19
  • As it can detect the file size, I assume it can detect the with and height. – Glenn S Jan 31 '20 at 08:19
  • 3
    Maybe maybe not. Likely the file object is just a file. You may want to consider converting the file into an image first. – FujiRoyale Jan 31 '20 at 08:23
  • Look into using FileReader and then converting into Image. This question covers it pretty thoroughly: https://stackoverflow.com/questions/7460272/getting-image-dimensions-using-javascript-file-api – Evgenii Klepilin Jan 31 '20 at 08:42

2 Answers2

2

You need to convert the file into an image :

Here is an example of How to convert a file to img to get width and hight :

function getSize(file) {
    const img = new Image();
    var file = file.files[0];
    var reader = new FileReader();
    reader.addEventListener("load", function() {
        img.src = reader.result;
    }, false);
    const promise = new Promise((resolve, reject) => {
        img.onload = () => {
            console.log(img.naturalWidth, img.naturalHeight);
            resolve([img.naturalWidth, img.naturalHeight]);
        };
    });
    if (file) {
        reader.readAsDataURL(file);
    }
    return promise.then(res => [img.naturalWidth, img.naturalHeight]);
}

You can do some changements to make it work for your case. Good luck

Oussail
  • 2,200
  • 11
  • 24
1

Without being able to test this on my own I would suggest trying something like the following: 

function ValidateSize(file) {
  var FileSize = file.files[0].size / 1024 / 1024; // in MB
  var NewFilze = FileSize.toFixed(2);
  var reader = new FileReader();

  reader.readAsDataURL(fileUpload.files[0]);
  reader.onload = function (e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function () {
      var height = this.height;
      var width = this.width;

    if (FileSize > 13) {
       alert("The file size of your picture (" + NewFilze + " MB) exceeds the maximum allowed filesize (12,5 MB). Still problems with resizing your pictures? Use for example www.imageresize.org.");
    }else if(width < 1280){
       alert("The width of your image  (" + width + " pixels) is lower than the required minimum width (1280 pixels)");
    }else{

    }
}

I should note this is untested and dependent on your js running on some browser (ideally chrome or FF). If it is server side I think visibleman is linked the best answer.

Good luck and happy hacking!!

Credit where its due SO post where I got the image code

FujiRoyale
  • 762
  • 10
  • 26