I am using a multiple file upload field `<input name="filesToUpload" id="filesToUpload" type="file" multiple />` in my app. 

What I want to accomplish is to list the files the users chose and than allow them to delete any of them in the list.
At the end, when the form is submitted, I send the whole data via AJAX, as binary, using the `FormData` object.

It all works great, except for the delete part.

I know that the `FileList` attribute is read-only, so what I did was to distribute the files as values of hidden input fields, appended to each of the `li` where I list the file names. So if the user removes a `li` item, the hidden input field is gone with it, and at the end, I collect all remaining by appending them to the `FormData` object.

Problem is, every attempt I made to assign the files as values to the hidden inputs gave me weird results.

My code is something like this:

```
listFiles : function () {
    var file, files, filesList, filesLength, read;

    files = this.files;
    filesList = $('.files');
    filesLength = files.length;

    // Clear the list
    filesList.html('');

    for ( var i = 0; i < filesLength; i++ ) {
        file = files[i];

        // This is to read the content of the file
        read=new FileReader();
        read.readAsBinaryString( file );

        // When reading is finished
        read.onloadend = function() {
           filesList.append(
                    '<li>' + 
                    '<span class="fileName">' + file.name + '</span>' + 
                    '<a href="#" class="deleteAttachment">x</a>' +
                    '<input type="hidden" name="file[]" value="' + read.result +'"/>' +
                    '</li>');
         }
     }
  }

```

I just get the data from the last file, also, the DOM is broken since the data gets printed all over the place.

Demo here => <http://jsfiddle.net/zKyXC/>