UI/Visual Design for Drag and Drop Areas
Activity
mentioned in issue #21 (closed)
mentioned in issue #40 (closed)
changed milestone to %1.0
changed milestone to %UI Test Round
I think this is already done in #44 (closed).
mentioned in issue #82 (closed)
changed milestone to %1.0
No, we actually still need a design for how the drop zone looks when you are hovering it with files that it will accept. Maybe it can look different with files that it will not accept.
And then we need a design for how it looks while files are uploading (we could show a progress bar) and when it is finished.
This is what I'm thinking..
@NicoAlt I know you mentioned showing the names of the files that are being uploaded, so I've shown that here. The background color for the 1st and 3rd states is FAFAFA The 2nd state (drop) background is F6F8FC
-
Maybe it can look different with files that it will not accept.
That's a good idea, but from what I can see it's not possible to determine the file type while hovering.
@crwinfrey Thank you for the designs, I'll go to implement them now. We still need a design for finished loadings i.e. when the upload was either successful or failed.
I'll improvise and use your third design for successful loads, removing the progress bar and changing the text to "Successfully uploaded 3 files.".
For failed loads, I'll also remove the progress bar and change the text to "Uploading failed.".
-
We can't see the file name and extension at least?
I have searched for this and found out that you can only know which elements an user holds over a drop field if the element was part of the page before. Because our elements come from outside the page (user's hard drive) there's no solution.
I digged further into this debugging the event when an user holds an file over the field and the only information that is returned is that the file type is "application/x-moz-file" in Firefox, while in Chrome it just says "Files".
