Handling modal popup file uploads in javascript dialog box based forms

So, you’ve designed a sweet UI that uses loads of AJAX and dialog boxes to ensure a mighty-fine user experience and a powerful administration tool that uses minimal page redirects by making use of fancyBox, Colorbox or another javascript dialog plugin. But wait. You need to be able to allow the user to upload a file (or more than one) using one of your dialog-based forms. Herein lies the rub – AJAX cannot help you when it comes to modal popup file uploads, so how do you keep the user on the same page without compromising your UI flow?

That, my friend, is where you call upon the mighty iframe…

Essentially we need to find a way to ensure we keep the user on the same page, submit the form and then change the dialog box content to contain the resulting output – all the things we’d be doing with an AJAX get/post request using a callback such as with jQuery’s jQuery.post method.

The Solution

What we’ll be doing is making use of a 3 tools at our disposal – HTML forms’ target attribute; a hidden iframe and some javascript to wait for and handle the result of the form submission.

Step 1 – Specify the Form Target

This is pretty straightforward – we just need to add a target attribute to our multipart form to tell it not to use the browser window to submit but instead our target (in this case the hidden iframe):

Step 2 – Add the iframe

We’ll now need a hidden iframe with the same ID as the target we specified, so go ahead and add that underneath the form:

Step 3 – Handling the Submission

We now need to handle the form submission – whereas before you might have used an event listener to bind the form submission to a function which overrides the normal submit and instead AJAX to submit it, we are not going to do that – we want the form to submit normally using our iframe as the target but we want to know when the processing is complete and the iframe has been updated. For that we need to periodically check the iframe using javascript’s  setInterval method, then replace our dialog box content with whatever the iframe’s content has been populated with:

As you can see above we don’t return false on the form submission, but we do still use an event listener to await the response from the server. The 100ms interval we’re using may be a bit overkill, so feel free to tweak that as you see fit – just don’t forget to clear the interval when you’re done with it – we don’t want to be using up unneeded memory through slack code now do we?!

Taking it Further

The above code is used for a specific form which already has the iframe and form target set in the HTML, but we could take it further by automatically modifying the target, adding the hidden iframe and adding the onsubmit event listener for all dialog forms which have an enctype attribute value of multipart/form-data with something like the below:

Anyway, hopefully that gives you the gist of what’s needed – shout if you have any queries, if not hopefully you’ll now not need to compromise your super-sweet user interfaces to make way for file uploads.

  • jason

    its opening it up in a new tab not in the hidden iframe ?

    • jason

      never mind, you need to have both ID and NAME on iframe