Question

I’m attempting to build an extremely simple, but cross-browser compatible, asynchronous file uploader, as a jQuery plugin and I’m having a bit of trouble getting the file to upload.

This plugin is based on the principle of submitting the form with the file input through an iframe. Bellow is the plugin code:

(function( $ ) {
    $.fn.asyncFileUpload = function(options) {

        // Create some defaults, extending them with any options that were provided
        $.fn.asyncFileUpload.defaults = {
            action : "",
            onStart : function(){},
            onComplete : function(){}
        };

        var settings = typeof options != "undefined" ? $.extend($.fn.asyncFileUpload.defaults, options) : $.fn.asyncFileUpload.defaults;        

        return this.each(function(){

            var date = new Date(),
                form = $(this), 
                formID = form.attr("id"),               
                iframe = $(document.createElement("iframe")),
                iframeID = "iframe-"+date.getTime();    // generate a unique ID for every iframe created (one iframe is associated with a single HTML form)

            iframe.attr({"id":iframeID, "name":iframeID}).css("display","none").appendTo("body");
            form.attr({ "target" : iframeID, "action" : settings.action });

            form.on("submit", function(event){
                iframe.load(function(event){
                    alert("iframe loaded");
                });   
            });

        });
    };
})( jQuery );

The HTML:

<form id="image-upload-form" method="post" enctype="multipart/form-data">
     Browse: <input type="file" id="image-to-upload" style="margin-left:5px;" />
     <input type="hidden" name="tag" value="a file" />
     <input type="submit" value="submit" />
</form>

<script>
     $("#image-upload-form").asyncFileUpload({
          action : "uploadimage.php"
     });
</script>

And on the server side, I put together just a minor script to check what’s going on with the file:

<?php   
    echo "tag: ".$_POST["tag"]; echo "<br />";
    echo "error: ".$_FILES["image-to-upload"]["error"];
?>

And the result is that the file doesn’t upload, but the somehow the “tag” input value reaches the server script, because it’s returned (I’m testing this using Chrome’s code inspector -> Network).
I say that the file doesn’t get uploaded because the returned value of $_FILES["image-to-upload"]["error"] is empty and neither does Chrome’s progress bar appear, despite the fact that the files I’ve been trying to upload are rather big.

What is it that I’m doing wrong here?

Answer 1

The file input doesn’t have a name attribute – this will cause it to not be submitted.

Give your file input a name so it can be accessed in the $_FILES array in the script.

<form id="image-upload-form" method="post" enctype="multipart/form-data">

     Browse: <input type="file" 
                    id="image-to-upload" 
                    style="margin-left:5px;" 
                    name="image-to-upload"/>

     <input type="hidden" name="tag" value="a file" />
     <input type="submit" value="submit" />
</form>

Further reading here: http://www.w3.org/TR/html401/interact/forms.html#control-name

I can’t find a specific part of the spec that clarifies what happens when an input is submitted with no name, but atleast in the case of Firefox and file inputs it seems the data does not get sent.