Upload Component ( Enhancement )

[sandruparo]

[sandruparo]

@mturoci

We have revamped the upload component also in the wave style guide. We need to enhance this component and include this in the sdk . Thanks Martin.

cc - @shihan007 @shanaka-rajitha @dulajra @VijithaEkanayake

[mturoci]

@sandruparo the proposed design is missing a few parts, please include:

• Errors display - e.g. max file size exceeded, unsupported file type etc.
• State for single file upload only.
• Display what file extensions / sizes are supported if present.

What's the purpose of the X button?

[shihan007]

@mturoci I'll update those states. X is a close icon use to remove file if user want.

[shihan007]

@mturoci you can view the component here
https://xd.adobe.com/view/0790f950-abbd-41fa-b372-332295fd876f-52c3/screen/78995835-9119-4777-b4db-b7f5dd0e7bf6/

[mturoci]

Thanks @shihan007, what about the rest of the points?

State for single file upload only.
Display what file extensions / sizes are supported if present.

[shihan007]

@mturoci

• Display what file extensions / sizes are supported if present.

I have added a text below browse button

• State for single file upload only.

You mean user cannot upload multiple files?

[mturoci]

I have added a text below browse button

I thought this is supposed to be a label, e.g. Upload test dataset etc. So do you recommend that label in a real-world scenario is something like:
Upload test dataset (.csv) files with max file size xy per file or xy max file size in total?

You mean user cannot upload multiple files?

Yes

[shihan007]

I thought this is supposed to be a label, e.g. Upload test dataset etc. So do you recommend that label in a real-world scenario is something like:
Upload test dataset (.csv) files with max file size xy per file or xy max file size in total?

yeah

• State for single file upload only.

We can add " select one file at a time" text to above text. And if user still chooses multiple file to upload lets display an error msg as shown " Error uploading multiple files, please select one file".

[mturoci]

Overall UX is odd. Ideally we should prevent user from experiencing what he can or cannot do himself. It's better to restrict actions so that it's impossible to do the wrong thing. If such restrictions are not possible though, at least inform the user in advance.

Having all the info in a single simple label feels too much to me + this assumes app devs will handle that themselves which I doubt. Let's try a different approach - try to think about placing these restrictions somewhere, separate from the label, so that they are visible and don't require dev interaction at all - they will be auto-populated based on chosen attributes.

We can add " select one file at a time" text to above text. And if user still chooses multiple file to upload lets display an error msg as shown " Error uploading multiple files, please select one file".

As mentioned above, it's best to restrict invalid action completely so that user doesn't need to learn "the hard way". What about hiding whole drag&drop box after a single file was uploaded?

Another issue is that displaying uploaded files like this can cause layout shifts or even scrollbars which is usually unwanted.

[shihan007]

@mturoci yeah agree with you. As you suggesting we can display text on top of the component, But still user allowed to do so. Hiding drag and drop is a good idea but what if user want to re upload a file?

In normal user behaviour they tend to drag and drop or browse right way. They may not read the instructions at all. From our end it is good to restrict user from choosing other types if those are not allowed. And if user upload a file that exceed our mentioned file size we have to display an error we cannot expect user will follow instruction all the time by scanning file sizes.

My opining is it doesn't matter where we display our instructions.

[mturoci]

As you suggesting we can display text on top of the component, But still user allowed to do so.

Not sure what you mean.

Hiding drag and drop is a good idea but what if user want to re upload a file?

Either add a button that would "reset" whole component or maybe better first require to remove the previous file, if no uploaded file is present, display D&D

In normal user behaviour they tend to drag and drop or browse right way. They may not read the instructions at all. From our end it is good to restrict user from choosing other types if those are not allowed. And if user upload a file that exceed our mentioned file size we have to display an error we cannot expect user will follow instruction all the time by scanning file sizes.

It for sure will not be noticed in the label, but giving it some color and prominency (e.g. some color tag in top right corner with something like extensions: csv, pdf, max file size: 30mb etc.) could resolve it. wdyt?

[shihan007]

Either add a button that would "reset" whole component or maybe better first require to remove the previous file, if no uploaded file is present, display D&D

Yeah let's display this way if only support one upload. After upload successful. If an error occur we can go with the suggested one.

For file types and max file type I prefer this way

And if upload support multiple uploads we can use this one