Add custom file upload component

The default browser file upload control is difficult to style, but looks totally
out of place.

This commit replaces it with one that has a GOV.UK style button, as a first
step.

Based heavily on this example:
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
This commit is contained in:
Chris Hill-Scott
2016-02-02 17:28:30 +00:00
parent 44045b2d09
commit 4447af3fec
9 changed files with 103 additions and 2 deletions

View File

@@ -0,0 +1,27 @@
(function(Modules) {
"use strict";
Modules.FileUpload = function() {
let $field, $button, $filename;
this.update = function() {
$filename.text($field.val().split('\\').pop());
};
this.start = function(component) {
$field = $('.file-upload-field', component);
$button = $('.file-upload-button', component);
$filename = $('.file-upload-filename', component);
// Need to put the event on the container, not the input for it to work properly
$(component).on('change', '.file-upload-field', this.update);
};
};
})(window.GOVUK.Modules);