Merge pull request #148 from alphagov/file-uploader

File uploader

app/assets/javascripts/fileUpload.js

@@ -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);

app/assets/stylesheets/components/file-upload.scss

@@ -0,0 +1,36 @@
+.js-enabled {
+
+  .file-upload {
+
+    &-label {
+      @include bold-19;
+      display: block;
+      margin: 0 0 10px 0;
+    }
+
+    &-field {
+      width: 0.1px;
+      height: 0.1px;
+      opacity: 0;
+      overflow: hidden;
+      position: absolute;
+      z-index: -1;
+    }
+
+    &-field:focus + .file-upload-button {
+      outline: 3px solid $yellow;
+    }
+
+    &-button {
+      @include button($panel-colour);
+      display: inline-block;
+    }
+
+    &-filename {
+      display: inline-block;
+      padding-left: $gutter-half;
+    }
+
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -40,6 +40,7 @@
 @import 'components/big-number';
 @import 'components/banner';
 @import 'components/textbox';
+@import 'components/file-upload';
 @import 'components/browse-list';
 @import 'components/email-message';
 @import 'components/api-key';

app/main/views/styleguide.py

@@ -1,6 +1,6 @@
 from flask import render_template
 from flask_wtf import Form
-from wtforms import StringField, PasswordField, TextAreaField, validators
+from wtforms import StringField, PasswordField, TextAreaField, FileField, validators
 from app.main import main
 
 
@@ -11,6 +11,7 @@ def styleguide():
         username = StringField(u'Username')
         password = PasswordField(u'Password', [validators.required()])
         message = TextAreaField(u'Message')
+        file_upload = FileField('Upload a CSV file to add your recipients’ details')
 
     form = FormExamples()
 

app/templates/components/file-upload.html

@@ -0,0 +1,24 @@
+{% macro file_upload(field) %}
+  <div class="form-group{% if field.errors %} error{% endif %}" data-module="file-upload">
+    <label class="file-upload-label" for="{{ field.name }}">
+      {{ field.label }}
+      {% if hint %}
+        <span class="form-hint">
+          {{ hint }}
+        </span>
+      {% endif %}
+      {% if field.errors %}
+        <span class="error-message">
+          {{ field.errors[0] }}
+        </span>
+      {% endif %}
+    </label>
+    {{ field(**{
+      'class': 'file-upload-field'
+    }) }}
+    <label class="file-upload-button" for="{{ field.name }}">
+      Choose file
+    </label>
+    <label class="file-upload-filename" for="{{ field.name }}"></label>
+  </div>
+{% endmacro %}

app/templates/views/choose-sms-template.html

@@ -20,7 +20,8 @@
           ) }}
         {% endfor %}
       </fieldset>
-      {{ page_footer("Continue") }}
+
+    {{ page_footer("Continue") }}
     {% else %}
       {{ banner(
         '<a href="{}">Add a text message template</a> to start sending messages'.format(

app/templates/views/send-sms.html

@@ -1,7 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/sms-message.html" import sms_message %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/textbox.html" import textbox %}
+{% from "components/file-upload.html" import file_upload %}
 
 {% block page_title %}
   GOV.UK Notify | Send text messages
@@ -12,6 +12,12 @@
 
     <h1 class="heading-large">Send text messages</h1>
 
+    {{ banner(
+      'You can only send notifications to yourself',
+      subhead='Trial mode',
+      type='info'
+    ) }}
+
     {{ sms_message(
       template.content, name='Preview'
     ) }}
@@ -23,9 +29,7 @@
       type='info'
     ) }}
 
-    <p>
-      {{textbox(form.file)}}
-    </p>
+    {{file_upload(form.file)}}
 
     <p>
       <a href="#">Download an example CSV</a> to test with.

app/templates/views/styleguide.html

@@ -7,6 +7,7 @@
 {% from "components/sms-message.html" import sms_message %}
 {% from "components/table.html" import mapping_table, list_table, row, field %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/file-upload.html" import file_upload %}
 {% from "components/api-key.html" import api_key %}
 
 {% block page_title %}
@@ -205,6 +206,9 @@
   {{ textbox(form.password) }}
   {{ textbox(form.message, highlight_tags=True) }}
 
+  <h2 class="heading-large">File upload</h2>
+  {{ file_upload(form.file_upload) }}
+
   <h2 class="heading-large">API key</h2>
 
   {{ api_key('d30512af92e1386d63b90e5973b49a10') }}

gulpfile.babel.js

@@ -37,6 +37,7 @@ gulp.task('javascripts', () => gulp
     paths.src + 'javascripts/apiKey.js',
     paths.src + 'javascripts/autofocus.js',
     paths.src + 'javascripts/highlightTags.js',
+    paths.src + 'javascripts/fileUpload.js',
     paths.src + 'javascripts/main.js'
   ])
   .pipe(plugins.babel({