I am using FineUploader 4.0.8
within a MVC4 project using
the jquery wrapper. Here is an example of my js code that creates a single instance of
the fineUploader and is working just fine. At this time, I have
the need for more than one instance of fineUploader, but each individual control doesn't know anything about
the other and they're rendered as needed on a page (I've seen previous questions using a jQuery .each, which won't work here). Currently, I can't seem to correctly render any upload buttons, probably due to having an ID duplicated or something. See below for how I'm using MVC's Razor to create unique variables and html IDs for that individual instance.
Here's my current implementation where I've added
the dynamic values (places where you see _@Model.{PropertyName}):
// Uploader control setup
var
[email protected] = $('#
[email protected]').fineUploader({
debug: true,
template: '
[email protected]',
button: $("#
[email protected]"),
request:
{
endpoint: '@Url.Action("UploadFile", "Survey")',
customHeaders: { Accept: 'application/json' },
params: {
[email protected]: (function () { return instance; }),
[email protected]: (function () { return surveyItemResultId; }),
[email protected]: (function () { return itemId; }),
[email protected]: (function () { return loopingCounter++; })
}
},
validation: {
acceptFiles: ['image/*', 'application/xls', 'application/pdf', 'text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'],
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp', 'csv', 'xls', 'xlsx', 'pdf', 'xlt', 'xltx', 'txt'],
sizeLimit: 1024 * 1024 * 2.5, // 2.5MB
stopOnFirstInvalidFile: false
},
failedUploadTextDisplay: {
mode: 'custom'
},
multiple: true,
text: {
uploadButton: 'Select your upload file(s)'
}
}).on('submitted', function (event, id, filename) {
$("#modal-overlay").fadeIn();
$("#modal-box").fadeIn();
[email protected]++;
$(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled');
}).on('complete', function (event, id, filename, responseJSON) {
[email protected]++;
if (
[email protected] ==
[email protected]) {
$(':input[type=button], :input[type=submit], :input[type=reset]').removeAttr('disabled');
//$("#overlay").fadeOut();
$("#modal-box").fadeOut();
$("#modal-overlay").fadeOut();
}
}).on('error', function (event, id, name, errorReason, xhr) {
//$("#overlay").fadeOut();
alert('error: ' + errorReason);
$("#modal-box").fadeOut();
$("#modal-overlay").fadeOut();
});
});
Using
the same principle as above, I've added this logic to
the template too.
Here's part of my template:
<script type="text/template" id="
[email protected]">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-upload-drop-area-selector qq-upload-drop-area qq-hide-dropzone">
<span>Drop files here to upload</span>
What I see when I use
the above code is only
the drag and drop section visible, and no button. There are no js errors either.
I do have an example that only has one instance of this control on it and
the results are
the same visible drag and drop section and no button). Any thought as to what's going on? I'll gladly update
the question if you find I'm missing something helpful. Please don't just -1 me if it's something I can easily improve or fix.
