Continuous file select for upload

Question

I'm creating a modal to file attachments:

I'm using input type="file" and inserting the selected files in my html:

$("#upload-anexo").change(function() {

    var files = $(this)[0].files;
    for (var i = 0; i < files.length; i++) {

        var newLine = "<div class='anexo-line'>" +
                        "<div class='anexo-nome-arquivo'>" +
                        "<i class='icon-arrow-up anexo-uploaded'></i>" +
                        files[i].name +
                        "</div>" +
                        "<div class='anexo-actions'>" +
                        "<i class='icon-trash anexo-delete'></i>" +
                        "</div>" +
                        "</div>";

        $("#modal-anexos .modal-body").append(newLine);
    }
});

The problem is that input type="file" replace the values after another file select.

I want to use the file choose multiple times and post all the files selected.

I searched about it, and input type="file" has no setter, but I need a input type="file" with all the files selected. I'm trying to figure out a solution with a input type="file" hidden (#upload-anexo-final) that is populated using the visible input (#upload-anexo).

Here is my HTML:

<div id="modal-anexos" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Attachments</h3>
    </div>
    <div class="modal-body">

        <input id="upload-anexo" type="file" multiple style="margin-bottom: 5px">
        <input id="upload-anexo-final" type="file" multiple style="display: none">

        <div class="anexo-line">
            <div class="anexo-nome-arquivo">
                <i class="icon-ok anexo-uploaded"></i>
                <a href="TODO">MyFile.pdf</a>
            </div>

            <div class="anexo-actions">
                <i class="icon-trash anexo-delete"></i>
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button id="btn-ok-anexos" class="btn azul">Save</button>
        <button class="btn cinza" data-dismiss="modal" aria-hidden="true">Cancel</button>
    </div>
</div>

How can I solve this problem? Thanks.

Answer 1

How about this approach. You have the file selector. When you select a file, you perform the UI actions (adding the files to the file list), and then you clone the file selector and add a specific name to it (upload-nexo). Then, server-side, you can iterate thru the files upload-anexo array and get all the files for each file selector.

$(document).on('change', '.upload-anexo:visible', function() {

    var files = $(this)[0].files;
    var newLine;
    
    for (var i = 0; i < files.length; i++) {

        newLine = "<div class='anexo-line'>" +
                    "<div class='anexo-nome-arquivo'>" +
                      "<i class='icon-arrow-up anexo-uploaded'></i>" +
                        files[i].name +
                    "</div>" +
                    "<div class='anexo-actions'>" +
                      "<i class='icon-trash anexo-delete'></i>" +
                    "</div>" +
                  "</div>";

        $("#modal-anexos .modal-body").append(newLine);
        
        // Clone the file selector, assign the name, hide and append it
        $(this).clone().hide().attr('name', 'upload-anexo[]').insertAfter($(this));
        
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal-anexos" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Attachments</h3>
  </div>
  <div class="modal-body">
    <input class="upload-anexo" type="file" multiple style="margin-bottom: 5px">
  </div>
  <div class="modal-footer">
    <button id="btn-ok-anexos" class="btn azul">Save</button>
    <button class="btn cinza" data-dismiss="modal" aria-hidden="true">Cancel</button>
  </div>
</div>