Back ArrowExplore all kits

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: 

Preview of the output that you will get on running this code from your IDE.

Code

In this solution we used flask library of python.

Python Flask App - Upload Image and Display

PythondotLines of Code : 17dotLicense : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries : 
@app.route('/upload-image', methods=['GET', 'POST'])
def upload_image():
    if request.method == "POST":
        if request.files:
            image = request.files["image"]
            image.save(os.path.join(app.config["IMAGE_UPLOADS"], image.filename))
            return render_template("upload_image.html", uploaded_image=image.filename)
    return render_template("upload_image.html")


@app.route('/uploads/<filename>')
def send_uploaded_file(filename=''):
    from flask import send_from_directory
    return send_from_directory(app.config["IMAGE_UPLOADS"], filename)

<img src="{{ url_for('send_uploaded_file', filename=uploaded_image) }}" />

Instructions

Follow the steps carefully to get the output easily.

  1. Download and Install the PyCharm Community Edition on your desktop.
  2. Install flask on your IDE from the python interpreter in the setting options.
  3. Create a new python file on your IDE.
  4. Copy the snippet using the 'copy' button and paste it into your python file.
  5. By clicking on the topic we get html code , copy and paste this code into html file(upload_image.html).Also paste above line no.16 to 34th of html code.
  6. Import flask and os. Create app object and app route.Add app.run statement to the end.
  7. Download the sample image for your project.
  8. Run the current file to generate the output.


I hope you found this useful. I have added the link to a dependent library, and version information in the following sections.


I found this code snippet by searching for ' Python Flask App - Upload Image and Display ' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. PyCharm Community Edition 2022.3.1
  2. The solution is created in Python 3.11.1 Version
  3. flask 2.2.2 Version


Using this solution, we can Upload Image and Display using python flask app.This process also facilities an easy to use, hassle free method to create a hands-on working version of code in python which would help us to Upload Image and Display using python flask app.

Dependent Libraries

flaskby pallets

Python doticonstar image 63300 doticonVersion:2.2.5doticon
License: Permissive (BSD-3-Clause)

The Python micro framework for building web applications.

Support
    Quality
      Security
        License
          Reuse

            flaskby pallets

            Python doticon star image 63300 doticonVersion:2.2.5doticon License: Permissive (BSD-3-Clause)

            The Python micro framework for building web applications.
            Support
              Quality
                Security
                  License
                    Reuse

                      If you do not have flask library that is required to run this code, you can install it by clicking on the above link.

                      You can search for any dependent library on kandi like flask.

                      Support

                      1. For any support on kandi solution kits, please use the chat
                      2. For further learning resources, visit the Open Weaver Community learning page

                      See similar Kits and Libraries

                      Open Weaver – Develop Applications Faster with Open Source

                      kandi

                      Community and Support

                      Company

                      Follow

                      • © 2023 Open Weaver Inc.