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?

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>