JQuery FileUploadUI Download a single file

Question

im using fileuploadui ( https://github.com/blueimp/jQuery-File-Upload ) to upload files for my site, but I would like to do this to upload only 1 file, not a few.

I removed the "multiple" from the html input tag (input type = "file" name = "file"), but the queue still accepts more than 1 file.

I mean, every time someone clicks the Browse File button, he replaces the current queue with a new file. he will be forever 1 file in the queue.

how to use replaceNode function?

thanks.

Answer 1

Try the following:

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

Hope this works ^^

Answer 2

Thanks @TopDev,

• Delete attribute "multiple" <input type="file" name="files[]">
• Add an identifier 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(); %} {% for (var i=0, file; file=o.files[i]; i++) { %} {% $('#filelistholder').empty(); %}

Answer 3

I added the following to the add function:

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

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

Hope this helps.

Thus, the full code will look like this:

 <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> 

Answer 4

The answer is angular and typescript (easy to 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 the controller (typescript)

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

maxNumberOfFiles: 1, deleting "multiple" and setting name = "file" was also not intended.

Answer 5

How to limit the actual input field to one file download?

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

Answer 6

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