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.
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
        e1['image']=img # garbage collection 
        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

Subscribe