Yii2 Update Profile Photo

Vote count:

0

I have here an Edit Profile page where user can change his/her profile photo/avatar.

The avatar displayed is the photo of the current user (of course) and when I click the Update Avatar button, the user can select an image, and then the selected image will preview replacing the current user avatar.

Here's my code in my view:

<div class="fileUpload btn btn-warning">
    <span>Update Avatar</span>
    <input type="file" accept="image/*" onchange="loadFile(event)" class="upload"/>
</div>
<script>
    var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

The problem is that, whenever I click the Update button at the end of the form, the avatar does not change. I know that this is because it's all in the front end. How do I get the newly selected image and save it to the database? Or are there other implementation aside from this one?

BTW, I chose this implementation because I want to preview the user's newly selected image before and after selection. I tried Kartik's FileInput widget but I don't know where to put the onchange="loadFile(event)" event in the plugin.

If you need more code, like my action controller or the model, just let me know.

Really need help in this one.

asked 1 min ago

kaynewilder

71

Yii2 Update Profile Photo