From bca7bd7fb0165fc47b95039fa5b11b2c58a4d635 Mon Sep 17 00:00:00 2001
From: Alice Heaton <aliceh@aptivate.org>
Date: Tue, 21 Jul 2015 16:05:04 +0100
Subject: [PATCH] Make the file upload button work when javascript is disabled.
---
.../hid/static/hid/js/automatic_file_upload.js | 12 ++++++++++++
django/website/media/less/internews.less | 8 +++++++-
django/website/media/less/sources.less | 6 +-----
3 files changed, 20 insertions(+), 6 deletions(-)
diff --git a/django/website/hid/static/hid/js/automatic_file_upload.js b/django/website/hid/static/hid/js/automatic_file_upload.js
index a72b5151..35a49bc0 100644
--- a/django/website/hid/static/hid/js/automatic_file_upload.js
+++ b/django/website/hid/static/hid/js/automatic_file_upload.js
@@ -7,6 +7,11 @@
* - The form element should have a 'auto-upload-file' class;
* - The upload button replacement should have an 'upload-button' class
* (optional, we can also use the normal upload button).
+ * - The file input tag should be a descendant of a .form-group element
+ * (optional, this will be hidden if we have a button replacement).
+ *
+ * This is progressive enhancement, so the upload-button should be hidden
+ * to be begin with, and will only be displayed if the javascript executes.
*
* Note that this will only work if the form has one file upload element.
*
@@ -17,6 +22,13 @@
var $form = $(this);
var $button = $('.upload-button', $form);
var $file_input = $('[type="file"]', $form);
+ var $input_group = $file_input.closest('.form-group');
+
+ // Hide the file input group and show the alternative button.
+ if ($button.length > 0) {
+ $input_group.hide();
+ $button.show();
+ }
// Auto-submit
$file_input.on('change', function(e) {
diff --git a/django/website/media/less/internews.less b/django/website/media/less/internews.less
index bff61e8d..b8733ad9 100644
--- a/django/website/media/less/internews.less
+++ b/django/website/media/less/internews.less
@@ -402,6 +402,12 @@ body {
line-height: 1.33;
}
+// Auto-upload button. Progressive enhencement, this
+// will be displayed if the associated js executes.
+.auto-upload-file .upload-button {
+ display: none;
+}
+
// Grid Demo Elements
.show-grid [class^="col-"] {
@@ -519,4 +525,4 @@ body {
.fa-fw {
color:@gray-base;
margin-right:5px;
-}
\ No newline at end of file
+}
diff --git a/django/website/media/less/sources.less b/django/website/media/less/sources.less
index 8cd494cc..54506017 100644
--- a/django/website/media/less/sources.less
+++ b/django/website/media/less/sources.less
@@ -1,9 +1,5 @@
//Styles for import, loading and sources
-.bootstrap3-multi-input {
- display:none;
-}
-
.item-source-info > h2 {
margin:15px;
}
@@ -12,4 +8,4 @@
.item-source-info > h2 > img {
max-width: 120px;
}
-}
\ No newline at end of file
+}
--
GitLab