jQuery FileUploadUI Single File Upload

Question

im using fileuploadui (https://github.com/blueimp/jQuery-File-Upload) to upload files for my website, but i would like to make it to upload to only 1 file, and not multiple.

i have removed "multiple" from the input html tag (input type="file" name="file"), but the queue is still accepting more than 1 file.

what i have in mind is that, whenever someone clicks on the "Browse File" button, it will replace the current queue with the new file. it will be forever 1 file in the queue.

how do i use the replaceNode function ?

thanks.

Answer 1

Try this:

$('#file_upload').fileUploadUIX({
    maxNumberOfFiles: 1
});

Hope it works ^^

Answer 2

Thanks to @TopDev,

1. Remove the "multiple" attribute <input type="file" name="files[]">
2. Add id to the table, <tbody id="filelistholder" class="files">
3. Inside the loop at the bottom, add {% for (var i=0, file; file=o.files[i]; i++) { %} {% $('#filelistholder').empty(); %}

Answer 3

I added the following in the add function:

$('#filelistholder').empty();

This will clear the file list container every time a new file is added ensuring only the last file is left.

Hope it helps.

So the full code will look as follows:

<script type="text/javascript">
        $(function () {
            $('#fileupload').fileupload({
                dataType: "json",
                url: "/api/upload",
                limitConcurrentUploads: 1,
                maxNumberOfFiles: 1,
                sequentialUploads: true,
                progressInterval: 100,
                maxChunkSize: 10000,
                add: function (e, data) {
                    ///empty fie container every time a new file is added
                    $('#filelistholder').empty();
                    //add new file
                    $('#filelistholder').removeClass('hide');
                    data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder');
                    $('</div><div class="progress"><div class="bar" style="width:0%"></div></div>').appendTo(data.context);
                    $('#btnUploadAll').click(function () {
                        data.submit();
                    });

                },
                done: function (e, data) {
                    data.context.text(data.files[0].name + '... Completed');
                    $('</div><div class="progress"><div class="bar" style="width:100%"></div></div>').appendTo(data.context);
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#overallbar').css('width', progress + '%');
                },
                progress: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    data.context.find('.bar').css('width', progress + '%');
                }
            });
        });
    </script>