I didn't build this part of our site but because the other developer has been pulled into another project it's my job to fix this issue. Basically we're using the basic blue imp file uploader plugin to submit files via ajax. When I pick a file for the first time and upload it everything works fine. When I pick a new file and upload it, it submits twice. One with the first file and one with the second file. If I pick a new file after that it will submit 3 times, etc. The same thing happens if I discard the file instead of upload it. I can't, for the life of me figure out what's triggering it to run multiple times and I haven't had any help online.
<section class="add-document editable">
<form id="add-new-doc" enctype="multipart/form-data" action="" data-project="projectid" class="document-upload">
<div class="hidden">
<div class="row">
<div class="col-xs-12">
<h3 class="editcue">Add a new document</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label for="item-title">Document Title</label>
</div>
<div class="col-xs-12 col-sm-8">
<input type="text" name="item-title" placeholder="Title" value="" data-type="">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label for="file">Related Document</label>
</div>
<div class="col-xs-12 col-sm-8">
<div class="upload-button"><span class="alt">Selected file: Individual_Check_Stub2015_11_13_04_15_25_218.PDF</span>
<input type="file" id="fileupload" name="file" accept=".doc,.docx,.pdf,.txt,.jpg,.png,.xls,.xlsx,.csv,.ppt,.zip" data-url="">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label for="expr-or-issue-date">Date (optional)</label>
</div>
<div class="col-xs-12 col-sm-8">
<input type="date" name="expr-or-issue-date" value="" data-type="">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label for="restrict-to-subsidiary">Restrict this document (optional)</label>
</div>
<div class="col-xs-12 col-sm-8">
<!-- multi-select filterable select-->
<select data-placeholder="Choose a Subsidiary" name="restrict-to-subsidiary" multiple="" data-url="../_res/js/json/subsidiary-doc.json" class="select-restrict select2-hidden-accessible" tabindex="-1" aria-hidden="true"><option value="itemid-001" title="itemid-001">Appleton Corporation</option><option value="itemid-003" title="itemid-003">Daniel O'Connell's Sons</option></select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 503px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="-1"><ul class="select2-selection__rendered"><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="Choose a Subsidiary" style="width: 469px;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
<!-- end multi-select-->
</div>
</div>
<!-- Edit Actions: Save or Cancel Edit Buttons-->
<div class="actions">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="discarddoc"><span>Discard document</span></div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="newdoc"><span>Upload document
<!-- End C-02--></span></div>
</div>
<div class="col-xs-12 col-sm-4"></div>
</div>
</div>
<!-- End edit actions-->
</div>
</form>
</section>
Here is the js
// upload documents on submit
function uploadThis(){
var $form = $('input[type=file]').closest('form'),
userid = $form.data('user'),
url = $form.attr('action'),
uploadButton = $form.find('.new-doc span');
$('input[type=file]').fileupload({
url: url,
multipart: true,
singleFileUploads: true,
add: function (e, data) {
data.context = $form.find('.newdoc').click(function () {
console.log($(this));
data.submit();
return false;
});
},
change: function (e, data){
if($(this).attr('id') === "image-input"){}
else{
var thisform = $(this).closest('form');
$.each(data.files, function(index,file){
data.context = thisform.find('.upload-button span').text('Selected file: ' + file.name);
});
}
},
done: function (e, data) {
var thisform = $(this).closest('form');
data.context = thisform.find(".upload-button input").find(".files").empty();
$(this).wrap('<form>').closest('form').get(0).reset();
$(this).unwrap();
},
stop: function(e, data) {
},
failed: function (e, data) {
data.context.text('Unable to upload document.');
}
});
}
// document uploads
$('.document-upload').each(function(){
var userid = $(this).data('user');
//some code retracted to keep it simpler
uploadThis();
});
// end document uploads
// discard doc
$('#add-new-doc .discarddoc').on('click', function(e){
e.preventDefault();
var $this = $(this),
$form = $(this).closest('form');
$form[0].reset();
$form
.find('.upload-button span')
.text('Select Document');
});
Sorry for the formatting I tried to fix it up as much as possible. Any insight would be amazing. Thanks
I was able to fix this issue by dynamically creating the submit button inside the add method. It seems before it was adding multiple event listeners to the same button and that is what was triggering the multiple submits.