Upload a file

[adamsilver]

• RPL: https://reform-pattern-library.herokuapp.com/components/document-upload

Questions:

• Drag and drop is not normally understood. Have we clarified a need for drag and drop? Is this in use anywhere and do we have an usage stats?
• In the example, it seems vital the user reads the instructions. I think a flow may be better as per the passport renewal service who did a lot of research for this.

I think this pattern needs a review.

[stevenwise-hmcts]

In Appeal a benefit decision (SSCS) submit your appeal journey we provide the ability for users to upload evidence to support their appeal.

We removed drag and drop as it wasn’t used and added complexity to the interface.

Many of our users would be using their mobile phones to take pictures of documents and upload. No need for drag and drop.

It's worth noting that 65% of our users are Assisted Digital to some degree.

[PeteWilliams]

We tested this in CMC and never saw a single person try and drag and drop, in fact it caused confusion. Divorce tested it before us and found the same apparently. Would agree it could do with a rethink.

We ended up with something quite different which you can see here: https://hmcts-cmc-issue-prototype.herokuapp.com/prototype-mar-2018/certificate/upload-js Username: cmc Password: cmc_summer

(Which would be a progressive enhancement of the non-javascript version: https://hmcts-cmc-issue-prototype.herokuapp.com/prototype-mar-2018/certificate/upload)

I think this is probably overkill if you are just uploading a single file - we reached this design because we needed any number of uploads across multiple categories.

[adamsilver]

From Chris N: “Our users don't use drag and drop in user tests, we have no metrics on whether they use it in live. Our production code and prototype has drag and drop because that's what comes out of the box with dropzone and it was easier to leave it in than take it out.”

[adamsilver]

Waiting on a clear need for drag and drop before progressing this.

[adamsilver]

Show users progress while they are uploading a file.

[adamsilver]

If there are limits on the file size we need to clearly denote that (hint?) and catch it when the user submits before making them wait for the server to respond.

[PamelaWoods]

Please review the CMC version of 'Add file' and the pattern to show the name of the file uploaded. We now have several options to choose a file - one with a grey button, one with a white button, both different text. Need to align @adamsilver @PeteWilliams

[stevenwise-hmcts]

The pattern isn’t optimal for users who need to upload multiple files.

Our users can upload many images of documents or photos as evidence with their appeal submission.

The pattern only allows one image to be selected at a time. It would be laborious for a user to keep returning to the file browser for each file upload.

The thumbnail preview images could create a very long and unwieldy page.

Once one file has been uploaded it isn’t obvious that it’s possible to upload additional images. The user has to to click in the drop zone or drag another image. The link to add a file needs to be retained.

[adamsilver]

@stevenwise-hmcts great feedback Steven.

A basic file input could be used with the Add Another pattern to let users upload multiple files in one go.

Also a file input can be configured to allow users to choose multiple files at once as an enhancement.

[stevenwise-hmcts]

We're testing a simplified version of evidence upload. It allows for multiple file uploads.

Any feedback would be appreciated.

[PeteWilliams]

@stevenwise-hmcts You can allow selection of multiple files with the 'multiple' attribute on your file input field. Ie:

<input type="file" name="filefield" multiple="multiple">

Here's an example from CMC:

Obviously, this is pretty hidden power-user feature, so you'd still need the ability to come back and click the button to select files one at a time.

One thing I notice we've done differently, is that we have the 'Add files' button after the list of uploaded files, which to me makes more sense in the context of multiple single-file uploads, as the flow of the form continues top-to-bottom, rather than bouncing back up to go to back to the button.