feat: added a drag and drop zone in pro platform (#10569)

<!-- IMPORTANT CHECKLIST
Make sure you've done all the following (You can delete the checklist
before submitting)
- [ ] PR title is prefixed by one of the following: feat, fix, docs,
style, refactor, test, build, ci, chore, revert, l10n, taxonomy
- [ ] Code is well documented
- [ ] Include unit tests for new functionality
- [ ] Code passes GitHub workflow checks in your branch
- [ ] If you have multiple commits please combine them into one commit
by squashing them.
- [ ] Read and understood the [contribution
guidelines](https://github.com/openfoodfacts/openfoodfacts-server/blob/main/CONTRIBUTING.md)
-->
### What

Added a drag and drop zone to the pro platform to upload product data. 

### Screenshot

![Peek 2024-07-19
13-11](https://github.com/user-attachments/assets/72ddea1b-e46a-4e80-b434-dcd3dc0ea3a6)

---------

Co-authored-by: Alex Garel <[email protected]>

po/common/common.pot

@@ -7060,6 +7060,14 @@ msgctxt "last_import"
 msgid "Last import date"
 msgstr "Last import date"
 
+msgctxt "drop_a_file"
+msgid "Drop"
+msgstr "Drop"
+
+msgctxt "select_product_data_file"
+msgid "Select a file with product data"
+msgstr "Select a file with product data"
+
 msgctxt "number_of_products_without_nutriscore"
 msgid "Number of products without Nutri-Score"
 msgstr "Number of products without Nutri-Score"

po/common/en.po

@@ -7046,6 +7046,14 @@ msgctxt "last_import"
 msgid "Last import date"
 msgstr "Last import date"
 
+msgctxt "drop_a_file"
+msgid "Drop"
+msgstr "Drop"
+
+msgctxt "select_product_data_file"
+msgid "Select a file with product data"
+msgstr "Select a file with product data"
+
 msgctxt "number_of_products_without_nutriscore"
 msgid "Number of products without Nutri-Score"
 msgstr "Number of products without Nutri-Score"
@@ -7068,4 +7076,4 @@ msgstr "Opp. for Nutri-Score improvements"
 
 msgctxt "date_of_last_update"
 msgid "Date of last update"
-msgstr "Date of last update"
+msgstr "Date of last update"

po/common/fr.po

@@ -6942,4 +6942,12 @@ msgstr "Date de dernière connexion"
 
 msgctxt "last_import"
 msgid "Dernière date d'importation"
-msgstr "Dernière date d'importation"
+msgstr "Dernière date d'importation"
+
+msgctxt "drop_a_file"
+msgid "Drop"
+msgstr "Glissez"
+
+msgctxt "select_product_data_file"
+msgid "Select a file with product data"
+msgstr "Choisissez un fichier avec les données des produits"

scss/_off.scss

@@ -1903,4 +1903,46 @@ div.open-in-crm {
     flex-grow: 1;
     margin: 0 1em 0 0;
   }
-}
+}
+/* Styling drag and drop panel on /cgi/import_file_upload.pl */
+.dragover {
+  border: 2px dashed #ff8614 !important;
+  background-color: #ffefef;
+
+  & #upload_icon {
+    color: #ffa753!important;
+  }
+
+  & [id^="file_input_button_"] {
+    background-color: color.scale($button-bg-color, $lightness: $button-function-factor * -0.5);
+    color: #fff;
+  }
+}
+
+.drop-zone {
+  border: 2px dashed black; 
+  border-radius: 5px;
+  background-color: #ece9e6; 
+  padding: 2em;
+
+  & > #upload_icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #c6c0b2;
+
+    svg { 
+      height: 2.8em;
+      width: auto;
+      margin-bottom: 0.5em;
+    }
+  }
+
+  & > #description {
+    text-align: center;
+    font-size: 1.2em;
+    color: #8c877c;
+    margin-bottom: 1em;
+  }
+}
+

templates/web/pages/import_file_upload/import_file_upload.tt.html

@@ -15,28 +15,42 @@
 
 <p>&rarr; <a href="/cgi/generate_sample_import_file.pl">[% lang("download_sample_import_file") %]</a></p>
 
