I am using Jquery fileupload library(blue emp, https://blueimp.net) for uploading the file.
I have table consisting fileupload control in each row.
<table id="recordTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Question Number</th>
<th>Question Text</th>
<th>Supported Document</th>
<th>File Upload Status</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ques_id">17</td>
<td class="ques_text">asddsf</td>
<td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td class="fileuploadSuccess"></td>
<td><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
</tr>
<tr>
<td class="ques_id">18</td>
<td class="ques_text">dfgdfg</td>
<td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td class="fileuploadSuccess"></td>
<td><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
</tr>
</tbody>
</table>
Onchange event for the fileupload, what I am doing here is sending data of first column i.e questionId(it's unique id column)
$('#uploadSupportingDoc').on("change", function(){
console.log("on change called!");
var questionId = $(this).parent().siblings(":first").text();
console.log("fileUpload called with Id =>"+questionId);
uploadFile(questionId);
});
asdsad
function uploadFile(questionId) {
$('#uploadSupportingDoc').fileupload({
url: 'uploadSupportingDoc.html',
formData: {questionId: questionId },
acceptFileTypes: /(\.|\/)(jpe?g)$/i,
maxFileSize: 100,
dropZone: null,
pasteZone: null,
fileInput: $(this),
dataType: 'json',
add: function(e, data){
$(this).closest('tr').children('td.fileuploadSuccess').html('<img src="./img/ajax-loader.gif" alt="Uploading..." />');
data.submit();
},
done: function (e, data){
var response = data.result.files[0];
console.log("done");
if(!response.isRequestValid)
{
window.location = "requestDenied.html";
}
else
{
if(response.status)
{
$(this).closest('tr').children('td.fileuploadSuccess').html("<span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span>")
}
else
{
$(this).parent().siblings().find(".fileuploadSuccess").html("<span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>")
}
}
},
fail: function(e, data){
console.log("failed");
console.log(data.jqXHR.responseText);
console.log(data.jqXHR+"\m");
},
always: function (e, data){
console.log("in always");
}
});
}
what is happening here is only on first attemp $('#uploadSupportingDoc').on("change", function(){ }) is getting called,
after that every subsequent change event is directly calling $('#uploadSupportingDoc').fileupload() function. why is it happening?
