usability - How to edit form with existing uploaded file

I have a simple form which requests text data, and has a file input. When the data is entered and a file selected, it is uploaded and becomes part of the record.

I'm wondering what is the correct UI/UX for when the user wants to edit this form, specifically in regards to the file.

My idea was to show the existing filename with a "Delete file" link, and a hidden file form element. If the user clicks "Delete file", the request is done via ajax, and if successful the file form element is made visible.

What has me considering this approach is that I'm making permanent changes without ever clicking the "Save" button. So the user could delete the file, then click Cancel, but a change would have occurred.

Is there a known pattern for this?

Answer

Don't do anything critical (e.g. delete a file) without adequately prompting the user, or providing the option to reverse it (relevant question on this here).

For your case, I would suggest changing "delete file" to "replace file". Then the following process can occur:

1. User edits the form


2. User clicks replace file (nothing happens on back end)


3. User selects new file


4. User clicks save/apply


5. New file is uploaded and validated


6. Old file is deleted


7. The form is submitted

The overall point is, don't actually delete the file when the user clicks delete for two reasons:

• The user may not be able to find a valid replacement file


• The user may cancel the edit or accidentally close the tab