Attempting addFile in plupload using file type input field

Question

Attempting addFile in plupload using file type input field

I have successfully used the plupload function with its browse button, but now I'm trying to use this utility to resize files on an existing web page, where the user selects the files on his own. From the documentation, I realized that the addFile method for uploader will work with input fields, but I did not succeed.

The field is defined as:

<input id="SelectUserFile1" name="userfile1" type="file" accept="image/gif,image/jpeg" aria-labelledby="SelectUserFile1-ariaLabel" title="Browse for file on your computer" />

and I add the file with:

uploader.init();
uploader.addFile(document.getElementById('SelectUserFile1'));
alert('files total: ' + uploader.files.length);
uploader.start();

This seems to fail, since my FilesAdded method is not being called, and uploader.files.length is 0. My loader is defined as follows:

var filecount = 1;
var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',
    url : 'test_file_upload.php',
    flash_swf_url : '../testjs/Moxie.swf',
    silverlight_xap_url : '../testjs/Moxie.xap',
    resize: {
        width: 500,
        height: 500
    },
    filters : {
        max_file_size : '5mb',
        mime_types: [
            {title : "Image files", extensions : "jpg,gif"}
        ]
    },

    // PreInit events, bound before any internal events
    preinit: {

        UploadFile: function(up, file) {
            //log('[UploadFile]', file);

            // You can override settings before the file is uploaded
            up.settings.url = 'test_file_upload.php?cnt=' + filecount;
            filecount = filecount + 1;
        }
    },

    init: {

        FilesAdded: function(up, files) {
            alert('files added: ' + up.files.length);
        },

        Error: function(up, err) {
            alert( err.message + ' File not included.' );
        }
    }
});