DEV: Add DropTarget options function for Uppy mixins (#15307)

This is so the target element for file drag + drop is
not always just this.element for the component, and
provides a way to hook into onDragOver and onDragLeave.
By default also adds a .uppy-is-drag-over class to the target
element.
This commit is contained in:
Martin Brennan 2021-12-15 15:43:07 +10:00 committed by GitHub
parent 4519f3f137
commit e37f0eb240
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 2 deletions

View File

@ -429,7 +429,7 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
},
_setupUIPlugins() {
this._uppyInstance.use(DropTarget, { target: this.element });
this._uppyInstance.use(DropTarget, this._uploadDropTargetOptions());
},
_uploadFilenamePlaceholder(file) {
@ -584,4 +584,14 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
_resetUploadFilenamePlaceholder() {
this.set("uploadFilenamePlaceholder", null);
},
// target must be provided as a DOM element, however the
// onDragOver and onDragLeave callbacks can also be provided.
// it is advisable to debounce/add a setTimeout timer when
// doing anything in these callbacks to avoid jumping. uppy
// also adds a .uppy-is-drag-over class to the target element by
// default onDragOver and removes it onDragLeave
_uploadDropTargetOptions() {
return { target: this.element };
},
});

View File

@ -138,7 +138,7 @@ export default Mixin.create(UppyS3Multipart, {
},
});
this._uppyInstance.use(DropTarget, { target: this.element });
this._uppyInstance.use(DropTarget, this._uploadDropTargetOptions());
this._uppyInstance.use(UppyChecksum, { capabilities: this.capabilities });
this._uppyInstance.on("progress", (progress) => {
@ -353,4 +353,14 @@ export default Mixin.create(UppyS3Multipart, {
this.inProgressUploads.filter((upl) => upl.id !== fileId)
);
},
// target must be provided as a DOM element, however the
// onDragOver and onDragLeave callbacks can also be provided.
// it is advisable to debounce/add a setTimeout timer when
// doing anything in these callbacks to avoid jumping. uppy
// also adds a .uppy-is-drag-over class to the target element by
// default onDragOver and removes it onDragLeave
_uploadDropTargetOptions() {
return { target: this.element };
},
});