[Chat] Add drag and drop handlers to web/desktop

[marcaaron]

cc @thienlnam @roryabraham for extra eyes since y'all reviewed a similar one to this

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/141090

Tests

1. Drag various files from the finder into the text input
2. Verify the text input is highlighted when a file is over it
3. Verify that you can drag and drop images, PDFs, zip files, and a preview opens
4. Verify you can upload the file type if supported

Screenshots

[tylerkaraszewski]

This isn't working for me at all in Firefox.

It seems to work in Chrome but is kind of ugly:

[marcaaron]

Thanks for testing @tylerkaraszewski, will check out Firefox and see what's up there!

Can you try refreshing if the styles are looking weird? There's another issue that causes some missing CSS styles that we are still sorting out. If you notice in the image you shared the modal is not the only thing that is messed up looking. Status indicator next to avatar and paperclip in text input are also off center.

[tylerkaraszewski]

Yes, refreshing fixed the styling issue. I'll wait for your feedback on Firefox.

[marcaaron]

Figured it out. The dragover event must have preventDefault() called on it otherwise Firefox won't allow file drag and drop 🤷 more info here -> https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

Should be working now.

[tylerkaraszewski]

Looks good in Chrome and FF now.