Python Flask App - Upload Image and Display

share link

by vsasikalabe dot icon Updated: Mar 9, 2023

technology logo
technology logo

Solution Kit Solution Kit  

We have to create an HTML file and a Flask app file. The html code will define the body of the output. The app file will implement the execution of the operation. The uploaded route file will give the route to the directory of the image. After selecting the image from the folder, the upload button will display the selected image.  

You can use this application through the Flask framework. We have to declare the file upload location and the maximum size of the image file a user can upload. We can not upload unlimited sizes of files due to security reasons or to avoid memory space. We put the standard directory for storing static resources such as images, CSS, and Javascript files under the static directory into the Flask application. We can put the uploaded file under the static/uploads directory. Finally, the image will be displayed on the web page. 

  • Displaying local images - You'll see the methods for displaying them on the client side since local images are already in our storage system. 
  • Uploading and displaying the dynamic images - We have to store the uploaded image in your specified folder and then display that uploaded image from the folder. 

Before instantiating the app, we first imported Flask and render_template. You can display the image by inserting that variable in the img tag in the HTML file (by storing the image in the variable). 

Here is an example of how to Upload an image and display using the Python Flask App: