Showing posts with label ajax. Show all posts
Showing posts with label ajax. Show all posts

Saturday, August 09, 2008

Getting the file size before upload with Ajax

One of my new projects requires users to upload pictures to our service. The problem is that everybody and their mother has a 7.2 Mpx camera. After some wikipedia research i discovered that jpeg photos are encoded at maximum of about 8.25 bits/pixel. (don't write me about decimal point bit values please :) ).

So out came the pad of paper (and calculator)...

(7.2 * 10^6) * 8.25 = 594 * 10^5 [bits]

(594 * 10^5)/8 = 7425000 bytes or 7.1 Mb per picture

Now i wanted to limit the users to 1 Mb per picture, and wanted them to upload numerous ones at that. Now from a usability point of view it would be a "epic fail" if uncle Roy waited for 5 minutes while his picture uploaded, just to discover that we won't accept it because it's too big.

Now, I imagine your saying that this problem has been solved, it's called a flash uploader (or sliverlight depending on who you get your checks from). However there is a new solution, doing file size checking without flash, using only ajax.


Thats right ma, no flash. Firefox 3 has introduced something new to our world. It's called the filelist Object. Lying deep within in it is a property called (drum roll please) fileSize, and you can use it like so...


Javascript

//Only works in firefox 3
//i Used jquery to do a dom lookup
//However you could do the ol' fashioned window.document.getElementById()
fileSize = $('#fileInput')[0].files[0].fileSize;


It returns the size of file in bytes as an integer! 

Hopefully you've learnt something new, i certainly did. I have a plan to get a similar technique to work on all browsers, however at the moment i'm being thwarted by browser security issues :(.

You can get all the files over at the lab

Andrew Carnegie
A man who dies rich, is a man who dies shamed

Thursday, February 21, 2008

Introducing JGrid 0.01: Simple inline Table Editing

Introducing Jgrid.

Basically i got fed up of the sheer amount of configuring that was required by most inline data grid editing systems. And because programmers are lazy, and big headed, i wrote my own.

Currently it's very rough around the edges, and i would imagine it's got a few bugs. Not to mention all the console/debuging code still in place. But i am releasing more for feedback purposes.

I'm always looking to improve my development practices, so please tell me what you think.

Jgrid was built on top of jquery, and is a jquery plugin. I've built it using jquery 1.2.3, which is included in the release package below. A Documentation document (PDF/ODF) is also included as well as a basic html page, which draws data from a database, [HINT: it will break when you run it on your machine!], i plan to update in version 0.02 when i have more than a single callback.

Enjoy.



Download