Tutorial: Images Backend

Cover Page

DUE Wed, 01/29, 2 pm

Install updates

Remember to install updates available to your Ubuntu back end. If N in the following notice you see when you ssh to your back-end server is not 0,

N updates can be applied immediately.

run the following:

server$ sudo apt update
server$ sudo apt upgrade

server$ sync
server$ sudo reboot

Static files and media directory

Due to the potentially large image and video file sizes and to enable direct download of these files using image/video download libraries on the front end, both image and video data posted alongside chatt is not stored in the PostgreSQL database. Instead the image/video data is stored in static files, filed under a designated media directory. These files are served by a static-file server. We turn the image/video filenames into URLs, which we store in the PostgreSQL database alongside the chatt’s username and message.

So as not to run up a bill on your back-end server, and for a bearable wait time when uploading, we limit each image or video upload to 10 MB. On both Android and iOS front ends, the Google Photos app is the easiest way to determine the size of your image and video files.

Create a media directory and set its access permissions:

server$ mkdir ~/reactive/chatterd/media
server$ chmod a+rx ~ ~/reactive ~/reactive/chatterd ~/reactive/chatterd/media
server$ cd ~/reactive/chatterd

Database table

Add two new columns to the chatts table in your chatterdb database to store the URLs of your image and video static files:

• Log into an interactive PostgreSQL (psql) session as user postgres
• Connect to the chatterdb database
• Clear your chatts table of all old chatts, use the SQL command:

  TRUNCATE TABLE chatts;
  

• Add two new columns to chatts to store imageurl and videourl both as TEXT. Type the following:

  ALTER TABLE chatts ADD COLUMN imageurl TEXT, ADD COLUMN videourl TEXT;
  

  Columns of type TEXT allow the user to store strings of undetermined length.

• To verify that you’ve added the new column to the chatts table, enter:

  SELECT * FROM chatts;
  

  Make sure you get back the following result (though perhaps more stretched out and may include other column(s), such as appID if you have completed other tutorial(s)):

   username |  message | id | time | imageurl | videourl |
  ----------+----------+----+------+----------+----------+
  (0 rows)
  

  If so congratulations! You have successfully added the new columns!

• Exit PostgreSQL

Web server

We next prepare the Chatter backend to handle image and video data. Please click the relevant link for the web framework of your choice:

| Go | Python | Rust | TypeScript |

and return here to resume the server setup once you have your web framework set up.

Testing image and video upload

To test your backend with Postman, configure the header and body of your POST request like the following:

1. Create POST request in Postman.

   Be sure to include the trailing / in postimages/. Some web framework, such as Django, cannot carry POSTed data when redirecting from postimages to postimages/.

2. Under Body you previously selected raw, select form-data instead. Enter “username” as the first Key and enter a username for its Value. Similarly add “message” entry. Then add “image” as the Key for the third entry. Then click the arrow to the right of the Key and choose “File”. When you click on the corresponding Value field, a drop-down menu should appear. Click + New file from local machine and upload your .jpeg files (screenshot).

   If you want to send a chatt with no image and/or video, you can simply omit adding the key "image" and/or "video". Or you may add these keys but set their values to either the empty string ("") or null. In Postman, to set the value to the empty string, set the field type to Text in the drop-down arrow, to the right of the Key field, but leave the Value field empty. To set it to null, set the field type to File but don’t select any file.

3. Click Send.

4. Next do a getimages/ request within Postman as you did in the Chatter lab. You should see the image and video URLs associated with your chatt above in the returned JSON.

   Stream error in HTTP/2 framing layer

   Both the getchatts/ and getimages/ Chatter API specify an empty payload. If you send your GET request in Postman with a non-empty Multipart body and you’re running the Rust/axum server, as is running on mada.eecs.umich.edu, the server will report, Error: Stream error in the HTTP/2 framing layer.

   To correct this error, set the GET request body to none in Postman. Or you can ignore this error when you know it’s due to malformed GET requests in Postman. Rust/axum server is more strict in reporting non-conformance.

5. You can copy the URLs returned and do another GET request on these URLs, allowing you to see the image/video in Postman.

And you’re done with the back end!

server$ sudo systemctl restart chatterd

server$ sudo systemctl status chatterd

That’s all we need to do to prepare the back end. Before you return to work on your front end, wrap up your work here by submitting your files to GitHub.

Submitting your back end

We will only grade files committed to the main branch. If you use multiple branches, please merge them all to the main branch for submission.

Navigate to your reactive folder:

server$ cd ~/reactive/

Commit changes to the local repo:

server$ git commit -am "images back end"

and push your chatterd folder to the remote GitHub repo:

server$ git push

If git push failed due to changes made to the remote repo by your tutorial partner, you must run git pull first. Then you may have to resolve any conflicts before you can git push again.

Go to the GitHub website to confirm that your back-end files have been uploaded to your GitHub repo.

Congratulations! You’ve completed the back end modifications necessary to support images!