zeronove zeronove - 2 months ago 7
jQuery Question

Conditional alerts based on file type upload

Hi all and thanks for your patient because:
first, this is my first question so let me know in i make any mistake.
second, i'm a javascript/jquery noob.

I wrote a javascript code that checks for image upload and runs various alerts based on the check's result.

The script must validate both file types (image and pdf). But for images it must validate size and dimensions. For pdf it must validate size only.

Something like "if is image then check width height and size" "if not an image but it's a pdf then check file size" and "if is not an image and if is not a pdf then retur file type error"

Now I would like to allow pdf on upload and check its size and then return an alert.

But I really don't know how to distinguish different file types programmaticaly.

Here's my original code:



jQuery( document ).ready(function($) {

var _URL = window.URL || window.webkitURL;
var submits = document.getElementsByClassName('gform_button');
var submit = submits[0];

$(".customUpload input:file").click(function(e) {
this.value = "";
submit.disabled = false;
});
$(".customUpload input:file").change(function(e) {
var file, img;
var width, height, size, sizeInMB;

if ((file = this.files[0])) {
img = new Image();
img.onload = function() {
width = this.width;
height = this.height;
size = this.size;
sizeInMB = (size / (1024*1024)).toFixed(2);
if (sizeInMB > 20) {
alert("File is to big");
submit.disabled = true;
}
if (width < 300 || height < 300) {
alert("Image size is lower than 300px");
submit.disabled = true;
};
};
img.onerror = function() {
alert( "not a valid file: " + file.type);
submit.disabled = true;
};
img.src = _URL.createObjectURL(file);
}

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="customUpload">
<form action="" class="cart">
<input type="file" id="file" /> <!-- accept="image/gif, image/jpeg, image/png, image/tiff" -->
<button type="submit" id ="submit" name="submit" class="single_add_to_cart_button gform_button">SUBMIT</button>
</form>
</div>





Many thanks to all and have a good day.

Answer

I added this code to get the extension (with the dot) and the size

var fileExtension = file.name.substr(file.name.length - 4, 4);
var fileSize = file.size;

jQuery( document ).ready(function($) {

    var _URL = window.URL || window.webkitURL;
    var submits = document.getElementsByClassName('gform_button');
    var submit = submits[0];

    $(".customUpload input:file").click(function(e) {
        this.value = "";
        submit.disabled = false;
    });
    $(".customUpload input:file").change(function(e) {
        var file, img;
        var width, height, size, sizeInMB;
        if ((file = this.files[0])) {
            var fileExtension = file.name.substr(file.name.length - 4, 4);
            var fileSize = file.size;
          
            alert(fileExtension + " file with size of " + fileSize);
          
            img = new Image();
            img.onload = function() {
                width = this.width;
                height = this.height;
                size = file.size;
                sizeInMB = (size / (1024*1024)).toFixed(2);
                if (sizeInMB > 20) {
                    alert("File is to big");
                    submit.disabled = true;
                }
                if (width < 300 || height < 300)  {
                    alert("Image size is lower than 300px");
              	    submit.disabled = true;
                };
            };
            img.onerror = function() {
                alert( "not a valid file: " + file.type);
                submit.disabled = true;
            };
            img.src = _URL.createObjectURL(file);
        }

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="customUpload">
  <form action="" class="cart">
    <input type="file" id="file" /> <!-- accept="image/gif, image/jpeg, image/png, image/tiff" -->
    <button type="submit" id ="submit" name="submit" class="single_add_to_cart_button gform_button">SUBMIT</button>
  </form>
</div>