Skip to content

Prevent the default browser behaviour for dropped files from running #43493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
glendaviesnz merged 4 commits into from
Sep 8, 2022
Merged

Prevent the default browser behaviour for dropped files from running #43493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8651f80
Prevent the default browser behaviour for dropped files from running …
glendaviesnz Aug 22, 2022
da862eb
Disable default browser action for files dropped outside drop zones i…
glendaviesnz Aug 23, 2022
996c403
Prevent drag and drop default event in site editor iframed editors
glendaviesnz Sep 8, 2022
005add4
Tidy up naming
glendaviesnz Sep 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion packages/block-editor/src/components/iframe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,9 +201,15 @@ function Iframe(
const [ contentResizeListener, { height: contentHeight } ] =
useResizeObserver();
const setRef = useRefEffect( ( node ) => {
let iFrameDocument;
Copy link
Copy Markdown
Contributor Author

@glendaviesnz glendaviesnz Aug 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This part is a bit messy, but the event listeners didn't seem to work if just attached to node, so had to add to the iframes contentDocument once loaded, but then need access to that doc outside the onload method in order to remove the event listeners as this code is instantiated numerous times while using the site editor ... probably the event handlers are disposed of when the iframe doc is unmounted anyway - not sure 🤔

// Prevent the default browser action for files dropped outside of dropzones.
function preventFileDropDefault( event ) {
event.preventDefault();
}
function setDocumentIfReady() {
const { contentDocument, ownerDocument } = node;
const { readyState, documentElement } = contentDocument;
iFrameDocument = contentDocument;

if ( readyState !== 'interactive' && readyState !== 'complete' ) {
return false;
Expand All @@ -228,13 +234,34 @@ function Iframe(
contentDocument.dir = ownerDocument.dir;
documentElement.removeChild( contentDocument.head );
documentElement.removeChild( contentDocument.body );

iFrameDocument.addEventListener(
'dragover',
preventFileDropDefault,
false
);
iFrameDocument.addEventListener(
'drop',
preventFileDropDefault,
false
);
return true;
}

// Document set with srcDoc is not immediately ready.
node.addEventListener( 'load', setDocumentIfReady );

return () => node.removeEventListener( 'load', setDocumentIfReady );
return () => {
node.removeEventListener( 'load', setDocumentIfReady );
iFrameDocument?.removeEventListener(
'dragover',
preventFileDropDefault
);
iFrameDocument?.removeEventListener(
'drop',
preventFileDropDefault
);
};
}, [] );

const headRef = useRefEffect( ( element ) => {
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-post/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,10 @@ export function initializeEditor(
} );
}

// Prevent the default browser action for files dropped outside of dropzones.
Copy link
Copy Markdown
Contributor Author

@glendaviesnz glendaviesnz Aug 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this code, and the same in the edit site file below in my testing is only ever executed once on editor load, so I don't think we need to try and tidy up these event listeners.

window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );

render(
<Editor
settings={ settings }
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-site/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,10 @@ export function reinitializeEditor( target, settings ) {
}
}

// Prevent the default browser action for files dropped outside of dropzones.
window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );

render( <EditSiteApp reboot={ reboot } />, target );
}

Expand Down