CODEWITHSUNDEEP
jqueryfile-upload
khalil
khalil

Reputation: 329

jQuery FileUploadUI Single File Upload

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.

Upvotes: 7

Views: 14680

Answers (6)

Omu
Omu

Reputation: 71188

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
    });

Upvotes: 0

vgoreiko
vgoreiko

Reputation: 45

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.

Upvotes: 1

Adrian Hedley
Adrian Hedley

Reputation: 1569

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>

Upvotes: 2

user2038560
user2038560

Reputation: 137

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(); %}

Upvotes: 3

RonanOD
RonanOD

Reputation: 885

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

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

Upvotes: 0

Kent
Kent

Reputation: 2960

Try this:

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

Hope it works ^^

Upvotes: 4

Related Questions