Added profile picture preview on successful upload

[sachintom999]

Background

• In the user profile page, when a user uploads his profile picture, there is no preview of the uploaded picture. The user is not sure whether the upload is success or not. The uploaded profile picture is getting saved on submit though.

Demo

Solution

• Add an image preview element in the html ( which is not displayed by default ) , but will be visible with the last uploaded image when the image upload is success

Note :

• As per this solution, the Remove Button is hidden when user uploads a new picture, to avoid confusion. He can upload a new image to change the first uploaded image.
• The button is shown until he changes the original profile picture.
• Another observation is that, currently in the update profile page, we don't have a way to revert any unsaved text changes, unless he refreshes the page. Something like a Cancel button is a potential solution.
• The functionality of the Remove Button which deletes the original picture is retained.

Changes

• talent/templates/talent/profile_picture.html

Testing after fix

[sachintom999]

Changed id as it is same as the id of the div in line 1

[dogukanteber]

Thank you for your contribution @sachintom999. Normally, we avoid using Javascript as much as possible. Instead, we use Hyperscript. However, in this case, using Hyperscript instead of Javascript introduces more complexity, in my opinion.

I just wanted to give you an idea of how we do things.

After you modify the PR according to the comments I just left, we can merge it.

Once again, thank you for your work!

[sachintom999]

Thank you for your contribution @sachintom999. Normally, we avoid using Javascript as much as possible. Instead, we use Hyperscript. However, in this case, using Hyperscript instead of Javascript introduces more complexity, in my opinion.

I just wanted to give you an idea of how we do things.

After you modify the PR according to the comments I just left, we can merge it.

Once again, thank you for your work!

hi @dogukanteber ,
Thank you for reviewing.
Noted your point of using Hyperscript. Will keep in mind in the future PRs.

I have made the requested changes and pushed.

[dogukanteber]

Well done, thanks!