How to attach a javascript FileReader object to an html input[type="file"] element
<p>I have the following html</p>

<pre><code>    &lt;div style="line-height:60px" class="dragzone"&gt;
        &lt;img width="60px" height="60px" src="" class="image-thumb"  style="float: left;" /&gt;
        &lt;input class="image field" name="test[0][file]" type="file" /&gt;
        &lt;input type="text" name="test[0][alt]" placeholder="Image Alt text"  /&gt;
        &lt;input type="text" name="test[0][title]" placeholder="Image Title"/&gt;
    &lt;/div&gt;​
</code></pre>

<p>and the following javascript</p>

<pre><code>    $.event.props.push("dataTransfer");

    var drag_zones = jQuery(".dragzone:not(.bound)");

    // for each dragzone
    jQuery(drag_zones).each(function(index, domEle) {
    jQuery(this).bind("dragenter dragover", false).bind("drop", function(evt) {

        // dont do whatever you were going to do 
        evt.stopPropagation();
            evt.preventDefault();

        // get the preview image
            var i = jQuery(this).find("img");

        // get the input 
        var f = jQuery(this).find('input[type="file"]');

            var files = evt.dataTransfer.files;

            if (files.length &gt; 0) {

            var file = files[0];
            if (typeof FileReader !== "undefined" &amp;&amp; file.type.indexOf("image") != -1) {
                    var reader = new FileReader();

                reader.onload = function(evt) {
                    // add the image data to the image preview
                    jQuery(i).attr("src", evt.target.result);
                    // I want to attach the file data to the input field (f) here
                   jQuery(f).css("background","red");
                };
                reader.readAsDataURL(file);
            }
            }

    });

    });​
</code></pre>

<p>After dragging an image from windows explorer into the dragzone around the elements i have the preview image being updated fine, i now want to attach this file to the actual html form element so it is sent along with a form (not shown) and the input changes from 'no file chosen' to the path name.</p>

<p>Ive searched around but cant find exactly what i need, ive made a jsfiddle of the above code here.</p>

<p><a href="http://jsfiddle.net/OneManOneLaptop/5D6k2/" rel="nofollow">http://jsfiddle.net/OneManOneLaptop/5D6k2/</a></p>
