feat(file-uploader): add drop and drop file uploader #3873
Conversation
|
Deploy preview for the-carbon-components ready! Built with commit 86eef5c https://deploy-preview-3873--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit 86eef5c |
|
Deploy preview for carbon-components-react ready! Built with commit 86eef5c https://deploy-preview-3873--carbon-components-react.netlify.com |
emyarod
force-pushed
the
dnd-file-uploader-1
branch
4 times, most recently
from
9469c00
to
3b17fbe
Compare
emyarod
force-pushed
the
dnd-file-uploader-1
branch
from
3b17fbe
to
5531836
Compare
emyarod
added
status: ready for review 👀
status: visual review 🔍
and removed
status: blocked 🙅♀️
labels
ghost
requested review from
jnm2377 and
vpicone
and removed request for
a team
|
I think we will need to make changes to the inline loader to resolve this alignment issue. The bounding box of the loading svg is different from the icons I believe, will look into this further and open a separate ticket if needed |
| const isOfSelf = this.element.contains(evt.target); | ||
| // In IE11 `evt.dataTransfer.types` is a `DOMStringList` instead of an array | ||
| if ( | ||
| Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') >= 0 && |
There was a problem hiding this comment.
I am unsure about what this first array actually is and what it's calling.
There was a problem hiding this comment.
since evt.dataTransfer.types is a DOMStringList and not an array we cannot directly call the indexOf method on evt.dataTransfer.types. so we call (Function.prototype.call) Array.prototype.indexOf and pass in the DOMStringList as the list of function arguments
an alternative way to do this would be [...evt.dataTransfer.types].indexOf('Files') >= 0 && ...
does that help?
There was a problem hiding this comment.
Ah ok yes. That does help. In terms of when 'Files' would be present or not, what kind of situations would those be?
There was a problem hiding this comment.
Is it depending on the kind of file? or just that it's a file of some sort?
There was a problem hiding this comment.
'Files' will be added to the types array if the event is a drag event and it involves any file https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-types-dev
| if (evt.type === 'dragover') { | ||
| evt.preventDefault(); | ||
| const dropEffect = inArea ? 'copy' : 'none'; | ||
| if (Array.isArray(evt.dataTransfer.types)) { |
There was a problem hiding this comment.
Are we checking if this is an array bc of your comment in line 194 (// In IE11 evt.dataTransfer.types is a DOMStringList instead of an array)?
emyarod
force-pushed
the
dnd-file-uploader-1
branch
from
5531836
to
60a17e0
Compare
|
@shixiedesign I resolved the offset loading spinner in this issue with a temp fix, the main issues can be addressed in a separate ticket |
jnm2377
added
status: ready to merge 🎉
and removed
status: one more review 👀
status: ready for review 👀
labels
Closes #2288
refs #2848 #3016 #3175
This PR adds drag and drop support to the vanilla file uploader component using native HTML APIs for drag and drop events.
Changelog
New
Changed
Testing / Reviewing
Ensure the new file uploader functions as expected and ensure the existing file loader does not have any regressions