[thelist] restrict image size?

[jeff]

leo,

:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
: From: Leo Wiedersheim
:
: I use SAFileup to allow visitors to my
: auction site to upload images.  Using
: that component I am able to restrict the
: size in bytes, however not the size in
: pixels.  I am wondering if there is a
: way to restrict the size of an image
: that might be too large for a page
: layout.
:
: Is there any way to code this logic:
: if image width > than 400 set image
: width to 75% or some such thing?
:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

we've had this same dilemma when trying to build administrative tools for
uploading imagery to be used in layouts where size consistency is important
(e-com where thumbnails should all be the same dimensions, for example).

we're fortunate enough to be able to place system requirements on our
administrative tools (win/ie5.0) so it was relatively easy to implement.  we
can limit files by their height and width in pixels.  we can even limit
files by their actual size in bytes client-side.  if they don't meet the
criteria we set then they can't be uploaded.

due to the sheer number of hours i've devoted to this end, i don't want to
just give away the code for accomplishing it.  what i can do though is give
you the basics behind how it's done.  keep in mind that some things can only
be done in win/ie4+.

track whether or not the value of the file input has changed.  you'll have
to get creative because the file input does not support an onChange event
handler.

if it's changed, do some validation on the file contained.

1)  is it a .gif or .jpg?
2)  is the filename nothing more than
    alphanumeric and underscore?
3)  are all the characters lower-case?

ok, so it matches all your criteria so far for being a valid image file
extension, and being web-safe with it's filename.

now, you're going to need to grab it's size.  there are several things you
can do, a couple that don't work due to security restrictions or other
technicalities.

1)  create a new image object in javascript
    setting the src of that image object to
    the local file path contained in the file
    input.
2)  swap an image in the browser window
    settings it's new src to the value of the
    local path in the file input.
3)  open a new window, use document.write to
    output an <img> tag setting the value of
    the src attribute to the local path in
    the file input.
4)  same as #3, but use an iframe instead of
    a popup window.

Numbers 1 & 2 won't work because the browser won't let you read the height
and width of the image object of an image that's local and been brought into
the page by setting an image objects src value to that local path.  however,
3 & 4 will work because it doesn't care if it's an image that's been put on
the page with a seemingly hardcoded <img> tag and src attribute.

so now, grab the height and width of the image in the popup or iframe.

my(Win|Iframe).images[0].height;
my(Win|Iframe).images[0].width;

while you're at it grab the file size (in bytes) of the image as well (ie4+
only)

my(Win|Iframe).images[0].fileSize;

if the dimensions (and filesize if that matters as well) don't meet your
criteria, you'll need to give the user some feedback about that.  i prefer
to actually give them a preview of the image they're attempting to upload
with the details about it.  if it meets the criteria they're allowed to
upload, otherwise it clearly defines why it's not allowed.  to do this you
could use another popup, but for the sake of maintaining an application-like
look and feel i choose to use a modal dialogue (showModalDialog(), again,
ie4+ only).

there are additional things you could do as well like clearing the value of
the file input (not as easy as it sounds since the value property is
read-only) if it doesn't meet your criteria or the user chooses to cancel
the confirmation as opposed to OKing the confirmation (maybe they
accidentally picked the wrong image to upload).  you may wish to display a
representation (maybe scaled, maybe not) of the image they're going to
upload.

good luck,

.jeff

name://jeff.howden
game://web.development
http://www.evolt.org/
mailto:jeff at members.evolt.org