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.

Kent · Accepted Answer · 2011-05-12 08:37:37Z

4

Try this:

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

Hope it works ^^

answered May 12, 2011 at 8:37

Kent

2,9502 gold badges27 silver badges42 bronze badges

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

2 Comments

khalil Over a year ago

doesnt work. tried it before. i can still click on browse button, choose 1 file, and it will still add into the queue.

concept47 Over a year ago

this only works with the ui version of jquery upload, it won't work with the basic jquery.fileupload.js plugin

user2038560 · Accepted Answer · 2015-07-01 20:07:07Z

3

Thanks to @TopDev,

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

answered Jul 1, 2015 at 20:07

user2038560

1371 silver badge7 bronze badges

Comments

Cleb · Accepted Answer · 2015-07-01 20:51:26Z

2

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>

edited Jul 1, 2015 at 20:51

Cleb

26.3k23 gold badges129 silver badges164 bronze badges

answered Jan 19, 2014 at 21:26

Adrian Hedley

1,5691 gold badge16 silver badges29 bronze badges

2 Comments

qubit Over a year ago

Could you provide your html code for this? Your solution seems very clean and makes much sense, but I'm a bit confused what exactly is the #filelistholder? do you write this div yourself? I am using $("table tbody.files").empty();...Is this the same thing?

qubit Over a year ago

ok nvm I got this.Thanks for sharing. It cleared up a lot of things for me.

vgoreiko · Accepted Answer · 2015-10-02 08:47:16Z

1

Answer for angular and typescript (easy adapt for non typescript). This works for me.

<span class="btn btn-success fileinput-button" type="reset" ng-click="ctrl.formReset(this)">
<i class="glyphicon glyphicon-plus"></i>
<span>Add file...</span>
<input type="file" name="file" ng-disabled="disabled">
</span>

In controller (typescript)

formReset(uploadScope):void{
    uploadScope.clear()
    uploadScope.queue = []
}

maxNumberOfFiles: 1, removing "multiple" and setting name="file" also was not anought.

answered Oct 2, 2015 at 8:47

vgoreiko

454 bronze badges

1 Comment

Luke Rice Over a year ago

I tried all of the other suggestions for an angular implementation and nothing worked, but this did. Thanks!

RonanOD · Accepted Answer · 2013-10-27 17:50:44Z

0

What about restricting the actual input field to single file upload?

<%= f.file_field :image, :multiple => false %>

answered Oct 27, 2013 at 17:50

RonanOD

8851 gold badge10 silver badges19 bronze badges

Comments

Omu · Accepted Answer · 2016-05-09 14:05:52Z

0

this is how I did it:

    //flag for limiting to 1 single file 
    var uploading;
    $('#file1').fileupload({
        dataType: 'json',
        done: function(e, data) {
        //...
        },
        progressall: function(e, data) {
        },
        add: function (e, data) {
            if (!uploading) {
                uploading = 1;
                console.log('add');
                data.submit();
            } else {
                console.log('cancel');
            }
        },
        always: function() {
            uploading = 0;
        },
        sequentialUploads: true
    });

answered May 9, 2016 at 14:05

Omu

71.6k95 gold badges286 silver badges413 bronze badges

Collectives™ on Stack Overflow

jQuery FileUploadUI Single File Upload

6 Answers 6

2 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related