jQuery File Upload Plugin single-file-uploads removed cancel button option

Question

Hi I'm working with JQuery File Upload plugin.

It works well and I already implemented some functionality with it. However, I required uploading all files in bulk. This can be achieved setting the option:singleFileUploads: false

$('#fileupload').fileupload({
  // Uncomment the following to send cross-domain cookies:
  //xhrFields: {withCredentials: true},
  autoUpload: false,
  singleFileUploads: false,
  //sequentialUploads: true,
  previewMaxWidth: 160
  });

However, if you activate that option the cancel button for each file disappear. For instance: with singleFileUploads: true with singleFileUploads: false

I understand the logic behind disable the cancel button if asynchronous uploads are disabled.

But, I need to modify the control to still show the cancel button. I upload multiple files following several steps that require the bulk upload synchronous. The button cancel can help the user to organize and correct errors in the files required. Can anyone help me telling me, how can I modify the control to achieve this.

I think I have to modify the jquery.fileupload.js library. Unfortunately, I'm lost there.

I want to clarify something. I need to receive all the files in the same call. I have a method upload that collects them before verified.

So, the change suggested by Kumar does not help me.

Answer 1

You can try below script:

$('#fileupload').fileupload('option', {
            maxChunkSize: 10000,
            resizeMaxWidth: 1920,
            resizeMaxHeight: 1200,
            maxNumberOfFiles: 1,
            limitConcurrentUploads: 1,
            sequentialUploads: true,
            singleFileUploads:true
        });

Updated Below:

You also have add button in HTML like below

<span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>

Only Update input

From

<input type="file" name="files[]" multiple>

To

<input type="file" name="files">

Just remove [] and multiple it will disallow you to select multiple files from choose file window and this will definitely work.

Hope it helps you

Thanks