I've modified this example to better suit my needs in handling multiple custom file uploads on the same page. It also renders the filename or truncates if it is too long for each of the 3 file fields. This solution works well however, I think it could be DRY'd out a lot? This is where I landed:
$(document).on('change', '.compliance-guide :file', function() {
var input = $(this),
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [label]);
});
$(document).on('change', '.compliance-other :file', function() {
var input = $(this),
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [label]);
});
$(document).on('change', '.agreement-file :file', function() {
var input = $(this),
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [label]);
});
$(document).ready( function() {
$('.compliance-guide :file').on('fileselect', function(event, label) {
var log = label;
if( log.length > 14 ) {
$('.compliance-guide-name').html(log.substring(0,14)+'...');
} else {
$('.compliance-guide-name').html(log);
}
});
$('.compliance-other :file').on('fileselect', function(event, label) {
var log = label;
if( log.length > 14 ) {
$('.compliance-other-name').html(log.substring(0,14)+'...');
} else {
$('.compliance-other-name').html(log);
}
});
$('.agreement-file :file').on('fileselect', function(event, label) {
var log = label;
if( log.length > 14 ) {
$('.agreement-file-name').html(log.substring(0,14)+'...');
} else {
$('.agreement-file-name').html(log);
}
});
});