TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 14:43:08 +03:00
Code Issues Projects Releases Wiki Activity

Fix drag-n-drop files from Chrome's download bar

Browse Source 
closes #6850
- HTML5 drag-n-drop has some weird inconsistencies around the `dragOver` event where it defaults the "drop" behaviour to nothing so you need to cancel the defaults and override
	- http://stackoverflow.com/questions/19526430/drag-and-drop-file-uploads-from-chrome-downloads-bar
This commit is contained in:
Kevin Ansfield 2016-05-18 09:04:30 +01:00
parent 64a85ced32
commit 92c5394449
4 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ghost/admin/app/components/gh-file-uploader.js
View File

@ -55,7 +55,18 @@ export default Component.extend({
}),
dragOver(event) {
if (!event.dataTransfer) {
return;
}
// this is needed to work around inconsistencies with dropping files
// from Chrome's downloads bar
let eA = event.dataTransfer.effectAllowed;
event.dataTransfer.dropEffect = (eA === 'move' || eA === 'linkMove') ? 'move' : 'copy';
event.stopPropagation();
event.preventDefault();
this.set('dragClass', '--drag-over');
},

10
ghost/admin/app/components/gh-image-uploader.js
View File

@ -72,6 +72,16 @@ export default Component.extend({
dragOver(event) {
let showUploadForm = this.get('showUploadForm');
if (!event.dataTransfer) {
return;
}
// this is needed to work around inconsistencies with dropping files
// from Chrome's downloads bar
let eA = event.dataTransfer.effectAllowed;
event.dataTransfer.dropEffect = (eA === 'move' || eA === 'linkMove') ? 'move' : 'copy';
event.stopPropagation();
event.preventDefault();
if (showUploadForm) {

7
ghost/admin/tests/integration/components/gh-file-uploader-test.js
View File

@ -78,7 +78,12 @@ describeComponent(
this.render(hbs`{{gh-file-uploader}}`);
run(() => {
this.$('.gh-image-uploader').trigger('dragover');
let dragover = Ember.$.Event('dragover', {
dataTransfer: {
files: []
}
});
this.$('.gh-image-uploader').trigger(dragover);
});
expect(this.$('.gh-image-uploader').hasClass('--drag-over'), 'has drag-over class').to.be.true;

11
ghost/admin/tests/integration/components/gh-image-uploader-test.js
View File

@ -120,7 +120,7 @@ describeComponent(
expect(formChanged.secondCall.args[0]).to.equal('upload');
});
describe('file uploads', function () {
describe('file upload form', function () {
it('renders form with supplied text', function () {
this.render(hbs`{{gh-image-uploader image=image text="text test"}}`);
expect(this.$('.description').text().trim()).to.equal('text test');
@ -161,7 +161,12 @@ describeComponent(
this.render(hbs`{{gh-image-uploader image=image update=(action update)}}`);
run(() => {
this.$('.gh-image-uploader').trigger('dragover');
let dragover = Ember.$.Event('dragover', {
dataTransfer: {
files: []
}
});
this.$('.gh-image-uploader').trigger(dragover);
});
expect(this.$('.gh-image-uploader').hasClass('--drag-over'), 'has drag-over class').to.be.true;
@ -174,7 +179,7 @@ describeComponent(
});
});
describe('URL input', function () {
describe('URL input form', function () {
beforeEach(function () {
this.set('configService.fileStorage', false);
});