mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-05 10:53:28 -05:00
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:
27
app/assets/javascripts/fileUpload.js
Normal file
27
app/assets/javascripts/fileUpload.js
Normal 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);
|
||||
Reference in New Issue
Block a user