Make a new file alongside your friendslist.py file named avatarwindow.py:

import base64
import os
import tkinter as tk
import tkinter.ttk as ttk
from tkinter import filedialog

avatar_file_path = os.path.abspath(os.path.join(os.path.dirname(__file__), "images/avatar.png"))

Our user's avatar will sit in a predefined file. This will be named avatar.png and will sit in the images folder. We create a variable named avatar_file_path to hold the absolute path to this file.

In order to store our image data in our database, we will be base64 encoding the content of the file. To do this, we will need to import the base64 module:

class AvatarWindow(tk.Toplevel):
    def __init__(self, master):
        super().__init__()

        self.master = master
        self.transient(master)

        self.title("Change Avatar")
        self.geometry("350x200")

        self.image_file_types = [
            ("Png Images", ("*.png", "*.PNG")),
        ]

After defining some usual features of the window, we create an attribute called image_file_types, which will hold the possible file types which the user can use as their avatar. Since we have already defined that our avatar will be a .png image, we will restrict the user to only being able to upload .png files:

self.current_avatar_image = tk.PhotoImage(file=avatar_file_path)

self.current_avatar = ttk.Label(self, image=self.current_avatar_image)
choose_file_button = ttk.Button(self, text="Choose File", command=self.choose_image)

self.current_avatar.pack()
choose_file_button.pack()

We display two widgets in this window: a Label showing the currently-set avatar image and a Button which will open up a file picker for the user to choose their new avatar image.

We bind the button to a method named choose_image:

def choose_image(self):
    image_file = filedialog.askopenfilename(filetypes=self.image_file_types)

    if image_file:
        img_contents = ""
        img_b64 = ""
        with open(avatar_file_path, "rb") as img:
            img_contents = img.read()
            img_b64 = base64.urlsafe_b64encode(img_contents)

        self.master.requester.update_avatar(self.master.username, img_b64)
        self.current_avatar_image = tk.PhotoImage(file=avatar_file_path)
        self.current_avatar.configure(image=self.current_avatar_image)

The first thing to do in this method is to get the user to choose the path to an image file. We use the askopenfilename method of the filedialog module in order to do this. We pass our image_file_types over as the filetypes argument to ensure that the user chooses only .png images.

If the user chooses an image file, then we will base64 encode its content to send over to our web service. After opening the chosen file, we use the urlsafe_b64encode method to do this, since we will be sending the encoded content over HTTP.

To send this content over to our database, we call upon the update_avatar method of our Requester (which we will write next), passing it our username and encoded avatar data.

To finish off, we create a new PhotoImage object of the user's new avatar and update our Label to display it.

If we want to try this window out, without integrating it back into our FriendsList class, we will need an if __name__ == "__main__" block:

if __name__ == "__main__":
    win = tk.Tk()
    aw = AvatarWindow(win)
    win.mainloop()

Before we can get this working, we will need to update our database and web service to handle avatars, since there is currently nowhere to store them.