search

ministryofjustice / moj-design-system-backlog

MOJ Design System Community Backlog
https://moj-design-system.herokuapp.com/
9 stars 3 forks source link

Multi file upload #1

Open helena-moj opened 5 years ago

helena-moj commented 5 years ago

This pattern is now live in the Design System https://moj-design-system.herokuapp.com/patterns/upload-files

Service: Track a query Phase: Beta Department: MOJ

track-a-query-drag-drop

image

image

image

gavinwye commented 5 years ago

There is an upload pattern in the GOV.UK Design System. However, that pattern only caters for the upload of single files.

HMRC have something similar to this in their design system .

simonwhatley commented 5 years ago

This is the same pattern used on Claim for Crown court defence.

rajf commented 5 years ago

@helena-moj would you mind sharing the source files for this please?

adamsilver commented 5 years ago

Form Builder platform:

image

adamsilver commented 5 years ago

Single file

Upload a file (single)

Multiple file

Upload a file (multiple)

About the pattern

I’ve taken the Home Office patterns as a basis and tweaked where I thought it made sense.

It’s aimed at infrequent use and handles both single file uploading and multi file uploading.

For bulk uploads I’ve been working on another pattern which I’ll share later.

The pattern has example content, and for Form Builder we’ll make it configurable.

The thumbnail preview is also configurable. If you’re uploading a csv file maybe the preview will be different like a table of values Or maybe you can configure it not to output a preview at all.

I expect to handle this stuff with guidance in the DS, once it makes its way in.

UchennaJN commented 5 years ago

At OPG we ask deputies to upload a year's worth of bank statements. If they don't have access to a scanner or online banking, deputies will take photos of the statements (pages and pages), then upload the GIANT files.

The size of the files really slows down our case management system. It would be great if there was a way for image files to be optimised/reduced in size as part of the upload process.

MLiddament commented 5 years ago

I wonder if there's scope for a screen before these that could have the grey "You can upload" text from the 1st screen with an option to see some guidance on how to get a good photo and how to scan a document? Might avoid duff scans and photos and help some people who might otherwise struggle. Then you could drop that grey text from the next slide.

atrvrs commented 5 years ago

One potential area for improvement here is on filenames - it'll rarely be something as human-readable as receipt.jpg and - sadly - something more like IMG_12378.jpg

Is there potential here to allow users to give the file a meaningful name as part of the upload flow?

The (assumed) user need for case management applications and similar being: as a user, when I upload a file, I need to be able to find it again.

adamsilver commented 5 years ago

@UchennaJN — I've added a note to the guidance @atrvrs — I've added a note to the guidance

gavinwye commented 5 years ago

This pattern is now live in the Design System https://moj-design-system.herokuapp.com/patterns/upload-files

vickytnz commented 4 years ago

as a heads up, a couple of DWP teams are using this pattern. However after discussing the notification element of it I think it's missing some information about how to play back the deletion notification. The elements to add are noted on the gov.uk design system thread https://github.com/alphagov/govuk-design-system-backlog/issues/2#issuecomment-627939613