Cancel a single file, using jquery file upload

Question

I want to cancel a single file, using jquery file upload plugin. I want to do it with the core plugin, no need for all UI stuff.

Where are the files located after I choose them on my local filesystem?

Giblets

before or during uploading? – Mas

Before uploading, I want to show a list of files that are going to be uploaded after submission. The intention is to cancel files from this list. The exact behaviour I am trying to create is also implemented in the UI version: blueimp.github.com/jQuery-File-Upload. – Giblets

Answer 1

I did it this way in my project: append upload and cancel buttons for each file

$('#TestForm').fileupload({
         dataType : 'json',
         autoUpload : false,
         add : function(e, data) {
             var file=data.files[0];
             var vOutput="";
             vOutput+="<tr><td>"+file.name+"</td>"
             vOutput+="<td><input type='button' class='fileUpload' value='upload'></td>"
             vOutput+="<td><input type='button' class='fileCancel' value='cancel'></td></tr>"
             $("#TestTable").append(vOutput)
             $(".fileUpload").eq(-1).on("click",function(){
                  data.submit();
             })
             $(".fileCancel").eq(-1).on("click",function(){
                  $(this).parent().parent().remove()
             })
         }
})

if you want you can also add buttons to upload or cancel all files like this:

    $("#fileUploadAll").on("click", function() {
        $(".fileUpload").click(); // click all upload buttons
    })
    $("#fileCancelAll").on("click", function() {
        $(".fileCancel").click(); //click all cancel buttons
    })

HTML:

<form id='TestForm'>
     <input type="file" id="FileSelect" name="files[]" data-url="yourURL.php" multiple/>
     <input type="button" value="upload all" id="fileUploadAll"/>
     <input type="button" value="cancel all" id="fileCancelAll"/>
     <table id='TestTable'></table>
</form>

Mas

Thank you for your response, it gave me a better insight. I now realize my real issue. I want to select multiple times a files from my filesystem and have it appended to a single input file (1 param) – Giblets

@RobinH you sure the $(this).parent().parent().remove() can prevent plugin from finally upload your file? – Strow

@AllanRuin the submit event is bind on this button. And if you remove the button, the file will not be uploaded. – Mas

Thanks man! Wasted half a day trying to figure out how to modify the array with files to be uploaded. – Stretch

Answer 2

Another option is mentioned here if you dont want to override the add method: Add cancel upload or abort functionality to bootstrap multiple file upload plugin

$('#fileupload').bind('fileuploadadd', function(e, data){
  var jqXHR = data.submit(); // Catching the upload process of every file
  $('#cancel_all').on('click',function(e){
        jqXHR.abort();
  });
});

It uses the jqXHR object returned from the submit method. Just dont't forget to turn off autoupload setting. If you don't want to cancel all uploads then make sure to attach the click event to the appropriate element for that file.

Dogberry

Answer 3

I had a case where we needed to run a check to see if the selected file(s) already existed on the server, and give the option to overwrite it. If the user opted not to overwrite the file, then we didn't want to upload the file to the server, but keep it in the queue incase they changed their mind, ie don't delete the whole tr.

To accomplish this, you can just add a disabled attribute to the start button in the tr you want to prevent from being uploaded. jQuery fileupload will churn through the queue as normal and ignore any rows that have a disabled start button.

Biscay