How to attach a javascript FileReader object to an html input[type="file"] element

Question

I have the following html

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

and the following javascript

    $.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 > 0) {

            var file = files[0];
            if (typeof FileReader !== "undefined" && 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);
            }
            }

    });

    });

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.

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

http://jsfiddle.net/OneManOneLaptop/5D6k2/

Do you want to programatically change the file selected by the input element? I doubt whether that's possible. — pimvdb
– pimvdb, Commented Mar 3, 2012 at 12:49
yup, so the input[type="file"] is in the same state as it would be if the file was chosen via the 'Choose File' button — Rob Holmes
– Rob Holmes, Commented Mar 3, 2012 at 13:11
From the file api docs here w3.org/TR/FileAPI/#dfn-filelist it looks like FileList is a readonly object — Rob Holmes
– Rob Holmes, Commented Mar 3, 2012 at 14:49

Rob Holmes · Accepted Answer · 2012-03-05 12:39:44Z

4

From the file api docs here http://w3.org/TR/FileAPI/#dfn-filelist it looks like FileList is a readonly object

    interface FileList {
        getter File? item(unsigned long index);
        readonly attribute unsigned long length;
    };

So. Impossible.

answered Mar 5, 2012 at 12:39

Rob Holmes

3963 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

How to attach a javascript FileReader object to an html input[type="file"] element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related