How to edit form with existing uploaded file

Question

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 1

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

Answer 2

As long as that initial upload isn't referenced elsewhere it makes sense. Also make sure the user is aware that this is final. Perhaps a prompt, "is this ok to delete forever?"

Answer 3

WooCommerce does that: when you edit a Category, you can upload a category thumbnail, and then replace it editing the category again.

On the Edit page, you should let the user to

• remove the previously uploaded file
• replace the previously uploaded file with another file to upload

The update should be effective only when the form is submitted, so that replacing the uploaded file would be like changing any other input field in the form.