diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js index fd1f17c65c3..01f56d0ea88 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js @@ -80,7 +80,7 @@ export default class ChatComposerUploads extends Component.extend( this._triggerUploadsChanged(); } - _uploadDropTargetOptions() { + uploadDropTargetOptions() { return { target: this.uploadDropZone || document.body, }; diff --git a/plugins/chat/spec/system/uploads_spec.rb b/plugins/chat/spec/system/uploads_spec.rb index 8ccf3cc0690..3e59259e1fd 100644 --- a/plugins/chat/spec/system/uploads_spec.rb +++ b/plugins/chat/spec/system/uploads_spec.rb @@ -17,6 +17,29 @@ describe "Uploading files in chat messages", type: :system do sign_in(current_user) end + it "allows to drag files to start upload" do + chat.visit_channel(channel_1) + + # Define the JavaScript to simulate dragging an external image + page.execute_script(<<-JS) + const target = document.querySelector('.chat-channel'); + const dataTransfer = new DataTransfer(); + const file = new File(['dummy content'], 'test-image.png', { type: 'image/png' }); + + dataTransfer.items.add(file); + + const dragEnterEvent = new DragEvent('dragenter', { dataTransfer: dataTransfer }); + target.dispatchEvent(dragEnterEvent); + + const dragOverEvent = new DragEvent('dragover', { dataTransfer: dataTransfer }); + target.dispatchEvent(dragOverEvent); + JS + + expect(find(".chat-upload-drop-zone__text__title")).to have_content( + I18n.t("js.chat.upload_to_channel", { title: channel_1.title }), + ) + end + it "allows uploading a single file" do chat.visit_channel(channel_1) file_path = file_from_fixtures("logo.png", "images").path