https://github.com/NodeBB/NodeBB/issues/6388

less/topic.less

@@ -370,6 +370,7 @@
 	}
 
 	.quick-reply {
+		position: relative;
 		.icon {
 			position: relative;
 			border-radius: 50%;

public/modules/quickreply.js

@@ -1,8 +1,8 @@
 'use strict';
 
 define('persona/quickreply', [
-	'components', 'composer/autocomplete', 'api', 'alerts',
-], function (components, autocomplete, api, alerts) {
+	'components', 'composer/autocomplete', 'api', 'alerts', 'uploadHelpers',
+], function (components, autocomplete, api, alerts, uploadHelpers) {
 	var QuickReply = {};
 
 	QuickReply.init = function () {
@@ -27,6 +27,22 @@ define('persona/quickreply', [
 		// data.element.textcomplete(data.strategies, data.options);
 		// $('.textcomplete-wrapper').css('height', '100%').find('textarea').css('height', '100%');
 
+
+		uploadHelpers.init({
+			dragDropAreaEl: $('[component="topic/quickreply/container"] .quickreply-message'),
+			pasteEl: element,
+			uploadFormEl: $('[component="topic/quickreply/upload"]'),
+			inputEl: element,
+			route: '/api/post/upload',
+			callback: function (uploads) {
+				let text = element.val();
+				uploads.forEach((upload) => {
+					text = text + (text ? '\n' : '') + (upload.isImage ? '!' : '') + `[${upload.filename}](${upload.url})`;
+				});
+				element.val(text);
+			},
+		});
+
 		var ready = true;
 		components.get('topic/quickreply/button').on('click', function (e) {
 			e.preventDefault();

templates/chat.tpl

@@ -21,8 +21,12 @@
 					<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="1"></textarea>
 					<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
 					<span component="chat/message/remaining">{maximumChatMessageLength}</span>
+					<form component="chat/upload" method="post" enctype="multipart/form-data">
+						<input type="file" name="files[]" multiple class="hidden"/>
+					</form>
 				</div>
 			</div>
+			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 		</div>
 	</div>
 </div>

templates/chats.tpl

@@ -13,4 +13,5 @@
 	<div component="chat/main-wrapper">
 		<!-- IMPORT partials/chats/message-window.tpl -->
 	</div>
+	<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 </div>

templates/partials/chats/message-window.tpl

@@ -20,6 +20,9 @@
 		<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2"></textarea>
 		<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
 		<span component="chat/message/remaining">{maximumChatMessageLength}</span>
+		<form component="chat/upload" method="post" enctype="multipart/form-data">
+			<input type="file" name="files[]" multiple class="hidden"/>
+		</form>
 	</div>
 </div>
 <!-- ELSE -->

templates/partials/topic/quickreply.tpl

@@ -1,5 +1,5 @@
 <!-- IF privileges.topics:reply -->
-<div class="clearfix quick-reply">
+<div component="topic/quickreply/container" class="clearfix quick-reply">
 	<div class="icon pull-left hidden-xs">
 		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
 			{buildAvatar(loggedInUser, "46", true, "", "user/picture")}
@@ -13,8 +13,13 @@
 		<input type="hidden" name="_csrf" value="{config.csrf_token}" />
 		<div class="quickreply-message">
 			<textarea name="content" component="topic/quickreply/text" class="form-control" rows="5"></textarea>
+			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 		</div>
 		<button type="submit" component="topic/quickreply/button" class="btn btn-primary pull-right">[[topic:post-quick-reply]]</button>
 	</form>
+	<form component="topic/quickreply/upload" method="post" enctype="multipart/form-data">
+		<input type="file" name="files[]" multiple class="hidden"/>
+	</form>
+
 </div>
 <!-- ENDIF privileges.topics:reply -->