Write Data Drag & Drop Polish #1897
Conversation
There was a problem hiding this comment.
Definitely an improvement, and happy to merge, but some ideas below as well for further possible improvement:
-
What I'm missing now personally is the nice blue hover effect on file drag and drop, but maybe this is what made the styles clash? I liked having a bit more of a visual indication -- the blue was interesting for this purpose -- but maybe some other kind of (blue) icon could serve that purpose, something that indicates that you've successfully dragged something into the droppable area?
-
Also, is it possible to animate out (fade) of the drag-over state, like we animate in? Moving the file out of the area makes everything toggle instantly back to initial state, whereas dragging in is an animated fade.
-
I'd change the copy of the button to
Choose a Different File to Upload, asanotherimplies to me that you can upload multiple, whereas this only allows a single file at a time.
- Largely mimicking the pattern featured in Dropzone.js (I feel this is a great pattern for file drag & drop) - Got rid of the button for uploading, change copy to read “Drop a file here or click to upload” - Made entire file upload div clickable - After a file has been uploaded: - Submit button has been moved inside the div - Added a “Cancel” button and method to reset the state of the modal - Hover state of clickable area matches drag-over state
|
Did some research on UI patterns for this sort of interaction, decided that http://www.dropzonejs.com/ has a pretty sweet interaction that is worth mimicking. Probably went down a rabbit hole (that was full of yaks in bikesheds), but was a good exploration. Ended up simplifying the UI a bunch; the whole file upload |
Connect #1894
The Problem
The Solution
Cancelafter selecting a file which resets the state of the file uploaderPreview