showing unsaved changes to a user on a web form

Question

I've done some research on this and so far I can only find guidance for files and tabs:

Denoting a tab as being "unsaved" in a web application

Is there a better character than the asterisk to indicate a modified document?

However i feel my problem is different.

Here is an example of my configuration page. The user is able to upload 3 different files, for each upload they will need to click upload.

The user may also wish to view the content of the file before it is saved by clicking 'show current'.

Once the user has uploaded a new file but NOT clicked submit I want to show them that there are pending changes to be submitted

Question: How do i show this to the user? My research says I should use a red asterisk, however, on a webform, this normally means a required field.

The options i've though of so far are below:

Answer 1

The workflow here is not as intuitive as it could be.

Try listing out the exiting files with buttons for viewing and replacing

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

Clicking the 'View' button would open the file for viewing/checking and clicking the 'Replace' button would open an 'Upload' dialogue to get the new file's location

^{download bmml source}

Files that have been replaced could then be shown as 'New' rather than 'unsaved changes'. As the files haven't actually been uploaded yet, you could also offer a 'Revert' button here to enable the user to roll back changed files.

^{download bmml source}

Clicking 'Submit' finally commits the selected new files to replace the existing ones.

This feels a little more intuitive to me and includes plenty of points for a sanity check to lower the chances of the wrong file being replaced.

The upload dialogue can also be used for adding new files to the list.

Lastly, it may be a good idea to include a 'Cancel' button along side the 'Submit' so that users who have wandered in there by mistake can get out safely without causing any damage.

Answer 2

Indication of asterisk totally changes the meaning to MANDATORY. so avoid using that in any case. rather going for this kind of approach you can try something like the one in the attachment.

----EDIT and upload options can be shown on hover over the file.