jqueryForm and empty uploads

Question

Been scratching my head for too long on this: Using jquery.form, (http://malsup.com/jquery/form) with PHP ... my $_FILES['someimage'] gets set but the error number is always UPLOAD_ERR_NO_FILE, size is also 0.

The JavaScript:

$('form input[type=file]').change(function () {
    $(this).clone().appendTo('#imgform');
    $('#imgform').ajaxForm();
    $('#imgform').ajaxSubmit({
        type: 'POST'
    });
});

Which appends to:

<form id="imgform" method="POST" action="/api/images.php" enctype="multipart/form-data"></form>

From another form which has bog-standard file inputs.

PHP logs are clean, but var_dumping $_FILES always shows that the index is set to the name of the form element ... but no data.

Thanks guys! (Sorry, I know jQuery-like questions are too frequent round these parts).

EDIT I found Clone a file input element in Javascript which contains further information and suggested alternatives.

What I decided to do is have a single form for non JavaScript browsers, and JavaScript/jQuery breaks the single form into three forms:

Head form -> File upload form -> tail form

Then I can post the file upload async, and when the tail's submit is clicked, glue the form together into a POST as they are just text fields.

Answer 1

Two things I see when I try to run this. Since you are cloning then appending, I wonder if your file input exists within the context of the form. If not, then $('form input[type=file]') will never find the element to be cloned.

Perhaps the biggest problem, though, is in the way browsers handle file upload controls. You cannot programmatically set a value on a file input control - otherwise it would be trivial as a web developer to automatically set the file upload value to "c:\Files\MyPasswordFile.txt" and automatically submit the form invisibly to the user.

When I changed your code to this:

<input type="file" name="imageFile" />
<form id="imgform" method="POST" action="/api/images.php" enctype="multipart/form-data">

</form>

<script>
  $('input[type=file]').change(function() {
    alert("ACTION");
    $(this).clone().appendTo('#imgform');
    //$('#imgform').ajaxForm();
    //$('#imgform').ajaxSubmit(
    //        {
    //          type: 'POST'
    //        }
    //    );
  }); 
</script>

I can see the behavior as above - the field is cloned and appended - but it has no value. Since part of the clone process involves setting the field value - this would violate that security restriction and thus fails.

Answer 2

You can't post files using ajax as javascript cannot access any local hard drive for security reasons.

There are ways to mimic ajax posting using iFrames. This link is a good example.

http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html