[FIX] Drag and drop disabled when file upload is disabled (#16049)

app/theme/client/imports/general/base_old.css

@@ -4399,14 +4399,23 @@ rc-old select,
 
 		text-align: center;
 
-		color: var(--color-blue);
-
-		border: 4px dashed var(--color-blue);
 		background: rgba(255, 255, 255, 0.8);
 
 		font-size: 42px;
 		align-items: center;
 		justify-content: center;
+
+		&--enabled {
+			color: var(--color-blue);
+
+			border: 4px dashed var(--color-blue);
+		}
+
+		&--disabled {
+			color: var(--color-red);
+
+			border: 4px dashed var(--color-red);
+		}
 	}
 
 	&.over .dropzone-overlay {

app/threads/client/flextab/thread.html

@@ -11,8 +11,8 @@
 			{{> icon block="contextual-bar__header-close-icon" icon="plus"}}
 		</button>
 	</header>
-	<section class="contextual-bar__content flex-tab threads dropzone">
-		<div class="dropzone-overlay background-transparent-darkest color-content-background-color">{{_ "Drop_to_upload_file"}}</div>
+	<section class="contextual-bar__content flex-tab threads dropzone {{dragAndDrop}}">
+		<div class="dropzone-overlay {{isDropzoneDisabled}} background-transparent-darkest color-content-background-color">{{_ dragAndDropLabel}}</div>
 		<div class="thread-list js-scroll-thread">
 			<ul class="thread">
 				{{# with messageContext}}

app/threads/client/flextab/thread.js

@@ -11,7 +11,7 @@ import { upsertMessageBulk } from '../../../ui-utils/client/lib/RoomHistoryManag
 import { Messages } from '../../../models';
 import { lazyloadtick } from '../../../lazy-load';
 import { fileUpload } from '../../../ui/client/lib/fileUpload';
-import { dropzoneEvents } from '../../../ui/client/views/app/room';
+import { dropzoneEvents, dropzoneHelpers } from '../../../ui/client/views/app/room';
 import './thread.html';
 
 const sort = { ts: 1 };
@@ -39,6 +39,7 @@ Template.thread.events({
 });
 
 Template.thread.helpers({
+	...dropzoneHelpers,
 	threadTitle() {
 		return normalizeThreadMessage(Template.currentData().mainMessage);
 	},

app/ui/client/views/app/room.html

@@ -11,8 +11,8 @@
 				{{/headerRoom}}
 			{{/if}}
 			<div class="messages-container-wrapper">
-				<div class="messages-container-main dropzone">
-					<div class="dropzone-overlay background-transparent-darkest color-content-background-color">{{_ "Drop_to_upload_file"}}</div>
+				<div class="messages-container-main dropzone {{dragAndDrop}}">
+					<div class="dropzone-overlay {{isDropzoneDisabled}} background-transparent-darkest color-content-background-color">{{_ dragAndDropLabel}}</div>
 					{{#unless embeddedVersion}}
 						{{#if announcement}}
 						<div class="fixed-title announcement {{getAnnouncementStyle}}" aria-label="{{RocketChatMarkdownInline announcement}}">

app/ui/client/views/app/room.js

@@ -253,7 +253,28 @@ callbacks.add('enter-room', wipeFailedUploads);
 
 const ignoreReplies = getConfig('ignoreReplies') === 'true';
 
+export const dropzoneHelpers = {
+	dragAndDrop() {
+		return settings.get('FileUpload_Enabled') && 'dropzone--disabled';
+	},
+
+	isDropzoneDisabled() {
+		return settings.get('FileUpload_Enabled') ? 'dropzone-overlay--enabled' : 'dropzone-overlay--disabled';
+	},
+
+	dragAndDropLabel() {
+		if (!userCanDrop(this._id)) {
+			return 'error-not-allowed';
+		}
+		if (!settings.get('FileUpload_Enabled')) {
+			return 'FileUpload_Disabled';
+		}
+		return 'Drop_to_upload_file';
+	},
+};
+
 Template.room.helpers({
+	...dropzoneHelpers,
 	useNrr() {
 		const useNrr = getConfig('useNrr');
 		return useNrr === 'true' || useNrr !== 'false';
@@ -589,6 +610,11 @@ export const dropzoneEvents = {
 		const e = event.originalEvent || event;
 
 		e.stopPropagation();
+		e.preventDefault();
+
+		if (!userCanDrop(this._id) || !settings.get('FileUpload_Enabled')) {
+			return false;
+		}
 
 		let files = (e.dataTransfer && e.dataTransfer.files) || [];