Upload and save picture immediately after selection

Question

I currently have an interface for editing a user's profile in a web app:

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

There's a discrete form in each tab of the accordion with its own submit button.

Now the question: I have seen sites such as facebook immediately upload and use a picture once the user has selected it from the browser's file selection diaglogue, hence, there is no need to submit the form after selecting the file.

However, in my case, I have a submit button for updating those text fields. Should I immediately upload and save the picture and update the displayed picture (and immediately delete the picture if the "x" is clicked) without the user having to click the "update profile button"? For updating the text fields, they would need to click the "update profile" button for the changes to be saved.

Is this something that can confuse users?

Answer 1

Definitely this is something that can be confusing for users.

I would separate the two halves of the pane - with a divider between image and details, thus making the 'Update Profile' button more clearly related only to the fields.

Yes, immediately upload and display the picture, and immediately delete the picture as soon as the delete button is pressed, but just separate the two halves and I think it will become clearer...

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