Display User Profile Image

[sgiraz]

Hi guys,

I noticed that there is an avatar-placeholder in the main page of homebox that point to the /main page. It would be nice to have the possibility to upload a custom profile image to show instead of the default grey circle. What do you think?

I never used Vue, but I try to start with some minor changes in default.vue file:

...
              <NuxtLink class="avatar placeholder" to="/home">
                <div class="bg-base-300 text-neutral-content rounded-full w-24 p-4">
-                  <AppLogo />
+                  <img v-if="userImage" :src="userImage" alt="User Avatar" class="rounded-full w-24 h-24">
+                  <AppLogo v-else />
                </div>
              </NuxtLink>
...

Then I would add a button in the Profile section (next to the Generate Password button):

<input type="file" @change="handleImageUpload" accept="image/*">

And finally I would create somewhere a method to handle the image upload and store it in the component's data when the user selects an image.
Maybe something like this:

data() {
  return {
    userImage: null, // Store the uploaded image data
  };
},
methods: {
  handleImageUpload(event) {
    const file = event.target.files[0];

    // Ensure the file is an image
    if (file && file.type.startsWith('image/')) {
      const reader = new FileReader();

      reader.onload = () => {
        this.userImage = reader.result; // Store the uploaded image
      };

      reader.readAsDataURL(file);
    }
  },
},

cc @hay-kot