CFCoding

In a project I am working on, I came across a situation where I needed to upload a file and return data from the file to populate additional form field. Generally, I would submit the form using Prototype's Ajax.Request() function. However, posting a form using that method does not post the file data. From what I have read, this is for security purposes. So, how do I go about this?

Well, this isn't the most traditional method I would have liked to take, but a Flash form was something I did not want to use. I'll start by posting my form code:

If you are familiar with the ColdBox framework, you will notice my action attribute resolves to a specific event of a handler. For a typical form, this can simply be replaced with your desired URL for posting the form data. Another attribute that will make or break this functionality is the target attribute. This tells the form which frame to post the data to. However, this attributes is depreicated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD.

Now, the way I wanted this upload to operate is whenever a user selects a file after clicking the "Browse" button, I want the form to automatically submit. This way, the user doesn't need to have to submit 2 different forms on the same page (there is another form below this one that is populated by the file data). Using Prototype, I created an observation event on the file input element that would automatically submit the form when the value of the input changes (ie: when the user has selected a file).

// Ensure the DOM has been loaded before observing any events
Event.observe(window, 'load', function() {
// Observe an 'onchange' event on the file input field
$('msq_file').observe('change', function (event) {
// Create tag attributes for hidden iframe
var attrs = {style:"display:none", src:"about:blank", name:"uploadFrame", id:"uploadFrame", onload:"completeUpload()"};
var frame = new Element('iframe', attrs);
// Add the iframe to the end of the form; this frame is hidden and only used for posting
// the form data and getting the output
$('frmMSQ').insert(frame);
// Submits the form data to the iframe via the target attributes of the cfform
$('frmMSQ').submit();
event.stop();
});
});

Following this function, you can see that I am observing the "onchange" event of the file input field. Once the event is triggered, we create an iframe within the form that the form will post itself to. So yes, we really aren't submitting the form via AJAX, but it appears as so. Once the form is submitted and the response reloads in the iframe, our "completeUpload() methid is called. The code for that method is as follows:

// Called once the iframe has loaded with the response data after the file upload has been processed
completeUpload = function() {
var resp = "";
// Gets the content of the body tag; this is the data returned after being processed
// In this case, the data being returned in plain text in JSON that will be evaluated
frame = $('uploadFrame').contentDocument.body;
resp = frame.innerHTML.evalJSON();
}

Since our response of the file upload is JSON, we need to evaluate the plain text that is in the body tag of the iframe. We do the evaluation by simply calling evalJSON() on the content of the body tag of the iframe. Below is an example of the event that handles the file output and returns plain text JSON to the iframe's body content:

To wrap up, this isn't truely AJAX, but submitting to an invisible iframe. However, due to the security involved in this process, submit the form via AJAX doesn't seem like a solution. In addition, for those following strict standards, the target attribute of the form element is invalid. While this does work seamlessly, I would love to get feedback from others of other solutions for processing the file upload.