Ajax file upload (with Iframe) returning and using the filename for additional actions
<p>In short, I want to get the filename of the file I just uploaded from inside an iFrame.</p>

<p>Let me start by telling you that I do have a more or less working ajax upload script (i.e suits my needs for now). It is very simple and goes as follows:</p>

<pre><code>&lt;form action='upload.php' method='post' enctype='multipart/form-data' target='upload_frame' id='create_file'&gt;

  &lt;iframe id='upload_frame' name='upload_frame' src='' scrolling="no"&gt;&lt;/iframe&gt;

  &lt;label&gt;Title&lt;/label&gt;
  &lt;input type='text' name='title'&gt;

  &lt;label&gt;File&lt;/label&gt;
  &lt;input type='file' name='file'&gt;

  &lt;button id='submit'&gt;Upload&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>I can 'include' this form by pressing a show-upload-form button so this form can be added to a page dynamically. Now when the submit button is clicked 'upload.php' will handle the upload and put the filename in the iFrame. Since I am the owner of the iFrame I tried using an echo with an ID in the upload.php (where $title is the 'cleaned' version of a given file).</p>

<pre><code>echo &lt;span id="file_path" path="uploads/'.$title.'"&gt;' . $title . '&lt;/span&gt;'
</code></pre>

<p>(So after I upload my iframe would look like: </p>

<pre><code>&lt;iframe 'stuffinigs'&gt;
  &lt;span id="file_path" path="uploads/somefile.png"&gt;somefile.png&lt;/span&gt;
&lt;/iframe&gt;
</code></pre>

<p>So I could get the file_path with the following submit functionality:</p>

<pre><code>$('#submit').live('click', function() {
  upload_form.find('form').attr('action', UPLOAD_SCRIPT_URL).submit();

  var path = upload_form.find('iframe').contents().find('#file_path').attr('path');

  /* I would like to do more actions with the path here */

  return false; // So it can be used with multiple forms on the screen
});
</code></pre>

<p>So the upload works, but the <code>path</code> is <code>undefined</code>, which is pretty obvious as the file submit() and upload isn't instant. Now I thought about adding a small delay, but I couldn't get that to work either.</p>

<p>So, I am hoping there is some <code>.submit(function(){ });</code> callback function (this is not the case for this version of <code>submit(function(){})</code>, but maybe there is some function or functionality of .submit() I do not know of).</p>

<p>So how can I get the <code>#file_path path attribute</code> (i.e the uploaded file path) from an iFrame, after a file has been uploaded.</p>
