diff --git a/composer-dist.json b/composer-dist.json
index e4628d19f..4a17c86c8 100644
--- a/composer-dist.json
+++ b/composer-dist.json
@@ -28,6 +28,7 @@
         "zf1/zend-search-lucene": "*",
         "symfony/http-foundation": "^5.4",
         "php-di/php-di": "^6.4",
+        "hfig/mapi": "*",
         "slim/psr7": "^1.7",
         "bacon/bacon-qr-code": "^3.0",
         "seeddms/core": "dev-__CORE_BRANCH__",
diff --git a/composer.json b/composer.json
index 0f11d9a3d..f416533b9 100644
--- a/composer.json
+++ b/composer.json
@@ -44,6 +44,7 @@
         "zf1/zend-search-lucene": "*",
         "symfony/http-foundation": "^5.4",
         "php-di/php-di": "^6.4",
+        "hfig/mapi": "*",
         "slim/psr7": "^1.7",
         "bacon/bacon-qr-code": "^3.0",
         "seeddms/core": "dev-seeddms-6.0.x",
diff --git a/views/bootstrap/styles/application.js b/views/bootstrap/styles/application.js
index f21d8fb5f..a249aae65 100644
--- a/views/bootstrap/styles/application.js
+++ b/views/bootstrap/styles/application.js
@@ -1147,9 +1147,11 @@ $(document).ready(function() { /* {{{ */
 		e.stopPropagation();
 		e.preventDefault();
 		$(this).css('border', '2px dashed #0B85A1');
+		$(this).css('background-color', '#80808080');
 	});
 	$(document).on('dragleave', "#draganddrophandler", function (e) {
 		$(this).css('border', '0px solid white');
+		$(this).css('background-color', '');
 	});
 	$(document).on('dragover', "#draganddrophandler", function (e) {
 		e.stopPropagation();
@@ -1157,6 +1159,7 @@ $(document).ready(function() { /* {{{ */
 	});
 	$(document).on('drop', "#draganddrophandler", function (e) {
 		$(this).css('border', '0px dotted #0B85A1');
+		$(this).css('background-color', '');
 		e.preventDefault();
 
 		attr_rel = $(this).data('droptarget');
diff --git a/views/bootstrap4/styles/application.js b/views/bootstrap4/styles/application.js
index 4835fcef1..408254a8c 100644
--- a/views/bootstrap4/styles/application.js
+++ b/views/bootstrap4/styles/application.js
@@ -1195,9 +1195,11 @@ $(document).ready(function() { /* {{{ */
 		e.stopPropagation();
 		e.preventDefault();
 		$(this).css('border', '2px dashed #0B85A1');
+		$(this).css('background-color', '#80808080');
 	});
 	$(document).on('dragleave', "#draganddrophandler", function (e) {
 		$(this).css('border', '0px solid white');
+		$(this).css('background-color', '');
 	});
 	$(document).on('dragover', "#draganddrophandler", function (e) {
 		e.stopPropagation();
@@ -1205,6 +1207,7 @@ $(document).ready(function() { /* {{{ */
 	});
 	$(document).on('drop', "#draganddrophandler", function (e) {
 		$(this).css('border', '0px dotted #0B85A1');
+		$(this).css('background-color', '');
 		e.preventDefault();
 
 		attr_rel = $(this).data('droptarget');