Control image upload size in textarea of HTML Form

Question

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>

Answer 1

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="" /> 

Answer 2

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...