Upload component

[joaorbp]

Hello, some feedback and suggestions for the upload component.

Default state

The default state is good but in some user cases I believe it takes too much space. In some cases the users have to fill large forms and the upload component is only used for the user to upload documents. In most cases Excel or Word documents.
It would be nice to be able to have an option on the component to say if we want a large area or a small area.

Maybe something like this:

It takes less space and integrates a bit better with long forms.

Drag and Drop state

The drop area would be something like this when using the small area option.

Uploading state

The uploading state in my view is a bit confusing.

When the user selects or drag and drops the files it seems that the upload process starts immediately based on the circle icon progress, but then we still have the "CHOOSE FILES" and "UPLOAD" button available.

The "UPLOAD" button might confuse some users, as it seems that the process of uploading already started, so why do I need to click on the "UPLOAD" button. And what happens if I click on the "UPLOAD" button before the progress circle is completed?

In my view we have two options after the user selects the files.

1. The upload process starts immediately, then we should remove the buttons "CHOOSE FILES" and "UPLOAD", show the progress of the upload and once all is complete we can then show the "CHOOSE FILES" button again, so the user knows he can now add more files. I don't think we need the "UPLOAD" button as the files are already uploaded.
2. The upload process doesn't start immediately, then I don't think we need the progress circle. Maybe we are just displaying the files header information such as filename and size and we want the user to confirm everything first before actually upload the files to the server.

Dependent on the option selected, things might look different. Let's assume we go with the first option, that files are uploaded immediately. ( Please note this is just mockups and shouldn't be considered the final design )

Option 1

As a user I now feel that I know what's happening. Files are being uploaded to the server, I can cancel each file upload before reaching 100% or I can even cancel all uploads.
I also think the progress bar component is a better component to be used here instead of the small circle one, as it's more visible to the progress and packs more information to the user.

Option 2

Assuming that the upload process doesn't start immediately then we shouldn't see a progress bar, as to retrieve the filename and size shouldn't take that long. And we should offer some options to the user.

As a user I believe I understand a bit more this screen. I see all the files I selected, I can remove any file if I wish and I can also select more files to add to the list. If I'm happy then I can start the upload process.

I also added an edit icon on each file, the reason behind it is that in some scenarios the user might want to rename the filename.
I think if option 2 was selected then this would be the step that the user could do so. If option 1 was selected then we would need to have that functionality at some stage of the process.

File complete state / Hover state / Upload completion state

If we simplify the "uploading state" then I don't think we need all this stages in the process.
Whatever option we select, the first or the second they can all end in the following screen:

As a user I can now see that my files uploaded successfully, I can add more files and I can also remove the files I uploaded.

I just think the screen above is too much visual information and as a user I can't really do a lot other then choose files and click a modal alert box.

Some notes

1. I believe that the functionality for the user to rename the files names must be included in the process.
2. Sometimes sentences/words are better then an Icon. A cross icon might confuse some users as "is it to remove the message" or "is it to cancel the process" or "is it to delete".
   
   In here we use the cross icon to close the alert.
   
   But in here is it to remove/delete/close ?
3. I understand sometimes the hover action to offer more options is the better way. But other times I think we don't need to hover to see more options. I believe in this case it's better to just show the options available to the user.

Thank you for taking the time to read, hopefully this will spark some discussion.

[aweell]

Thanks @joaorbp,

A bunch of questions to add to the discussion:

Default state

I totally agree that the space the component takes is excessive 😓

• Should the upload have a shadowed container? Let's think about this component being part of a <form> as you commented, and the form itself is wrapped in a shadowed container.

Drag and drop

• Should be presented upfront the area where the user can drop the documents instead of taking control of when the user is hovering the component to show the drop area? Related to the drop area this article can open another discussion about how to improve efficiency of this areas (See "Magnetism and Snapping in Place" section)

• Could be interesting to provide two variants of the component, one with a simple "choose files" button and another with a "drag and drop" area? I'm thinking mostly in mobile devices browsers where drag and drop action is not supported. IBM Carbon Design System example

• If there is a limit size of the documents or only a valid type of formats, should be added as a tooltip, or as a helper text?

Uploading state

• Right now the component can upload a single or multiple files, should be interesting to provide both possibilities or a multiple selection is the best choice for both?
• How handling error when uploading files? Element by element or globally when all are uploaded?
• Should maybe the success message be present element by element? Linked to the previous question can happen that the user uploaded 3 documents and 1 failed and 2 were ok.

[aweell]

Hi @joaorbp!

Upload documentation update has been released in 3.7.0 in draft status adding some of the inputs provided in this discussion.

[aweell]

Hi @joaorbp!

The new file input component has been released in 4.0.0 replacing the upload. You can check the documentation or the component implementation:

• File input documentation
• React component