Uploader component design

Good morning guys.

This is my first post, so hi everyone =) . I need some help with the design of a uploader angular component, what I'm trying to achieve is create two components in one, a single uploader and a multiple uploader.

For the first one, the single, I was trying to display only one button and over the button the progress information.(This one will be used also to upload your own avatar or single documents in forms)

single upload

In this case I want to leave the user the option to download/remove the uploaded file, so my first question is... how is done in the rest of uploader components? icons, contextual menu, links... Multiple 1 Multiple 2

For the multiple I want to display the list of files with the progress and I created something like that. First you load the list of files and then you can upload the files to the server.

Then the question I have some doubts about the different between the single and the multiple component, one is using the label of the button to display info and the other progress bars.. I don't know... Do you think it should be represented in the same way?

And my last question is about drag and drop, how I should implement it in terms of design in the multiple uploader? Should I create a dotted box around the entire component to be able to drag and drop documents over the component(over the progress bar, buttons..) or maybe I should create a different area around the component for the drag and drop??

In short, because yeah, my english is really poor, I want to ask you:

1 - Best way to be able to display progress and inform the user about the upload situation in a single upload.

2 - Best way to be able to remove/download the previous file in a single upload.

3 - Should both components display data in the same way for a better ux? Like if you're using progress bar and icons... use it also for the single mode.

4 - If I want to add a drag and drop, should I choose between the list or the drag and drop, combine both or create different areas for the list a for the drag and drop??

I'm completely open to new ideas, I don't have any requirement and for me is really important the user experience and I understand is not something simple that everybody can decide with no documentation/experience.

Sorry guys for my english and to use my first post to ask instead resolve any question...

Kto

Tags: