Require confirmation for photo component

[mixmaniax]

Hi there
Is there a way to require a confirmation before deleting a photo/picture using the photo component on a form. I would like to avoid that someone by mistake deletes it when pressing the X - as it will immediately delete the shown picture.

Thank you in advance for any suggestion.

[melohagan]

Hi @mixmaniax

I'm not quite sure which component you are referring to when you say "photo component" ?

[mixmaniax]

Hi @melohagan

Sorry, I mean the attachment component...see screenshot below...

[melohagan]

Perfect, thank you. There's no way to do this at the moment but it might be something we can add. I'm just wondering what the issue is. If they click the 'X' can they not just upload the image again?

[mixmaniax]

Thank you @melohagan

Indeed re-upload would be an option. The issue in my use case is, that I'm thinking of a new employee onboarding process where the HR dept needs multiple information and also an ID or Passport picture along the info his/her manager need to provide for the application. I tested the attachment component with a smartphone and there is the option to take a picture directly from the smartphone. At that point once uploaded with the form obviously there is no local attachment for it. So in case someone of the HR dept. by mistake clicks on the "delete attachment" icon, that document/picture is gone without warning. That will generate additional workload for the HR/Manager and Employee to collect a copy of that document again. Having at least the possibility to activate a "require confirmation" for the delete action of the attachment component would surely reduce unnecessary administrative work.

Hope I was able to explain myself...

[melohagan]

Thanks for the additional context @mixmaniax

I've come up with a solution that may work for you, you'd just need to style it to your liking:

Step 1 - Remove the clear attachment button i.e. the 'X'

Add an embed to the top of your screen with the following content:

<style>
.delete-button {
  display: none !important;
}
</style>

Step 2 - Clear Attachments button

Add a button to your form and give it a name.
Define actions for on click and Update State; setting a variable named clear to 'true'.

Also configure conditions for the button as follows:

JavaScript binding

return (!$("State.clear") || $("State.clear") === "false") && $("New Form.Fields.Attachment")?.length > 0;

We are checking to see if if the Clear Attachments button has been clicked, but also we don't want to show the button if there are no attachments uploaded.

Step 3 - Are you sure prompt

Add a container with a warning message and two buttons for Yes/No.
Your component tree should look roughly like so:

Add a condition to the container as follows:

For the Yes button, define two actions as follows:

Finally for the Cancel button, define the same action as above for setting the clear state to 'false'.

[mixmaniax]

Hi @melohagan

Wow - thank you for the reply - looks promising. I followed your instruction, but I'm not able to make it work. The button in Step 2 - Clear Attachments button does not even shows up - seems to be something with the condition java. I used the "Employee Directory" template as to enhance with your instructions. Maybe I should start from scratch and try. Eventuelly could you export your app so I can import it and try it out?

Thank you very much for your very appreciated assistance.

[melohagan]

Maybe for step 2 your syntax is a little off or something isn't configured just right? It was a little fiddly because you have to check if the clear state is "false" or not set at all, because initially all app state variables are undefined.

Here is the app export; hope it helps!
Sales App-export-1663080374950.txt

[mixmaniax]

Thank you very much for the example which works!
Found why my example did not work (typo on my side with the form name in the javascript binding in step 2, sorry for that).
What I now realize is that your solution would not be suitable in my use case because of the following:

1. for a row/record it will delete all attachments uploaded for an employee - e.g. employee "John" uploaded three documents and we want to delete number 2 of 3 and not all of them
2. clicking the "yes, clear the attachments!" will also clear out any form field e.g. the name of the employee and would need to be retyped along with all other form fields...

So I honestly guess for my use case there won't be a easy workarounds - if you have any other idea I'm happy to hear ;-)

Thank you anyhow for your effort in assisting my so quick!

[melohagan]

You're welcome. Instead of clearing the form, you can use the Update Field Value action to clear only the attachment field: https://docs.budibase.com/docs/actions#update-field-value

In addition, you could use JavaScript to shift the array if you only want to remove one attachment at a time.
https://reactgo.com/js-remove-first-element-of-array/#removing-the-first-element