How to validate an image file in a form using spry or any other tweak

Question

I have a form that checks 4 parameters, the first three are easy to check with spry and working fine. But the fourth is an upload of an image, i want to check if the extension of the file is correct or not. But there is not an option that i see that does that. How is it possible to check the extension of the file uploaded?

What i've done:

I had in an older version (only implemented a file upload and submit button) is a script that worked based on using ID, that detected the click on a sending buttong and then check the file description. When i simply link the script to the current form it does not work, also i want the same behaviour as the other form inputs with the hidden message, not with alert as it is in the code. To put the file i copied a spry text validation and changed the input type to file.

EDIT: It wasn't clear enought so i wanna make an aclaration, i want to validate the input files. Dont want the user to be able to upload anything that is not allowed in the list of extensions allowed.

Here is the part of the HTML that defines the form i use, also both methos used to do it (only used once at a time, but easy to show like this).

                <form action="../Data/Product.Insert.php" method="post" enctype="multipart/form-data" name="Insert">
                <span id="sprytextfield1">
                <label for="Name">Name</label>
                <input type="text" name="Name" id="Name" tabindex="1">
                <span class="textfieldRequiredMsg">A value is required.</span> <br>
</span> <span id="sprytextfield2">
                <label for="Ref">Ref</label>
                <input type="text" name="Ref" id="Ref" tabindex="2">
                <span class="textfieldRequiredMsg">A value is required.</span></span> <br>
                <span id="spryselect1">
                <label for="Cat">Cat</label>
                <select name="Cat" id="Cat" tabindex="3">
                <option value="test">test</option>
                </select>
                <span class="selectRequiredMsg">Please select an item.</span></span> <br>
                <span id="sprytextfield3">
                <label for="Image">Image</label>
                <input type="file" name="Image" id="Image" tabindex="4" id="image">
                <span class="textfieldRequiredMsg">A value is required.</span></span><br>
                <input name="Send" type="submit" value="Send" tabindex="5" id="insert">
            </form>
            <script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none");
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1");
var spryselect1 = new Spry.Widget.ValidationSelect("sprytextfield3","image");
 $(document).ready(function(){  
      $('#insert').click(function(){  
           var image_name = $('#image').val();  
           if(image_name == '')  
           {  
                alert("Please Select Image");  
                return false;  
           }  
           else  
           {  
                var extension = $('#image').val().split('.').pop().toLowerCase();  
                if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)  
                {  
                     alert('Invalid Image File');  
                     $('#image').val('');  
                     return false;  
                }  
           }  
      });  
 });  
            </script> 

Here is my failure to convert that code into a validation type in a spry, this only makes the whole form not to work.

'image'{
    validation: function(value, options) {
        if(value = ""){
            return false;
        }
        var extension = $('#image').val().split('.').pop().toLowerCase();  
            if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)  
            {   
                 return false;  
            }  
            return true;
    }
},

Answer 1

you can use accept="image/*" attribute to validate images Thanks

Answer 2

Here is one example using the file reader api. hope this helps Regards

$('.UploadImage').change(function (ev) { // this triggers when file upload is clicked
    .readImage(this);
});

public readImage(input) {
    let reader = new FileReader();
    let imageName = input.files[0].name.split(".").slice(0, -1).join(".").replace(/[^A-Z0-9]+/ig, "");
    let MIMEType = input.files[0].type;
    // Do validation stuff here based on the mime type
    reader.onload = function () {
       el.attr('src', reader.result);
       console.log(reader.result);
    }
    reader.readAsDataURL(input.files[0]);
}