Create a bucket
Upload objects to your bucket
App Dev: Storing Image and Video Files in Cloud Storage - Python
Cloud Storage allows world-wide storage and retrieval of any amount of data at any time. You can use Cloud Storage for a range of scenarios including serving website content, storing data for archival and disaster recovery, or distributing large data objects to users via direct download.
In this lab you'll configure an application to use Cloud Storage to store and retrieve application data. The application is an online Quiz, the data is the form data, including an image you upload from your local machine.
In this lab, you learn how to perform the following tasks:
Set up Cloud Shell as your development environment
Update the application code to integrate Cloud Datastore
Use the Quiz application to upload an image file into Cloud Storage and view the image in the Quiz
Setup and requirements
Before you click the Start Lab button
Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources will be made available to you.
This hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.
To complete this lab, you need:
- Access to a standard internet browser (Chrome browser recommended).
- Time to complete the lab---remember, once you start, you cannot pause a lab.
How to start your lab and sign in to the Google Cloud Console
Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method. On the left is the Lab Details panel with the following:
- The Open Google Console button
- Time remaining
- The temporary credentials that you must use for this lab
- Other information, if needed, to step through this lab
Click Open Google Console. The lab spins up resources, and then opens another tab that shows the Sign in page.
Tip: Arrange the tabs in separate windows, side-by-side.
Note: If you see the Choose an account dialog, click Use Another Account.
If necessary, copy the Username from the Lab Details panel and paste it into the Sign in dialog. Click Next.
Copy the Password from the Lab Details panel and paste it into the Welcome dialog. Click Next.
Important: You must use the credentials from the left panel. Do not use your Google Cloud Skills Boost credentials. Note: Using your own Google Cloud account for this lab may incur extra charges.
Click through the subsequent pages:
- Accept the terms and conditions.
- Do not add recovery options or two-factor authentication (because this is a temporary account).
- Do not sign up for free trials.
After a few moments, the Cloud Console opens in this tab.
Activate Cloud Shell
Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud. Cloud Shell provides command-line access to your Google Cloud resources.
- Click Activate Cloud Shell at the top of the Google Cloud console.
When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. The output contains a line that declares the PROJECT_ID for this session:
gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.
(Optional) You can list the active account name with this command:
Your output should now look like this:
(Optional) You can list the project ID with this command:
gcloud, in Google Cloud, refer to the gcloud CLI overview guide.
Launch the Cloud Shell code editor
- From Cloud Shell, click Open Editor to launch the code editor.
Run the following command to configure your Project ID, replacing
YOUR-PROJECT-IDwith your Project ID:
Task 1. Prepare the quiz application
In this section, you access Cloud Shell, clone the git repository containing the Quiz application, and run the application.
Clone source code in Cloud Shell
To clone the repository for the class, execute the following command:
Configure and run the quiz application
Change the working directory:
Configure the application:
. prepare_environment.sh Note: Ignore any warnings.
This script file:
- Creates an App Engine application.
- Exports an environment variable,
- Updates pip, then runs
pip install -r requirements.txt.
- Creates entities in Cloud Datastore.
- Prints out the Project ID.
Run the application:
The application is running when you see the following output:
* Running on http://127.0.0.1:8080/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 502-577-323
Review the quiz application
To view the application, click Web preview > Preview on port 8080.
Click the Create Question link in the toolbar.
You should see a simple form that contains textboxes for the question and answers and radio buttons to select the correct answer
Task 2. Examine the quiz application code
In this section, you review the case study application code.
In this lab you'll view and edit files. You can use the shell editors that are installed on Cloud Shell, such as
vim or the Cloud Shell code editor.
This lab uses the Cloud Shell code editor to review the Quiz application code.
Examine the application code
Navigate to the
/training-data-analyst/courses/developingapps/python/cloudstorage/startfolder using the file browser panel on the left side of the editor.
add.htmlfile in the
This file contains the template for the Create Question form.
Notice how the form has been modified to use
enc-type, and there are two new form controls:
- A file upload control called
- A hidden field called
- A file upload control called
routes.pyfile in the
This file contains the route for the POST handler that receives the form data. It has been modified to get the image file from the form.
questions.pyfile in the
This file contains the handler that processes the form data extracted in the
routes.pyfile. You will modify this file to use a new module that is a client for Cloud Storage.
This is the file where you will write code to save image file data into Cloud Storage.
Task 3. Create a Cloud Storage Bucket
In this section, you create a Cloud Storage bucket and export an environment variable that references it.
Return to the Cloud Shell command line.
Stop the application by pressing Ctrl+C.
Create a Cloud Storage bucket named
gsutil mb gs://$DEVSHELL_PROJECT_ID-media
You can create a bucket using the gsutil mb command, passing through the name of the bucket as gs://BUCKET_NAME
You can use $DEVSHELL_PROJECT_ID as the bucket name prefix followed by -media
To export the Cloud Storage bucket name as an environment variable named
GCLOUD_BUCKET, execute the following command:
Task 4. Adding objects to Cloud Storage
In this section, you write code to save uploaded files into Cloud Storage.
For information on API documentation for Cloud Storage, refer to the APIs and reference reference.
Import and use the Python Cloud Storage module
- In code editor, move to the top of the
- Get the bucket name from the
- Import the storage module from the
- Create a Cloud Storage client.
- Get a reference to the Cloud Storage bucket.
Write code to send a file to Cloud Storage
- Still in
storage.py, in the the
upload_file(...)function, remove the existing pass statement, then use the Cloud Storage client to upload a file to your Cloud Storage bucket and make it publicly available.
- Get a reference to a Cloud Storage blob object in the bucket.
- Use the blob object to upload the image.
- Make the file public.
- Return the blob's public URL.
Write code to use the Cloud Storage functionality
- In the editor, move to the top of the
- Modify the import statement to use your storage client as well as the datastore client.
- Move to the
upload_file(...)function. Use your storage client to upload a file, and assign the returned public URL to a variable.
- Modify the return statement to return the public URL.
- Move to the
save_question(...)function. Write an if test to see if the
- If it is, then call the
upload_file(...)function, and assign the public URL to a entity property named imageUrl.
- If not, then assign an empty string to the entity imageUrl property.
Run the application and create a Cloud Storage object
- Save the
...webapp/questions.pyfiles, and then return to the Cloud Shell command.
- Return to Cloud Shell to run the application:
Download an image file to your local machine from Google storage.
In Cloud Shell, click Web preview > Preview on port 8080 to preview the Quiz application.
Click the Create Question link.
Complete the form with the following values, and then click Save.
Form Field Value Author Your name Quiz
Google Cloud Platform
Which product does this logo relate to?
Upload the Google_Cloud_Storage_logo.png file you previously downloaded
Cloud Storage(Select the Answer 2 radio button)
Return to the Cloud Console and navigate to Navigation menu > Cloud Storage.
On the Cloud Storage > Browser page, click the correct bucket (named
You should see your new object named
Run the client application and test the Cloud Storage public URL
/api/quizzes/gcpto the end of the application's URL.
You should see that JSON data has been returned to the client corresponding to the Question you added in the web application.
The imageUrl property should have a value corresponding to the object in Cloud Storage.
Return to the application home page and click the Take Test link.
Click GCP, and answer each question.
When you get to the question you just added, you should see the image has been formatted inside the client-side web application!
This concluded the lab, App Dev: Storing Image and Video Files in Cloud Storage - Python. You used Cloud Storage to store and retrieve application data.
Finish your quest
This self-paced lab is part of the Application Development - Python and Cloud Development quests. A quest is a series of related labs that form a learning path. Completing a quest earns you a badge to recognize your achievement. You can make your badge or badges public and link to them in your online resume or social media account. Enroll in any quest that contains this lab and get immediate completion credit. See the Google Cloud Skills Boost catalog to see all available quests.
Next steps / learn more
See what else you can do with images and video:
Learn more about Python on the Google Cloud
Manual last updated August 15, 2022
Lab last tested January 4, 2022
Copyright 2022 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.