filedialog to browse and upload image file using askopenfilename() function and display in Tkinter

Tkinter
filedialog.askopenfile create a modal, native look-and-feel dialog for user to select and upload file from local system. .

Tkinter filedialog to read upload and adjust height width to resize multiple images to display

We will use askopenfilename() to open the local file browser and by which user will select one image file and on submit the image will be displayed in the Tkinter window.
Upload and display photo

import tkinter as tk
from tkinter import filedialog
from tkinter.filedialog import askopenfile

Here is the code to open one file browser dialog box and then select a file to upload. After uploading the image will be displayed in the Tkinter window.

import tkinter as tk
from tkinter import filedialog
from tkinter.filedialog import askopenfile
from PIL import Image, ImageTk
my_w = tk.Tk()
my_w.geometry("400x300")  # Size of the window 
my_w.title('www.plus2net.com')
my_font1=('times', 18, 'bold')
l1 = tk.Label(my_w,text='Add Student Data with Photo',width=30,font=my_font1)  
l1.grid(row=1,column=1)
b1 = tk.Button(my_w, text='Upload File', 
   width=20,command = lambda:upload_file())
b1.grid(row=2,column=1) 

def upload_file():
    global img
    f_types = [('Jpg Files', '*.jpg')]
    filename = filedialog.askopenfilename(filetypes=f_types)
    img = ImageTk.PhotoImage(file=filename)
    b2 =tk.Button(my_w,image=img) # using Button 
    b2.grid(row=3,column=1)

my_w.mainloop()  # Keep the window open

Output is here ( based on the uploaded file )

Image resizing before displaying

Based on the requirement we can change the dimension of the uploaded image and then display the same.
More in resizing Image using PIL

def upload_file():
    global img
    f_types = [('Jpg Files', '*.jpg')]
    filename = filedialog.askopenfilename(filetypes=f_types)
    img=Image.open(filename)
    img_resized=img.resize((400,200)) # new width & height
    img=ImageTk.PhotoImage(img_resized)
    b2 =tk.Button(my_w,image=img) # using Button 
    b2.grid(row=3,column=1)

Reading width and height of uploaded image and then resizing to maintain aspect ration

	img=Image.open(filename)
	width, height = img.size  
	width_new=int(width/3)
	height_new=int(height/3)
	img_resized=img.resize((width_new,height_new))

Upload & display multiple files

We will use the option multiple=True to allow multiple upload of files. Hold the Ctrl key to select multiple images.

Filedialog is here

f_types = [('Jpg Files', '*.jpg'),('PNG Files','*.png')]    
filename = tk.filedialog.askopenfilename( multiple=True,
	iletypes=f_types)

We kept three images in one row, we are resizing the images before displaying.

Tkinter Image not displaying

After creating PhotoImage or other image objects, we must keep the reference to the image object. If you don’t, the image won’t always show up. This is because of poor garbage management ( for images ) of Tkinter. Read this line in below code.

e1.image = img # keep a reference! by attaching it to a widget attribute

The problem is that the Tkinter/Tk interface doesn’t handle references to Image objects properly; the Tk widget will hold a reference to the internal object, but Tkinter does not. When Python’s garbage collector discards the Tkinter object, Tkinter tells Tk to release the image. But since the image is in use by a widget, Tk doesn’t destroy it. Not completely. It just blanks the image, making it completely transparent…

Full code is here

import tkinter as tk
from tkinter import *
from tkinter import filedialog
from tkinter.filedialog import askopenfile
from PIL import Image, ImageTk

my_w = tk.Tk()
my_w.geometry("410x300")  # Size of the window 
my_w.title('www.plus2net.com')
my_font1=('times', 18, 'bold')
l1 = tk.Label(my_w,text='Upload Files & display',width=30,font=my_font1)  
l1.grid(row=1,column=1,columnspan=4)
b1 = tk.Button(my_w, text='Upload Files', 
   width=20,command = lambda:upload_file())
b1.grid(row=2,column=1,columnspan=4)

def upload_file():
    f_types = [('Jpg Files', '*.jpg'),
    ('PNG Files','*.png')]   # type of files to select 
    filename = tk.filedialog.askopenfilename(multiple=True,filetypes=f_types)
    col=1 # start from column 1
    row=3 # start from row 3 
    for f in filename:
        img=Image.open(f) # read the image file
        img=img.resize((100,100)) # new width & height
        img=ImageTk.PhotoImage(img)
        e1 =tk.Label(my_w)
        e1.grid(row=row,column=col)
        e1.image = img # keep a reference! by attaching it to a widget attribute
        e1['image']=img # Show Image  
        if(col==3): # start new line after third column
            row=row+1# start wtih next row
            col=1    # start with first column
        else:       # within the same row 
            col=col+1 # increase to next column                 
my_w.mainloop()  # Keep the window open

Tkinter window to upload and insert image to MySQL Blob Data column
Tkinter Filedialog Treeview asksaveasfile()

Python Tkinter Dictionary Python- Tutorials

Subscribe to our YouTube Channel here

	21-10-2022
Thanks a lot

Browse Upload & Display Image in Tkinter

Image resizing before displaying

Upload & display multiple files

Tkinter Image not displaying

Subscribe