Handling multiple file uploads when the user must specify attributes for each file

Question

I'm in the process of redesigning an application that contains a multiple file upload view. The current design features a tabular layout in which ten rows are displayed at a time. Each row contains a few dropdowns, a file control, and a textarea. Here's a basic conceptual representation:

As you can imagine, this doesn't present well on mobile devices or screens with limited width (e.g. the small, cheap laptops they often give out in corporate offices). Our actual implementation of this approach is clunky, too, but that's a separate problem.

My first instinct was to try something more sequential: Using a clean and simple "wizard", let the user pick attributes for and submit one file at a time. Give them an option at the end to easily start the process over if needed. All the while, their files will upload to the server "in the background." Here's a mockup of the "first step" of that approach:

This seemed promising at first, but I was later made aware that our users often upload 10-20 files in one go, and the "wizard" would add a lot of clicks over what they're doing today.

I then considered an approach in which the user may upload several files all at once and then assign attributes to them afterwards. This may actually work, but I've never seen this in the wild and wonder if it might confuse our users.

Are there established patterns/approaches for this scenario? If so, what are they?

Answer 1

You've pointed out two great alternatives.

The first layout having mobile issues, but also if one document contained an input error; Would you submit the valid ones and leave the invalid ones or don't submit any.

Personally I would vote for the last option. As file upload forms are always a two part process. Filling out form fields and finding documents on your hard drive/device. Allowing multiple uploads can minimise the frustration of finding the files. But you may want to introduce a new screen containing 'Incomplete' Documents which are yet to have their details filled in.

The wizard approach also sounds good. As you've pointed out its a lot of clicking. But if it's critical to only have 'valid' docs with their properties filled in this could work well.

An option could be to combine the two. Allow multi file uploads which go into a wizard queue to be completed.

Answer 2

After the multiple simultaneous file upload you could go with something similar to the approaches in the mockups below, using what you could call "cards".

For mobile you have several options to manage the interaction and navigability, you could stack them vertically for users to scroll, you could add "next/previous file" actions, etc. But I guess that would be a separate question.

For adding files you can just add a button like "Add file/s" at the top (a fixed one may be also a good idea, so don't dont have to scroll/move up to find it)

^{download bmml source – Wireframes created with Balsamiq Mockups}