To achieve the desired behavior of prompting a confirmation message before allowing file selection via clicking or drag-and-drop, you can use a combination of JavaScript and CSS in your OutSystems application. Below are the steps to implement the functionality:

Step 1: Create a Custom Button Create a custom button that will be visible to the user instead of the default file input widget. The custom button will serve as a trigger to open the file browser or handle the drag-and-drop event.

Step 2: Hide the Default File Input Hide the default file input widget using CSS so that users only interact with the custom button.

Step 3: Implement Confirmation Logic When the custom button is clicked or when the user drags and drops a file onto the widget area, use JavaScript to prompt the confirmation message. If the user confirms, programmatically trigger the click event on the hidden file input to open the file browser or proceed with file upload.

Here's an example of how you can achieve this in OutSystems:

1. Create a custom button using a regular button or link widget in your OutSystems screen. Style the button to make it visually appealing and recognizable as a file upload trigger.

2. Hide the default file input widget using CSS. Add a CSS class (e.g., "hidden-file-input") to the file input widget, and define the CSS class to hide it:

css

.hidden-file-input {  display: none;}

3. Add an onclick event to the custom button and an ondragover event to the widget area (where you expect the user to perform the drag-and-drop action). In both events, use JavaScript to prompt the confirmation message and trigger the click event on the hidden file input if the user confirms.

JavaScript code:

javascript

function confirmFileSelection() {  if (confirm("Do you want to select/upload the file?")) {    // User confirmed, trigger click event on the hidden file input    document.getElementById("hiddenFileInput").click();  } else {  

  // User canceled, do nothing 

 }

}

function handleDragOver(event) { 

 event.preventDefault();}

function handleDrop(event) { 

 event.preventDefault();  

confirmFileSelection();}

document.addEventListener("DOMContentLoaded", function () {  document   

 .getElementById("customButton")   

 .addEventListener("click", confirmFileSelection);  

var widgetArea = document.getElementById("widgetArea");  widgetArea.addEventListener("dragover", handleDragOver);

  widgetArea.addEventListener("drop", handleDrop);});

4. In the OutSystems screen, apply the "hidden-file-input" CSS class to the default file input widget and set its ID to "hiddenFileInput."

5. In the custom button's onclick event, call the JavaScript function "confirmFileSelection()" to prompt the confirmation message and trigger the file input click event.

6. In the widget area (where drag-and-drop is allowed), apply the "handleDragOver" and "handleDrop" JavaScript functions to the corresponding events.

By following these steps, you should be able to prompt a confirmation message before allowing the file selection via clicking or drag-and-drop, as per your requirements.

Hi Mr. Shravanth, 

Thanks for the input, but have you tried out the forge? Or do you have any samples/oml to achieve that? I'm not trying to offend you, but your recent posts look like "ChatGPT-Generated" to me. But nevertheless, really appreciate your effort in looking into this :) 

Regards,

Kenny