Ajax jQuery picture upload - newbie question whats the best way to handle this?

Question

I have a page with a form on it that the user visits to fill in some info before he signs up for a profile. Underneath the form is a preview of what the profile will look like. I have some javascript so that as the user types into the boxes in the form, the corresponding bit of their profile fills with whatever they're typing. IE they type into the 'title' form input and it will appear in the id="title" div below.

In that form I also have a field so the user can upload a photograph. When the user chooses the pic he wants to upload and closes the dialog, I'd like a resized (so that it fits my max height/width requirements) image to also appear in the preview bit below the form. All this would happen before the profile form had been submitted.

Whats the best way to go about this? I've done a fair bit of googling and while there's plenty of plugings they all seem to either do something far too complicated or miss something out. Can anyone please tell me the best way to handle this?

Thanks :)

If it makes any difference I'm using cakephp.

Side question - is there a way to make sure that when the choose file dialog opens, there is only the option to select image file types. IE all the .doc .xlt etc aren't there?

Answer 1

As to your first question, you'll have to upload the file. So you'd upload the image and store it in a temporary location that you can still stream back in an IMG element. When the user saves the form, you can then discard the temp image. You'll probably also need some sort of cron/scheduled task that cleans them up if folks never save the information and just leave.

As to your second question, nope. You can check it on the client after they have selected a file, but then I strongly recommend checking it again on the server.