app/assets/javascripts/fileUpload.js

(function(Modules) {
  "use strict";

  Modules.FileUpload = function() {

    let $form;

    this.submit = () => $form.trigger('submit');

    this.start = function(component) {

      $form = $(component);

      // Clear the form if the user navigates back to the page
      $(window).on("pageshow", () => $form[0].reset());

      // Need to put the event on the container, not the input for it to work properly
      $form.on('change', '.file-upload-field', this.submit);

    };

  };

})(window.GOVUK.Modules);
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/ 2016-02-02 17:28:30 +00:00			`(function(Modules) {`
			`"use strict";`

			`Modules.FileUpload = function() {`

Fix missing CSRF token on send SMS page As part of https://github.com/alphagov/notifications-admin/pull/187 the file upload pattern was changed to auto-submit once a file had been picked. The form that was submitted was, however, missing a CSRF token, as well as a submit button for non-JS users. This commit makes the file upload pattern self-contained, so that it will always include a form with a CSRF token in a hidden input and a submit button, which is then hidden when Javascript loads. 2016-02-22 21:37:32 +00:00			`let $form;`
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/ 2016-02-02 17:28:30 +00:00
Fix missing CSRF token on send SMS page As part of https://github.com/alphagov/notifications-admin/pull/187 the file upload pattern was changed to auto-submit once a file had been picked. The form that was submitted was, however, missing a CSRF token, as well as a submit button for non-JS users. This commit makes the file upload pattern self-contained, so that it will always include a form with a CSRF token in a hidden input and a submit button, which is then hidden when Javascript loads. 2016-02-22 21:37:32 +00:00			`this.submit = () => $form.trigger('submit');`
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/ 2016-02-02 17:28:30 +00:00
			`this.start = function(component) {`

Fix missing CSRF token on send SMS page As part of https://github.com/alphagov/notifications-admin/pull/187 the file upload pattern was changed to auto-submit once a file had been picked. The form that was submitted was, however, missing a CSRF token, as well as a submit button for non-JS users. This commit makes the file upload pattern self-contained, so that it will always include a form with a CSRF token in a hidden input and a submit button, which is then hidden when Javascript loads. 2016-02-22 21:37:32 +00:00			`$form = $(component);`
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/ 2016-02-02 17:28:30 +00:00
Reset file upload field when user navigates back Problem The file upload form submit automatically whenever the name of the selected file changes. If the user picks a file, and then navigates back the field is pre-filled because the page is loaded from the browser’s back/forward cache. This means that if they pick the same file again, the value of the upload field hasn’t changed, and the form won’t be submitted. Solution The solution is to clear the form field[1] if the page is being loaded from the back/forward cache. Then any time the user picks a file it represents and actual change. 1. http://stackoverflow.com/questions/8861181/clear-all-fields-in-a-form-upon-going-back-with-browser-back-button 2016-03-02 21:36:41 +00:00			`// Clear the form if the user navigates back to the page`
			`$(window).on("pageshow", () => $form[0].reset());`

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/ 2016-02-02 17:28:30 +00:00			`// Need to put the event on the container, not the input for it to work properly`
Fix missing CSRF token on send SMS page As part of https://github.com/alphagov/notifications-admin/pull/187 the file upload pattern was changed to auto-submit once a file had been picked. The form that was submitted was, however, missing a CSRF token, as well as a submit button for non-JS users. This commit makes the file upload pattern self-contained, so that it will always include a form with a CSRF token in a hidden input and a submit button, which is then hidden when Javascript loads. 2016-02-22 21:37:32 +00:00			`$form.on('change', '.file-upload-field', this.submit);`
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/ 2016-02-02 17:28:30 +00:00
			`};`

			`};`

			`})(window.GOVUK.Modules);`