Adding Images to your Flask web application.
In some web applications, such as a marketplace or social media service, images are absolutely necessary. Can you imagine purchasing items with no photo preview or liking images you cannot even see to begin with? How then can you add these images to you web application? Adding images to your web application is fairly easy in Python’s Flask framework and can be accomplished through the following steps:
(DISCLAIMER: The article is not so helpful for absolute beginners in Flask and also assumes that the readers are familiar with certain flask_extensions such as flask_wtf)
(The article includes links to gists with my code for reference and comparison — if needed)
Deciding whether to store the image in file system or in the database
Storing your image in a database vs storing them in your application’s file system has always been a major debate over the years. Personally, I prefer pragmatism over rigidity and hold the view that an application’s design should vary on a case to case basis depending on your data and resource options. In this particular case, I prefer having the images stored in a file system rather than the database for a couple of reasons including easier backup of the images and easier resource overhead when trying to retrieve the images. For more insight on the topic, check out these ‘quorriors’ battling it out on on-file storage vs database storage.
The program logic
I undertook in building a mock marketplace where users can buy and sell sports equipment. As earlier pointed out, of course the users would want to see images of what they’re planning to buy so including images in the products catalog is a requirement. Any vendor wishing to publish a product on my marketplace would therefore have to include an image of that product on their sale advertisement. So that the product being advertised for sale can be registered in the database and eventually be rendered out to other users, the vendor has to visit a ‘sell product’ link on the navigation bar then fill in the product sale form. The form includes fields such as the product’s name, description, brand, category, price and image. The form is then handled by the ‘/create’ route which registers the particular product in the database and serves up the index page where a user can view the products that are advertised for sale (excluding products advertised by themselves of course).
Creating a form to be filled in by vendors who intend to sell a product
Creating a form that allows the application to capture information about the product and store this information in the database is crucial. To create this form, the application utilizes the flask_wtf module. The image is included in the form as a ‘Filefield’ with validators such as ‘DataRequired’, which ensures the field is not empty during submission and ‘FileAllowed’, which ensures that the vendor only posts images with the specified file extensions. Check out the code here. The general syntax to add a field to the form is as follows:
data = data_type_field(‘field_label’, validators=[‘validator_1()’,‘validator_2(), …’]Processing the product form
The form is processed through the ‘/create’ route. The route accepts data from the form and passes the product’s image to the save_image function which stores the image in the file system. The route then creates an instance of the Product class with the other information gathered from the form along with the image’s file name and saves it in the database. Check out how to do this here
Rendering the product’s image on the a web page
The product’s image can now finally be rendered so that it can be viewed by the users. In my case, the images are rendered on my index page. You can implement whatever styling to render your images as long as you insert the correct URL to the image on the ‘img src=”img_url”’ attribute.
The end…
Easy, right? Happy coding folks.
