feat(Upload): support files dropped on the document body #1719
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit bb55a18:
|
✅ DNB Eufemia Portal deploy preview ready
|
There was a problem hiding this comment.
Some of the existing functionality don't seem to work flawlessly now:
- No yellow animation when uploading the same file multiple times by dropping files in other places than the "upload zone".
- Seems like when dropping a file in other places than the "upload zone" it's replacing all the existing files with the current dropped file, and not adding new/more files.
No yellow animation:
Screen.Recording.2022-11-14.at.12.39.18.mov
Replacing existing file instead of adding files:
Screen.Recording.2022-11-14.at.12.40.27.mov
macOS: 12.6 (21G115)
Chrome: Version 107.0.5304.110 (Official Build) (x86_64)
|
Good questions. Having several upload components on the page is probably something that not should happen. |
tujoworker
force-pushed
the
feat/upload-page-listener
branch
from
79a4d29 to
bb55a18
Compare
|
@langz very nice finding! That's a wired React Hook issue, so for now I put the files into a ref and update the ref on each re-render. I have had this before in other places where we use Hooks. Probably a React bug. But the reason was that |
|
@langz also, now only the first one will accept files from the "body" – what do you think? Is that better or worse? We could maybe add an property instead |
Thanks for improving this. In the possible scenario of where there's multiple upload components in a single page, I do think it will cause less confusion/damage for the user to only add the files dragged to "body" to one of the upload components, than to all of the upload components. In general, if there's multiple upload components in a single page, I do think it would be favourable that the developer could at least select which upload component that will get the files that's been dragged to "body". |
|
Works perfectly fine on iPhone as well👌 |
ohh, I didn't know that this was possible 😁 |
# [9.38.0-beta.1](v9.37.0...v9.38.0-beta.1) (2022-11-17) ### Bug Fixes * add support to IS_SAFARI_DESKTOP for Safari v16 on macOS ([#1718](#1718)) ([54e2cba](54e2cba)) * **Anchor:** export types as AnchorAllProps and original instance ([#1715](#1715)) ([92ec784](92ec784)) * **Icons:** prevent icons from having same IDs (duplicate-id violation) ([#1714](#1714)) ([5e4079d](5e4079d)) * **Provider:** rewrite to functional component ([#1731](#1731)) ([b504d06](b504d06)) * **Table:** align odd/even modifiers with CSS nth ([#1724](#1724)) ([8bdad07](8bdad07)) ### Features * **Table:** add "fixed" prop for fixed table layouts ([#1708](#1708)) ([241ee0f](241ee0f)) * **Table:** add Table.SortButton ([#1709](#1709)) ([288a8db](288a8db)) * **Table:** add Th.HelpButton to be used in Table Headers ([#1711](#1711)) ([c142323](c142323)) * **Th:** add table header sortable props ([#1706](#1706)) ([c40393a](c40393a)) * **Tr:** automate odd/even and make it overridable ([#1705](#1705)) ([d73d3cb](d73d3cb)) * **Upload:** support files dropped on the document body ([#1719](#1719)) ([f206243](f206243))
|
🎉 This PR is included in version 9.38.0-beta.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
# [9.38.0](v9.37.0...v9.38.0) (2022-11-22) ### Bug Fixes * add support to IS_SAFARI_DESKTOP for Safari v16 on macOS ([#1718](#1718)) ([54e2cba](54e2cba)) * **Anchor:** export types as AnchorAllProps and original instance ([#1715](#1715)) ([92ec784](92ec784)) * **Icons:** prevent icons from having same IDs (duplicate-id violation) ([#1714](#1714)) ([5e4079d](5e4079d)) * **Provider:** rewrite to functional component ([#1731](#1731)) ([b504d06](b504d06)) * **Table:** align odd/even modifiers with CSS nth ([#1724](#1724)) ([8bdad07](8bdad07)) ### Features * **Table:** add "fixed" prop for fixed table layouts ([#1708](#1708)) ([241ee0f](241ee0f)) * **Table:** add table "border" and "outline" property ([#1739](#1739)) ([ad63ffb](ad63ffb)) * **Table:** add Table.ScrolView to support horizontal scroll ([#1735](#1735)) ([85a4d86](85a4d86)) * **Table:** add Table.SortButton ([#1709](#1709)) ([288a8db](288a8db)) * **Table:** add TableContainer to stack tables with an outline ([#1740](#1740)) ([376ac06](376ac06)) * **Table:** add Th.HelpButton to be used in Table Headers ([#1711](#1711)) ([c142323](c142323)) * **Table:** support rowSpan ([#1733](#1733)) ([463692d](463692d)) * **Th:** add table header sortable props ([#1706](#1706)) ([c40393a](c40393a)) * **Tr:** automate odd/even and make it overridable ([#1705](#1705)) ([d73d3cb](d73d3cb)) * **Typography:** support styles for superscript and subscript elements ([#1721](#1721)) ([c2b043d](c2b043d)) * **Upload:** support files dropped on the document body ([#1719](#1719)) ([f206243](f206243))
|
🎉 This PR is included in version 9.38.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
* feat(Upload): support files dropped on the document body * Add UploadDragEvent type * Support only one (the first one) * Enhance handling of existing files and their ID * Fix existing file handling when file get dropped on body
I think its better to make this not optional.
But then the question is, should only the first support it?
If yes, then we probably want a way to support via a property.
Or should it be possible to disable?
But probably, its fine as of now. Having several upload components on the page is probably something that not should happen.