-<form method="post" action="/cgi/import_file_upload.pl" enctype="multipart/form-data" id="upload_file_form">
-	<a class="button small expand" id="file_input_button_$id">
-		<div id="file_input_div_$id">
-			[% display_icon('arrow_upward') %] [% lang("upload_product_data_file") %]
-			<input type="file" accept=".csv,.tsv,.xlsx,.xls,.ods" class="file_input" name="file_input_$id" id="file_input_$id"
-				style="position: absolute;right:0;bottom:0;top:0;cursor:pointer;opacity:0;width:100%;height:100%;"/>
-		</div>
-	</a>
-
-	<div id="progressbar_$id" class="progress" style="display:none">
-		<span id="progressmeter_$id" class="meter" style="width:0%"></span>
+<div class="drop-zone" id="dropZone_$id">
+
+	<div id="upload_icon">
+		[% display_icon('upload_file') %]
 	</div>
 
-	<div id="file_input_msg_$id" data-alert class="alert-box info" style="display:none">
-		[% lang("uploading_file") %]
-		<a href="#" class="close">&times;</a>
+	<div id="description">
+		<p> [% lang('drop_a_file') %] [% lang('search_or') %]</p>
 	</div>
 
-	<div id="file_input_error_$id" data-alert class="alert-box alert" style="display:none">
-		[% lang("upload_error") %]
-		<a href="#" class="close">&times;</a>
-	</div>
-</form>
+	<form method="post" action="/cgi/import_file_upload.pl" enctype="multipart/form-data" id="upload_file_form">
+
+		<a class="button small expand button-background-hover" id="file_input_button_$id">
+			<div id="file_input_div_$id">
+				[% lang('select_product_data_file') %]
+				<input type="file" accept=".csv,.tsv,.xlsx,.xls,.ods" class="file_input" name="file_input_$id" id="file_input_$id"
+					style="position: absolute;right:0;bottom:0;top:0;cursor:pointer;opacity:0;width:100%;height:100%;"/>
+			</div>
+		</a>
+
+		<div id="progressbar_$id" class="progress" style="display:none">
+			<span id="progressmeter_$id" class="meter" style="width:0%"></span>
+		</div>
+
+		<div id="file_input_msg_$id" data-alert class="alert-box info" style="display:none">
+			[% lang("uploading_file") %]
+			<a href="#" class="close">&times;</a>
+		</div>
+
+		<div id="file_input_error_$id" data-alert class="alert-box alert" style="display:none">
+			[% lang("upload_error") %]
+			<a href="#" class="close">&times;</a>
+		</div>
+
+
+	</form>
+</div>
 
 <!-- end templates/[% template.name %] -->

templates/web/pages/import_file_upload/import_file_upload.tt.js

@@ -1,3 +1,13 @@
+/**
+ * Handle the file upload logic
+ *
+ * As a file is uploaded, it send the data to the server in background.
+ *
+ * If the response is ok, it redirects to the location provided in response,
+ * otherwise it handles error.
+ *
+ * It also handles displaying a progress bar.
+ */
 \$('#file_input_$id').fileupload({
 	sequentialUploads: true,
 	dataType: 'json',
@@ -44,3 +54,35 @@
 		\$("#file_input_debug_$id").html(data.loaded + ' / ' + data.total);
 	}
 });
+
+
+/**
+ * Handles the drop zone logic
+ *
+ * It reuse the file upload component, so that all the same logic is applied.
+ */
+\$(function() {
+	var dropZone = document.getElementById('dropZone_$id');
+	var fileInput = document.getElementById('file_input_$id');
+
+	dropZone.addEventListener('dragover', function(e) {
+		e.preventDefault();
+		dropZone.classList.add('dragover');
+	});
+
+	dropZone.addEventListener('dragleave', function(e) {
+		e.preventDefault();
+		dropZone.classList.remove('dragover');
+	});
+
+	dropZone.addEventListener('drop', function(e) {
+		e.preventDefault();
+		dropZone.classList.remove('dragover'); 
+
+		var files = e.dataTransfer.files;
+		if (files.length > 0) {
+			fileInput.files = files;
+
+		}
+	});
+});