Creating a Web App From Scratch Using Python Flask and MySQL: Part 6

In the previous part of this series, we implemented paging for the wish list on the user home page. In this part of the series, we'll implement an option for the user to upload an image representing a wish, an option to mark the wish as accomplished, and an option to set privacy.

Getting Started 

Let's start by cloning the previous part of the tutorial from GitHub.

Once the source code has been cloned, navigate to the project directory and start the web server. 

Point your browser to http://localhost:5002/ and you should have the application running.

Modifying the User Interface

Let's start by modifying our "add wish" page to include an option to upload an image. Navigate to templates/addWish.html. Our form in addWish.html looks quite small, so let's modify the bootstrap HTML code to make the form vertical. 

First, we'll modify the form-horizontal to a vertical form, so remove the class form-horizontal from the form. We'll also add three new controls: a file upload control to upload photos, a check box to mark the wish as private, and another check box to mark the wish as completed. Here is the modified addWish.html.

Save the above change and restart the server. After signing in successfully, click on the Add Wish link and you should be able to see the modified add wish page.

Add Wish Page with Image Upload

Implementing Upload Functionality 

We'll be using blueimp jQuery-File-Upload to implement the file upload functionality. Download the required the files from GitHub. Extract the source and add the following script references to addWish.html.

On addWish.html page load, add the plugin initiation code to the file upload button click.

As seen in the above code, we have attached the file upload plugin to the #fileupload button. The file upload plugin posts the file to the /upload request handler, which we'll define in our Python code. We have also defined an add function to submit the data, and defined success and failure callbacks to handle the upload success and failures.

Next, let's define the upload Python file upload handler in Define a route /upload as shown:

Check if the request is a POST request, and if so read the file from request.

We'll also need to get the image file extension to save the file. So import os and then split the extension name from the file name.

Once we have the file extension, we'll create a new unique file name using uuid. Import uuid and create the file name.

Create a folder called Uploads in the static folder. This is where we'll keep the uploaded images. Add the path to the Upload folder in the app configuration.

Now save the posted file into the UPLOAD_FOLDER location and return the file name as a response.

Save the above changes and restart the server. Point your browser to the http://localhost:5002 and sign in using valid credentials. Try to upload an image using the browse button, and when done, check your browser console. You should be able to see the returned uploaded file name. 

Instead of the read-only input text field, let's add an image element to display the uploaded image. So replace the read-only input text field with the following HTML code.

In the file upload success callback, update #imgUpload's src to the uploaded image.

Save the above changes and restart the server. Sign in to the application and try to upload a new image file, and you should be able to see the uploaded image.

Add Wish Page With Upload

We'll need to modify our tbl_wish table structure to include three new fields. Alter the tbl_wish as shown below:

Next let's modify our stored procedures sp_addWish and sp_updateWish to include the newly added fields to the database. 

Modify the sp_addWish stored procedure to include the three newly added fields.

Also modify the stored procedure sp_updateWish to include the three newly added fields.

Next, modify the /addWish request handler's method to read the newly posted fields and pass them to the stored procedure.

Once the values have been read, we'll pass them to the MySQL stored procedure call.

In the addWish.html page we'll need to set the name attribute for the elements to be posted. So add name to both the newly-added check boxes.

Now we also need to pass the upload file path. So we'll create a hidden input field and set its value in the file upload success callback.

Set its value in the file upload success callback.

Save the above changes and restart the server. Sign in using valid credentials and try to add a new wish with all the required details. Once added successfully, it should be listed on the user home page.

Modify the Edit Wish Implementation

First, we need to add some HTML code for the three new fields. So open up userHome.html and add the following HTML code after the title and description HTML.

We'll need to fetch the required data to populate the above fields on edit. So let's modify the stored procedure sp_GetWishById to include the additional fields as shown: 

Next, we'll need to modify the JSON string in the /getWishById route method to include the new fields. Modify the wish list in /getWishById as shown:

To render the result, we need to parse the data received in the success callback of the Edit JavaScript function in userHome.html.

Save the changes and restart the server. Sign in using valid credentials, and when on the user home page, try to edit a wish from the wish list. You should have the data populated in the Edit popup.

Edit Pop Up With Additional Fields

Now, similar to what we did on the add wish page, add the jQuery-File-Upload script reference in userHome.html.

Initialize the file upload control in the edit popup using the same code we used on the add wish page.

Next we need to modify the Update button click in the Edit popup to include the extra fields added. So, in the btnUpdate button click, modify the data parameters passed to include the three new fields as shown:

Open up and modify the /updateWish request handler method to parse the newly added fields.

Modify the procedure calling method to include the extra parameters.

Now open up sp_updateWish and modify it to include the newly added fields.

Save all the above changes and restart the server. Sign in using valid credentials and try to edit and update the existing entries.

Wrapping It Up

In this part of the tutorial series, we saw how to integrate and use the blueimp jQuery-File-Upload plugin to upload images in our Python Flask application. In the next part of this series, we'll show the wishes accomplished by users on the application home page and add the functionality to like the wishes.

Do let us know your thoughts, corrections and suggestions in the comments below. Source code from this tutorial is available on GitHub.



Related Articles