We Keep Coding

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

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;
}
},

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

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]);
}

Control image upload size in textarea of HTML Form

I'm using the following WIZWIG editor "http://js.nicedit.com/nicEdit-latest.js" posting into the below HTML form. I want to control the size of images that are uploaded. Image size should be something like 200px height, 300px width. I've tried CSS, HTML & JavaScript to no avail. Can't figure this out...
<style>
.nicEdit-main{
background-color: white;
}
</style>
<script type="text/javascript" src="http://js.nicedit.com/nicEdit- latest.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas({buttonList : ['bold','italic','underline','strikeThrough','html','forecolor','link','upload','unlink','removeformat']}) });
</script>
<form name="comments" action="<?php echo $_SERVER['PHP_SELF']; ?>"method="post" onsubmit="return checkForm();">
<?php if ($isGuest) { ?>
Comment:<br><br>
<div style="background: #fff;">
<textarea style="width: 100%;" name="comment" cols="111px" rows="4">disabled for guest account</textarea>
</div>
<input type="submit" name="action" disabled value="Add Comment" />
<?php } else { ?>
Comment:<br><br>
<div style="background: #fff;">
<textarea style="width: 100%;" name="comment" cols="111px" rows="4"></textarea>
</div>
<input type="submit" name="action" value="Add Comment" />
<?php //header("Location: test.php");
} ?>
</form>

Although this was not possible few years ago(you had to send the file to the server side to be able to process file information) now it is do possible with the FileReader() object and pure JS.
You use the .files[0] to get the file then create a temporary img object on the DOM(to be able to do the process) and then assign the file to that DOM object(with the help of FileReader())and then you just compare the file width or height. This is an example how you can do it:
imgfile.onchange = function(e) {
var oFile = document.getElementById("imgfile").files[0]; //Get the selected file by the user
var img = document.getElementById("imgdom"); //get the reserve image element on the dom to be able do all our processing with this object type
document.getElementById("imgdom").style.display = "none";//This is optional if you want to show or not the image to the user
var reader = new FileReader(); //This is the magic object that allows you to process a file on the client side
reader.onload = function (e) {
console.log(e.total); // file size
img.src = e.target.result; // putting file in dom without server upload.
alert(img.width);
//Do what ever condition you want here
//if img.width > 200 do this, else do that
};
reader.readAsDataURL(oFile );
//return false;
};
<form method="post" enctype="multipart/form-data" onsubmit="return false;">
<input type="file" name="imgfile" id="imgfile">
</form>
<div>
<img id="imgdom" src="" />

This issue has been resolved with the following CSS Code:
.nicEdit-main img {
width: 350px;
}
img[src*="http://somedomain.com"] {
width: 350px;
}
Thanks to all who commented...

Uploading multiple images within a json call

I'm trying to modify a jquery script I use often in my websites to integrate image uploads within it. Maybe it's a script that cannot be modified for this purpose otherwise I could do with some help. I dont really understand the 64 bit encoding for json and if it is possible to upload an image with json data in parrallel so I can benefit from the success responce without reloading pages. I would also like to avoid the plugins such as uploadify etc if possible. Also I'm uploading to folders/diectories listed in my html code, using checkboxes to hide and show elements and to identify the folder path for images.
my jquery
<script type="text/javascript">
$(document).ready(function() {
var checkboxes = $("input[type='checkbox']");
checkboxes.click(function() {
$('#add_photo_but').show();
$('#photoChoose').show();
$('#addPhotoInstruction').hide();
});
$(".add_photo_but").click(function() {
var file = $("image").files[0];
var image = $("#addImage").val();
$.post("includes/add_photo.inc.php",{ checked_box : $('input:checkbox:checked').val(), image:image, imageFile:file},function(json) {
if(json.result === "success") {
$(".addPhoto_result").html(json.message);
//$(".checkbox")[0].remove();
$("input:checkbox:checked").parent().remove();
// $('.add_intern').get(0).reset();
}else{
$(".addPhoto_result").html(json.message);
}
});
});//submit click
});//doc ready
</script>
html form
<div id="photos">
<form enctype="multipart/form-data" name="add_photo" class="add_photo">
<?php
while($row = mysqli_fetch_array($result4)){ ?>
<div class="photoAlbum_list">
<div id="#photoAlbumId" class="albumPhoto"><?php echo $row['album_name'];?></div>
<img src="image/mandinga_folder.png" class="folder"/>
<input type="checkbox" class="photoAlbumId" id="photoAlbumList" value="<?php echo $row['albumid'];?>"/>
</div>
<?php } ?>
</form>
<div id="addPhotoInstruction" style="display:block">Please choose an Album to Upload Photo's to</div>
<div class="addPhoto_result"></div>
<input id="photoChoose" type="file" multiple style="display:none"/>
<input type="button" id="add_photo_but" class="add_photo_but" name="add_photo_but" value="Add Photo" form="add_photo" style="display:none"/>
</div>

