File upload

[davidhunter08]

What

Help users select and upload a file.

See the discussion from our friends at gov about this component.

[cbernardojr]

This is the solution we're using for the Apps library project based on GDS:
https://design-system.service.gov.uk/components/file-upload/

[devansXD]

Example on eRS - based on the GDS component. Has tested well.

[BrieWhyatt]

We are proposing using the file upload mechanism with 3rd party online consultation suppliers. The following design (in line with above examples) will be tested soon and findings will be fed back.

[samanthasaw]

Findings from testing the NHS App file upload within an third party online consultation eczema triage journey:

What we tested:

Key findings:

• Photo upload design was seen as a welcome addition, best and most sensible part of the Eczema journey​
• 1 user expected to input the description of the photo whilst they could see the photo ​
• 1 user expected to be able to upload more than 1 photo ​
• Some users tried to click the upload button before choosing a photo. However we think the fact that users were used to just clicking through the journey without inputting anything impacted this. We think that users didn't expect to have to upload anything or were reluctant for their private photos to come up.​ Also we tested this using an iframe, so users were not using a mobile device. This could also have impacted user behaviour.

Quotes: ​

• "I would have asked the description with the actual picture just because you've got the photo in front of you. Not all of us have brilliant visual memory" ​
• "[Photo upload] really good actually, [GP can] see [the] problem before appointment"​
• "I would have probably said to let more than 1 photo in, I saw you're only allowed 1 photo" ​
• "Describe what this photo is showing – that's a silly question"​
• "That's good but I think it should also include that it's secure, if you're adding a photo it is quite a sensitive subject"

Next steps:

• We have iterated the content of the native element to say
  [ Choose a photo ] No photo chosen
  Rather than
  [ Choose a file ] No file chosen
• Rhiannon Smith is reviewing the content to give users confidence that the image will be sent securely
• I'm exploring options for showing the image to the user when they are asked to describe it