Question

I’ve put together a PHP script and small form which allows the user to upload image files. As it stands at the moment, this is activated as a Pop Up Window via a ‘onclick’ event of a button on the parent HTML page.

From research I’ve done on this site, I know that ‘Pop Up Windows’ aren’t to everyones liking, so I’m really asking for a bit of advice to see whether there is an alternative to the Pop Up Window. I’ve tried the jQuery modal Dialog, and I’ve run into all sorts of problems because I have multiple submit buttons, so I’d rather not revsit that if at all possible, although the styling of the modal dialog would be along the right lines.

Answer 1

Personally, I’m a fan of JQuery UI Modal dialog because it’s lightweight and I’m already loading UI in my apps.

But there’s more going on here….the problem isn’t the dialog, it’s the fact that you’re trying to do a file upload in a dialog. The traditional method of uploading a file is via a $_POST. This works just fine, except that your form needs an action, and that action will by default force a load of the page, even if you have it posting to itself. So in practice, if you do uploads the traditional way, no modal dialog will work.

What you’re probably looking for is to do the “Ajax” method of file upload. It’s not really ajax…..what you’d be doing is uploading to a “hidden” iFrame in the page that facilitates and upload seemingly without reload. Here’s a tutorial…there’s a million others out there.

There is also a number of jQuery plugins to make uploads easier….Uploadify is just one of them.

Note that even if you use an “asynchronous” method, you’re still under the limitations of HTML. Having an upload button or an <input type="submit"> will submit your form, albeit not correctly, making the form seem like it’s just failing uncontrollably. So, to combat this, either setup your upload button as another non-form submit element such as an <a> or just an image with an id that you call onclick via javascript. Or, make it a button and use event.preventDefault() onclick to prevent the default HTML behavior. I generally do the latter with jQuery UI button styling.