ASP.NET On Response.Write to iframe complete

I'm developing an application in ASP.NET that is designed to create reports and download them to the client. I'm doing this using an iframe that is posted to the server. Once operations are completed, the report is downloaded to the client using Response.Write().
In the meantime, on the client, I am displaying a GIF to indicate that the server is generating the report. When the report is successfully created and has finished writing to the client, I would like to update the iframe accordingly, and hide the GIF.
Is there any way of determining if the response.write() was successful in the iframe's parent page?
Parent:
<iframe id="iframe1" src="import-upload.html" width="100%" height="300" onload="loadFrame()" frameborder="0">
function redirect(type) {
iframe.getElementById('inputType').value = list.options[list.selectedIndex].value;
iframe.getElementById('inputAction').value = type;
document.getElementById("divOptionsContainer").style.display = "none";
document.getElementById("imgLoadingGif").style.display = "";
iframe.getElementById('frmUpload').submit();
}
Iframe Source:
<div align="center">
<form id="frmUpload" action="AjaxFileHandler.aspx" method="POST" enctype="multipart/form-data" target="_self" style="margin-bottom:20px;">
<input id="fileupload" type="file" name="files[]" />
<input type="hidden" id="inputAction" name="action"/>
<input type="hidden" id="inputType" name="type"/>
</form>
<button id="btnReport" type="button" onclick="parent.redirect('Report')" style="">Report</button>
<button id="btnUpload" type="button" onclick="parent.redirect('Import')" style="">Import</button>
</div>
This is my first post. Please let me know if more information is needed. Thanks in advance.

You can listen to onload event of iframe:
function redirect(type) {
iframe.getElementById('inputType').value = list.options[list.selectedIndex].value;
iframe.getElementById('inputAction').value = type;
document.getElementById("divOptionsContainer").style.display = "none";
document.getElementById("imgLoadingGif").style.display = "";
iframe.onload = function() {
document.getElementById("divOptionsContainer").style.display = "";
document.getElementById("imgLoadingGif").style.display = "none";
}
iframe.getElementById('frmUpload').submit();
}

Through image I browsed images but not able to submit the same

Through image I want to browse images for that I have taken div and hided the field img_photo and called a function i.e OpenFileBrowser() on anchor tab. I am able to browse images but not able to submit the form.
HTML :
<form name="frmimg" id="frmimg" method="post" action="abc.php">
<div style="display:none"><input type="file" name="img_photo" id="img_photo" value="" accept="image/gif, image/jpeg, image/jpg, image/png"></div>
<a href="wap_statusupadate.php?img=<?php echo $_REQUEST['hid_img']; ?>" onclick="return OpenFileBrows
er('frmimg')"><img src="images/photo-icon.jpg" /></a>
</form>
Javascript :
function OpenFileBrowser(obj)
{
document.getElementById('img_photo').click();
var img = document.getElementById('img_photo').value;
if(img!="")
{
document.obj.submit();
}
else
{
return false;
}
}

Try adding
document.getElementById('frmimg').submit();
to the end of function OpenFileBrowser(obj).