Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js
View File

@ -429,7 +429,7 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
}, },
_setupUIPlugins() { _setupUIPlugins() {
this._uppyInstance.use(DropTarget, { target: this.element }); this._uppyInstance.use(DropTarget, this._uploadDropTargetOptions());
}, },
_uploadFilenamePlaceholder(file) { _uploadFilenamePlaceholder(file) {
@ -584,4 +584,14 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
_resetUploadFilenamePlaceholder() { _resetUploadFilenamePlaceholder() {
this.set("uploadFilenamePlaceholder", null); 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 };
},
}); });

12
app/assets/javascripts/discourse/app/mixins/uppy-upload.js
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.use(UppyChecksum, { capabilities: this.capabilities });
this._uppyInstance.on("progress", (progress) => { this._uppyInstance.on("progress", (progress) => {
@ -353,4 +353,14 @@ export default Mixin.create(UppyS3Multipart, {
this.inProgressUploads.filter((upl) => upl.id !== fileId) 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 };
},
}); });