Monday, December 4, 2006

Image uploading using AJAX

Well, i guess i'm feeling Hot today ;)
Two posts within 24 hours, wow... lol
Well, i've been working on a project and was looking for an existing Image uploader that uses AJAX, knowing in advanced that really it's impossible (except for FF) to use xmlHTTPRequest, i was looking for a solution that uses iFrame, while googling it, it wasn't hard to come up with Asynchronous image file upload without AJAX by Martin Konicek. So i went ahead and downloaded it. After setting it up the first time, i got real bugged that it supported only Jpeg, when you'd upload something otherwise, it will just show an X instead of the image, that is not acceptable when you are creating a system for a client. Unless you want to give him a "Do not do" list for your product.
So i started playing with the code, while reading through, found out some really annoying stuff and fixed it according to my ideology. Unfortunately while doing that i didn't know i will actually re-release the code, so i didn't comment out all the changes i've made, but the most major ones are:
Support for JPEG,GIF,WBMP and PNG. (All credit goes to Huda M Elmatsani which class i used to do the conversion 'i.e had to modify that script as well').
The script doesn't throw an error in FF saying that it can't work out the setTimeOut.
The script doesn't trying to read the uploaded file information when no file has been uploaded, and is not trying to upload a file when the uploaded file field is empty.
These are the major changes to the script. Again, all credit goes to the creators of the script, All i did is modified it to my needs and hopefully it will serve any of you too.
For the sake of it, i renamed the script to Asynchronous image file upload without AJAX + PLUS so people will be able to distinguish between the two.
The script can be downloaded in the following link. Unfortunately i had to upload it to Rapidshare, if any of you is willing to host it on their servers, i'll be very thankful.
Till next time....


Download File

Auto Resize div according to windows size.

Welcome back guys, This week i decided to share you with a small problem i've encountered this week and of course, the solution. Hopefully it will save you some time in case you'll get there too.
While developing a calendar based on AJAX, i had a div container that included all the Calendar's data.
Thus, the container was set as overflow: auto. The problem was, that i wanted the container to be with 100% width, and 100% height, however, percents didn't do the trick, so i thought what about width: auto? well, that did the trick on the width side, but on the height side i still had a problem.
After spending some time thinking about the problem, I decided to fold my sleeves, and get to work.
I wrote some code that manually alters the height of the container to fit the page size.
The code has been tested in FF 2.0 and IE 7.0.
So let's go through the solution.

Firstly, i borrowed couple classes and altered em' a little to get a reference to an object and the width,height of window (though i'm using only the height value).

function getObj(name){
if (document.getElementById){
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all){
this.obj = document.all[name];
this.style = document.all[name].style;
}
}


This class does a simple job, it gets an ID as the parameter, and contains a reference to it's obj and style.

function getWinSize(){
var iWidth = 0, iHeight = 0;

if (document.documentElement && document.documentElement.clientHeight){
iWidth = parseInt(window.innerWidth,10);
iHeight = parseInt(window.innerHeight,10);
}
else if (document.body){
iWidth = parseInt(document.body.offsetWidth,10);
iHeight = parseInt(document.body.offsetHeight,10);
}

return {width:iWidth, height:iHeight};
}

The above class contains the Height and Width of the viewable window.
Now that we've got the actual Height of the window, Let's adjust the size of our container to fit the page.
function resize_id(obj) {                           
var oContent = new getObj(obj);
var oWinSize = getWinSize();
if ((oWinSize.height - parseInt(oContent.obj.offsetTop,10))>0)
oContent.style.height = (oWinSize.height - parseInt(oContent.obj.offsetTop,10));
}


What the function is doing is rather simple. We create a reference to our container oContent. Then we get the size of the window and store it in oWinSize.
Now, we are setting the new size of our container to be the (Size of the window)-(The distance of our container from the top of the window) and the result is, our container will remain at the same starting point, however, will last until the bottom of the screen. Mission accomplished :)
Now that we have a function that resizes our container to stretch all over the screen, let's make sure we call it every time the window size changes.
we can either write
window.onresize = function() { resize_id('ID_of_Container'); } 
Or inside
<body onResize="resize_id('ID_of_Container');">

Where ID_of_Container is the ID of the container we are willing to be stretched out.

Well guys, Until next week....
P.S
Any comments are welcomed, also questions :)

Yours, Blond R.