diff --git a/htdocs/core/js/lib_foot.js.php b/htdocs/core/js/lib_foot.js.php
index 963e357199a..a6d48d10b8e 100644
--- a/htdocs/core/js/lib_foot.js.php
+++ b/htdocs/core/js/lib_foot.js.php
@@ -379,3 +379,46 @@ print '
 		});
 	});
 '."\n";
+
+// Code to manage the drag and drop file
+//TODO: Find a way to display text over div
+print "\n/* JS CODE TO ENABLE DRAG AND DROP OF FILE */\n";
+print '
+	jQuery(document).ready(function() {
+		counterdragdrop = 0;
+		$(".cssDragDropArea").on("dragenter", function(ev) {
+			// Entering drop area. Highlight area
+			counterdragdrop++;
+			$(".cssDragDropArea").addClass("highlightDragDropArea");
+			ev.preventDefault();
+		});
+		
+		$(".cssDragDropArea").on("dragleave", function(ev) {
+		  	// Going out of drop area. Remove Highlight
+		  	counterdragdrop--;
+			if (counterdragdrop === 0) { 
+				$(".cssDragDropArea").removeClass("highlightDragDropArea");
+			}
+		});
+
+		$(".cssDragDropArea").on("dragover", function(ev) {
+			ev.preventDefault();
+			return false;
+		});
+
+		$(".cssDragDropArea").on("drop", function(e) {
+			console.log("Trigger event file droped");
+			e.preventDefault();
+			fd = new FormData();
+			var dataTransfer = e.originalEvent.dataTransfer;
+			if(dataTransfer.files && dataTransfer.files.length){
+				var droppedFiles = e.originalEvent.dataTransfer.files;
+				$.each(droppedFiles, function(index,file){
+					fd.append("file",file,file.name)
+				});
+			}
+			$(".cssDragDropArea").removeClass("highlightDragDropArea");
+			counterdragdrop = 0;
+		});
+	});
+'."\n";
diff --git a/htdocs/core/lib/functions.lib.php b/htdocs/core/lib/functions.lib.php
index 4af0bbe610a..9a4ee8976ce 100644
--- a/htdocs/core/lib/functions.lib.php
+++ b/htdocs/core/lib/functions.lib.php
@@ -1871,9 +1871,10 @@ function dol_fiche_head($links = array(), $active = '0', $title = '', $notab = 0
  *  @param	string	$morecss			More CSS on the link <a>
  *  @param	int		$limittoshow		Limit number of tabs to show. Use 0 to use automatic default value.
  *  @param	string	$moretabssuffix		A suffix to use when you have several dol_get_fiche_head() in same page
+ *  @param	int     $dragdropfile       0 (default) or 1. 1 enable a drop zone for file to be upload, 0 disable it
  * 	@return	string
  */
-function dol_get_fiche_head($links = array(), $active = '', $title = '', $notab = 0, $picto = '', $pictoisfullpath = 0, $morehtmlright = '', $morecss = '', $limittoshow = 0, $moretabssuffix = '')
+function dol_get_fiche_head($links = array(), $active = '', $title = '', $notab = 0, $picto = '', $pictoisfullpath = 0, $morehtmlright = '', $morecss = '', $limittoshow = 0, $moretabssuffix = '', $dragdropfile = 0)
 {
 	global $conf, $langs, $hookmanager;
 
@@ -2039,7 +2040,7 @@ function dol_get_fiche_head($links = array(), $active = '', $title = '', $notab
 	}
 
 	if (!$notab || $notab == -1 || $notab == -2 || $notab == -3) {
-		$out .= "\n".'<div class="tabBar'.($notab == -1 ? '' : ($notab == -2 ? ' tabBarNoTop' : (($notab == -3 ? ' noborderbottom' : '').' tabBarWithBottom'))).'">'."\n";
+		$out .= "\n".'<div class="tabBar'.($notab == -1 ? '' : ($notab == -2 ? ' tabBarNoTop' : (($notab == -3 ? ' noborderbottom' : '').' tabBarWithBottom'))).(!empty($dragdropfile) ? ' cssDragDropArea' : '').'">'."\n";
 	}
 
 	$parameters = array('tabname' => $active, 'out' => $out);
diff --git a/htdocs/fourn/commande/card.php b/htdocs/fourn/commande/card.php
index f79c9fe49b4..5eb7f1a4539 100644
--- a/htdocs/fourn/commande/card.php
+++ b/htdocs/fourn/commande/card.php
@@ -1884,7 +1884,7 @@ if ($action == 'create') {
 	$head = ordersupplier_prepare_head($object);
 
 	$title = $langs->trans("SupplierOrder");
-	print dol_get_fiche_head($head, 'card', $title, -1, 'order');
+	print dol_get_fiche_head($head, 'card', $title, -1, 'order', 0, '', '', 0, '', 1);
 
 
 	$formconfirm = '';
diff --git a/htdocs/theme/eldy/global.inc.php b/htdocs/theme/eldy/global.inc.php
index cab0cb247ca..73a24a1671a 100644
--- a/htdocs/theme/eldy/global.inc.php
+++ b/htdocs/theme/eldy/global.inc.php
@@ -7591,7 +7591,22 @@ div.clipboardCPValue.hidewithsize {
 	/* filter: blur(4px); */
 }
 
+/* ============================================================================== */
+/* For drag and drop feature                                                         */
+/* ============================================================================== */
 
+.cssDragDropArea{
+  border: 2px rgba(123, 123, 123, .2) dashed !important;
+  padding: 10px !important;
+}
+.highlightDragDropArea{
+	border: 2px #000 dashed !important;
+	background-color: #666 !important;
+}
+.highlightDragDropArea > *{
+	opacity:0.5;
+	filter: blur(3px) grayscale(100%);
+}
 /* ============================================================================== */
 /* CSS style used for small screen                                                */
 /* ============================================================================== */