xAJAX file uploader

I'm doing a quick project to some text manipulation for Jason via some ajax. He wanted to have a way to have a file uploaded and then manipulated. Not wanting to break my ajax pages, I tried to figure out how to do this with the limitations that javascript and file handling has. I think I have a pretty workable solution. I posted this over at the xAJAX fourms here.

I wanted to document this a bit better for folks who run into this issue. I solved this using two files, one of which is my page with ajax and an iframe, and the other is a simple php script which i called upload php.

The theory behind this is the following:

1) page with a hidden iframe (width&height = 0) with the file upload form submits the form to the iframe calling a php script which manipulates the file
2) the iframe php script upon completition calls a javascript function on the parent page
3) the parent page executes ajax to process/alert user

So, here are some examples

1) the file manipulation script. This is what is called in the iframe on my parent page. I've called the file "upload.php". For my purposes, I'm actually passing the content of the file back to the parent- most people are not going to need to do this, but it is a proof of concept that you can manipulate the file data easily.

// get functions
require_once("functions.inc.php");
// manipulate the text of the file being uploaded
$text = strip_text(file_get_contents($_FILES['thefile'][tmp_name]),'stripped_output');
// replace new lines in the uploaded text with slashes
$text = str_replace("\n", '\\', str_replace('"','\"', $text ));
// alert the parent page that we've got the content.
echo "parent.upload_success('$text');";

This quick function takes the incoming $_FILES data, runs it through a function that I'm using to strip out some content, and then replaces new lines with single slashes. This is necessary for javascript. If you're doing other kinds of file manipulation, this isn't necessary- it's just what I'm using it for.

2) Parent Page Javascript. I'm assuming you've already got a functional XAJAX page, so I'm just including the other parts that I need to make this work.

3) Parent Page Form. Here's the form that I'm using to submit the file into the upload.php file:

4) Parent Page iframe. Here's the iframe code that I'm using:

Final thoughts.

I'm wondering if we can build some of this functionality into XAJAX itself where we have an iframe or something tucked away in one of the js files so that we can make some simple routines to handle this kind of task with less of a "hacky" type approach. It seems like people want this kind of functionality, so figuring out ways of easily passing files via XAJAX would be nice.