ajout des boutons upload/download/remove

upload retourne juste le nom du fichier (problème), manque les fonction de l'agent

Server/FileExplorer/index.html

@@ -55,8 +55,7 @@
 					return json.data;
 				}
 			},
-			  "columns": [
-				{
+			"columns": [{
 					"data": null,
 					"render": function(data, type, full, meta) {
 						if (data.url.includes("img")) {
@@ -79,10 +78,16 @@
 						return '<i class="fas fa-folder mr-3"></i>' + data;
 					}
 				},
-				{ "data": "modified" },
-				{ "data": "size" }
+				{
+					"data": "modified"
+				},
+				{
+					"data": "size"
+				}
 			],
-                "order": [[ 1, "asc" ]], //column indexes is zero based
+			"order": [
+				[1, "asc"]
+			], //column indexes is zero based
 			"createdRow": function(row, data, dataIndex) {
 				$(row).addClass('d-flex align-items-center');
 			}
@@ -92,16 +97,11 @@
 		var th = $('#explorer').find('thead th').eq(0);
 		th.html('<input type="checkbox" id="select-all-checkbox" class="sorting_disabled checkbox_style" value="false">');
 
+		
         // Add click event listener to select all checkbox
 		$('#select-all-checkbox').on('click', function() {
 			$('input[type="checkbox"]').prop('checked', $(this).prop('checked'));
 
-			  // Show/hide the buttons based on the number of checked checkboxes
-			  if ($('input[type="checkbox"]:checked').length > 0) {
-				$('#delete-button, #download-button, #upload-button').show();
-			  } else {
-				$('#delete-button, #download-button, #upload-button').hide();
-			  }
 		});
 
 		// Add click event listener to table rows
@@ -114,8 +114,10 @@
 			$.ajax({
 				type: 'POST',
 				url: '/get_data',
-				contentType : "text/plain",
-				data: {folder_path: clickedText},
+				contentType: "text/plain",
+				data: {
+					folder_path: clickedText
+				},
 				success: function(data) {
 					// Update the data table with the new data
 					$('#explorer').DataTable().clear();
@@ -128,17 +130,89 @@
 			});
 		});
 
-            // Add event listener to checkbox inputs
-          $('#explorer tbody').on('change', 'input[type="checkbox"]', function() {
-            // Get the number of checked checkboxes
-            var numChecked = $('input[type="checkbox"]:checked').length;
+		// Add buttons to the table
+		$('#explorer').before('<div class="button-group"><button id="download-button">Download</button><button id="upload-button">Upload</button><button id="remove-button">Remove</button></div>');
 
-            // Show/hide the buttons based on the number of checked checkboxes
-            if (numChecked > 0) {
-              $('#delete-button, #download-button, #upload-button').show();
-            } else {
-              $('#delete-button, #download-button, #upload-button').hide();
+        function get_checked_rows() {
+			var checkboxes = document.querySelectorAll('input[type="checkbox"]');
+		    var urlColumn = table.column(1);
+            const re = [];
+
+            for (let i = 1; i < checkboxes.length; i++) {
+                let checked = checkboxes[i].checked;
+                if (checked) {
+                    re.push(urlColumn.data()[i]);
                 }
+            }
+
+            return re;
+        }
+
+        // function to send data to the server
+        function send_from_button(action) {
+			var to_send = [];
+			to_send.push(action);
+
+			if (action != "upload") {
+				to_send = to_send.concat(get_checked_rows());
+			} else {
+				// Open file explorer and get selected file
+				var promise = new Promise(function(resolve, reject) {
+					var input = document.createElement('input');
+					input.type = 'file';
+					input.onchange = function(event) {
+						var file = event.target.files[0];
+						if (file) {
+							var fullpath = file.webkitRelativePath || file.name; // get full path or name if not supported
+							resolve(fullpath);
+						} else {
+							reject('No file selected');
+						}
+					};
+					input.click();
+				});
+
+				promise.then(function(fullpath) {
+					to_send.push(fullpath);
+					console.log(to_send);
+
+					// Send an AJAX request to the Flask app to retrieve the updated data
+					$.ajax({
+						type: 'POST',
+						url: '/interact',
+						contentType: "application/json",
+						data: JSON.stringify({ to_send })
+					});
+				}).catch(function(error) {
+					console.error(error);
+				});
+			}
+
+			if (to_send.length > 1 && action != "upload") {
+				console.log(to_send);
+
+				// Send an AJAX request to the Flask app to retrieve the updated data
+				$.ajax({
+					type: 'POST',
+					url: '/interact',
+					contentType: "application/json",
+					data: JSON.stringify({ to_send })
+				});
+			}
+		}
+
+		// Add event listener to the download button
+		$('#download-button').on('click', function() {
+            send_from_button("download");
+		});
+
+		$('#upload-button').on('click', function() {
+			send_from_button("upload");
+		});
+
+		// Add event listener to the remove button
+		$('#remove-button').on('click', function() {
+		    send_from_button("remove");
         });
 	});
     </script>

Server/Server.py

@@ -69,8 +69,27 @@ def index() :
     index_path = os.path.join(os.getcwd(), 'FileExplorer/index.html')
     return send_file(index_path)
 
-FILES_=[]
 path_file_ex = ""
+
+@app.route('/interact', methods=['POST'])
+def interact() :
+    file_list = request.get_json()["to_send"]
+    action = file_list.pop(0)
+    
+    print(file_list)
+    match action :
+        case "download" :
+            print("d")
+
+        case "upload" :
+            print("u")
+
+        case "remove" :
+            print("r")
+
+    return 'ok'
+
+FILES_=[]
 @app.route('/get_data', methods=['POST'])
 def get_data() :
     global path_file_ex