Ajax file upload (with Iframe) returning and using the filename for additional actions

Question

In short, I want to get the filename of the file I just uploaded from inside an iFrame.

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

<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_frame' id='create_file'>

  <iframe id='upload_frame' name='upload_frame' src='' scrolling="no"></iframe>

  <label>Title</label>
  <input type='text' name='title'>

  <label>File</label>
  <input type='file' name='file'>

  <button id='submit'>Upload</button>
</form>

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).

echo <span id="file_path" path="uploads/'.$title.'">' . $title . '</span>'

(So after I upload my iframe would look like:

<iframe 'stuffinigs'>
  <span id="file_path" path="uploads/somefile.png">somefile.png</span>
</iframe>

So I could get the file_path with the following submit functionality:

$('#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
});

So the upload works, but the path is undefined , 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.

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

So how can I get the #file_path path attribute (ie the uploaded file path) from an iFrame, after a file has been uploaded.

Answer 1

use: var path = $('#upload_form').find('iframe').contents().find('#file_path').val();

for input "mutliple", something like that:

var $fileInput = $('#upload_form').find('iframe').contents().find('#file_path');
var fileInput = $fileInput[0];
if ( $this.prop('multiple') ) {        
    for ( var i=0; i<fileInput.files.length; i++) { 
        var path = fileInput.files[i].fileName;
        // do something
    }
}
else {        
    var path = fileInput.value;
    // do something
}

note that you should had the id 'file_path" in the input ( <input id='file_path' type='file' name='file'> ) or change the selector to $('#upload_form').find('iframe').contents().find('input:file');

EDIT : I think i understand better what you want to do:

$('#submit').live('click', function() {
  $form = $(this).closest('form')
  $.post($form.attr('target'), $.serialize($form), function(data) {
        var path = upload_form.find('iframe').contents().find('#file_path').attr('path');
        // do something (data is the response from 'upload_form' file
  });
  return false; // So it can be used with multiple forms on the screen
});

the $.post function replace the standard submit function. (actually you can use it witout a form). I could replace 0

Answer 2

Use setTimeout to call an additional function and check if you can get the image, else reuse setTimeout again. Then the image is uploaded and can be used for additional actions:

$('#upload_submit').live('click', function() 
{  
  upload_form.find('form').attr('action', UPLOAD_SCRIPT_URL).submit();
  setTimeout("include_image()", 2000); 

  $('#editor').focus();
  return false; // so you don't interrupt forms
});

Now in include_image you can try to request the image and if it works do the other actions

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

  if (typeof file_path !== 'undefined')
    document.execCommand('InsertImage', false, file_path);
  else
    setTimeout("include_image()", 1000);
}

Maybe if files are allways quite small the delay time could be alot lower