1

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 (i.e 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 (i.e the uploaded file path) from an iFrame, after a file has been uploaded.

Improve this question

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Ok maybe I used the wrong words, but var path = $('#upload_form').find('iframe').contents().find('#file_path').attr('path'); is the value I ment. However it will give me an undefined, since the upload is asynchronous and the upload/submit is not done yet. I could get the filename from the title and perform the same 'cleaning' I do on the server ofcourse, so it is a usefull tip but it's between the lines :P
the upload is not done at all as your return false. I guess you want to use the $.post() function to handle stuff after the file has been uploaded. Alternatively, you might like to use a plugin plupload or other.
As I mentioned in the question, the upload succeeds. I am not using $.post() because I cannot acces $_FILES['file']['name'] as it is restricted
ok, you edited your question too. I'm always one step behind... an option could be to use $.post(), and in the post success, call a another php file with $.get to execute the postprocessing.
Ok I will look into it, but I am pretty sure you cannot process a normal <input type="file"> upload with javascript, as you cannot get to the uploaded file (i.e C:\fakepath\..\upload or something similar) as they prohibit javascript from doing such things for safety. So I am not sure if you considered that, but yes I would love to use the $.post for file uploads, but it doesn't work. However if this is the workaround for it I will check it out.
|
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.