undo action and submit form

Question

I have a form where there is also the possibility to manage N files PDF. These files could be uploaded and, obviously, deleted.

For upload, I have a ajax uploading (when you choose a file, the file is automatically uploaded. During the process you could do other things or uploads other files).

^{download bmml source – Wireframes created with Balsamiq Mockups}

On the icon hover, there is the "X" button in order to delete the file.

In order to prevent accidentally deletions, I thought to do a "undo" flow.

^{download bmml source}

The file will be deleted on form submit.

At this point I have some doubt:

1. It's a good choice to do an automatic upload (no need to submit form) but for deletion no? (you need to submit the form)
2. if yes, What's the best terminology for indicate the user that he have to submit the form in order to complete deletion? I have no too much space. I thought "file will be deleted on submit". But "submit" is not a clear word, and more explicative phrases are too large.

Answer 1

Automatic uploading and deletion are consistent, no explicit submitting in both the actions.

A possible solution for final delete could be as pictured:

1. Focus user's attention on the deleted item (transition/color)
2. Display the Undo control for some time (5 s)
3. Delete the item and fade out the Undo control if no actions were took

Answer 2

If upload is possible without Submit, then deletion should be too. You can mark the files for deletion on the server, e.g. by setting up a deletion callback that will run after 1 minute unless it will be undone... Or move the file to to-be-deleted folder on deletion and move it back on undo + make sure to garbage collect files older than 1 day or whatever is right for your use case.

Answer 3

Instead of undoing the deletion, you may "flip" the file icon with a "click to confirm deletion" icon (or message).