Once we get our files to save to the backend server, we need to save them to the database. This is going to be a little bit more of a tricky task but will add an important feature that will be needed in our final app.
Our database can't directly store images - images are a complex type of data, and it's too much for our database to understand and handle properly. Instead, we need to transform our image to another format before saving it. We can use a special technique called "base64 encoding", which allows us to take an image and save it as a string of text data, which our database can easily handle. Once we turn it into a string and save it to our database, we can then read it back out and convert the string back into an image when we want to show it in our table. This allows us to allow the machinists to see the image of what they're making, with minimal effort!
[x] Create a test file called python-test.py in your backend folder
[x] Make a function that takes in a path to an image and returns a base64 string of that image. It should follow the format:
def image_to_string(path):
string_var = None
// TODO: Add some logic here that opens the image and saves it
// as a string, and saves it to "string_var". This is the same logic as
// is shown in the guide above
return string_var
[x] Make a function that takes in a base64 string and returns an image. It should follow the format:
def string_to_image(string):
image_var = None
// TODO: Add some logic here that converts the string and converts it
// back into an image, and saves it into "image_var". This should follow the
// code in the guide linked above
return image_var
[x] Add a new column to the front-end machining tables. This column will eventually be a way for us to see the images that were submitted in the original form
[ ] Update your backend endpoints to call the appropriate function you made, to convert the user's image to a string when submitting the form. Also update your backend endpoints to call the appropriate function to convert a string from the database back to an image, when the user tries to load a table
[x] Update the database table (for each of our forms) to add a new column. This should be a text column, that we will store the images after they have been converted to text
Once we get our files to save to the backend server, we need to save them to the database. This is going to be a little bit more of a tricky task but will add an important feature that will be needed in our final app.
Our database can't directly store images - images are a complex type of data, and it's too much for our database to understand and handle properly. Instead, we need to transform our image to another format before saving it. We can use a special technique called "base64 encoding", which allows us to take an image and save it as a string of text data, which our database can easily handle. Once we turn it into a string and save it to our database, we can then read it back out and convert the string back into an image when we want to show it in our table. This allows us to allow the machinists to see the image of what they're making, with minimal effort!
[x] Create a test file called
python-test.pyin yourbackendfolder[x] Using the file you just created, follow along with this guide to learn more about turning images into strings, and strings back into images: https://www.geeksforgeeks.org/python-convert-image-to-string-and-vice-versa/
[x] Make a function that takes in a path to an image and returns a base64 string of that image. It should follow the format:
[x] Make a function that takes in a base64 string and returns an image. It should follow the format:
[x] Add a new column to the front-end machining tables. This column will eventually be a way for us to see the images that were submitted in the original form
[ ] Update your backend endpoints to call the appropriate function you made, to convert the user's image to a string when submitting the form. Also update your backend endpoints to call the appropriate function to convert a string from the database back to an image, when the user tries to load a table
[x] Update the database table (for each of our forms) to add a new column. This should be a
textcolumn, that we will store the images after they have been converted to text