Updating file upload to be consistent with GDS

[rmbielby]

Some notes on this one

The reason that it's not picking up the GDS styling is that shiny implements it's own tailored upload input that's different from the standard html method that the GDS assumes:

Shiny

      shiny::tags$label(label, class="govuk-label"),
      shiny::div(id = paste0(inputId,"file_div"), class = "input-group",
          shiny::tags$label(class = "input-group-btn",
                     shiny::span(class = "btn btn-default btn-file",
                          buttonLabel,
                          inputTag
                     )
          ),
          shiny::tags$input(type = "text", class = "form-control",
                     placeholder = placeholder, readonly = "readonly"
          )
      )

You can see that uses the css hierarchical classes input-group, input-group-btn, btn, btn-default, btn-file and form-control. These are all standard in bootstrap.css.

GDS

The GDS html method would translate to something like the following using htmltools::tags():

      shiny::tags$label(label, class="govuk-label"),
      shiny::tags$input(class = "govuk-file-upload", id="inputId", type="file")

So the elements to be styled are just different types of things - Shiny creates it's own button and text input, whilst GDS assumes the standard file upload html input. So it either needs some entirely new css writing I think or the file upload function overhauling to use the tag input(...,file="type").

[sarahmwong]

Raised in issue #93 to fix properly - closing for now as this is a larger issue for someone to take a look at