Editing views.go

Add the following libraries to the import block at the top of the file:

import (
    //...
    "github.com/valyala/fasthttp"
    //...
)

Now add two new properties to the Chatt struct in views/views.go:

type Chatt struct {
    // . . .
    ImageUrl  string    `json:"imageUrl"`
    VideoUrl  string    `json:"videoUrl"`
}

Next add the PostImages() function along with the saveFormFile() helper function. We also specify our designated media directory to store image/video files.

const MEDIA_ROOT = "/home/ubuntu/441/chatterd/media/"

func saveFormFile(c *atreugo.RequestCtx, username string, media string, ext string) string {
    content, err := c.FormFile(media)
    if err != nil {
        return ""
    }

    filename := username + "-" + strconv.FormatInt(time.Now().Unix(), 10) + ext
    fasthttp.SaveMultipartFile(content, MEDIA_ROOT+filename)
    return "https://" + string(c.Host()) + "/media/" + filename
}

func PostImages(c *atreugo.RequestCtx) error {
    var chatt Chatt

    chatt.Username = string(c.FormValue("username"))
    chatt.Message = string(c.FormValue("message"))
    chatt.ImageUrl = saveFormFile(c, chatt.Username, "image", ".jpeg")
    chatt.VideoUrl = saveFormFile(c, chatt.Username, "video", ".mp4")

    _, err := chatterDB.Exec(ctx, `INSERT INTO chatts (username, message, imageurl, videourl) VALUES ($1, $2, $3, $4)`, chatt.
        Username, chatt.Message, chatt.ImageUrl, chatt.VideoUrl)
    if err != nil {
        LogHTTP(http.StatusInternalServerError, c)
        return c.JSONResponse([]byte(err.Error()), http.StatusInternalServerError)
    }

    LogHTTP(http.StatusOK, c)
    return c.JSONResponse(emptyJSON, http.StatusOK)
}

Make a copy of your GetChatts() function inside your views.go file and name the copy GetImages(). In GetImages(), replace the SELECT statement with the following: `SELECT username, message, time, COALESCE(imageurl, ''), COALESCE(videourl, '') FROM chatts ORDER BY time DESC`. This statement will retrieve all data, including our new image and video URLs from the PostgreSQL database. If the image or video URL is SQL NULL, it will be replaced with an empty string. Go’s PostgreSQL library doesn’t automatically translate SQL NULL to an empty string.

Still in GetImages(), replace the two lines in the for rows.Next() {} block with these:

        rows.Scan(&chatt.Username, &chatt.Message, &chatt.Timestamp, &chatt.ImageUrl, &chatt.VideoUrl)
        chattArr = append(chattArr, []any{chatt.Username, chatt.Message, chatt.Timestamp, chatt.ImageUrl, chatt.VideoUrl})

In addition to the original three columns, we added reading the imageurl and videourl columns and included them in the chatt data returned to the front end.

Save and exit views.go.

Routing for new URLs

So that atreugo knows how to forward the new APIs to our the newly added GetImages() and PostImages() functions, add the following new routes to the routes array in router/router.go:

var routes = []Route {
    // . . .
    {"GET", "/getimages/", views.GetImages},
    {"POST", "/postimages/", views.PostImages},
}

To serve image/video static files, in the New() function add to atreugo.Config{, after Reuseport: true,, before the closing }):

        MaxRequestBodySize: 10485760,

to allow up to 10 MB per upload.

Also add in the New() function, before return router:

        router.Static("/media", views.MEDIA_ROOT)

This tells atreugo to redirect URL path /media to its static-file server and to serve media files from our designated media directory, whose value is stored in chatter.MEDIA_ROOT.

Save and exit router.go.

Go is a compiled language, like C/C++ and unlike Python, which is an interpreted language. This means you must run go build each and every time you made changes to your code, for the changes to show up in your executable.

Rebuild chatterd:

server$ go get
server$ go build

and restart it:

server$ sudo systemctl restart chatterd

References

• Uploading Files in Golang with Multipart Request
• Build a web application in Go: Serving static files
• Ways to handle SQL NULL values in Go

File size limit

By default, Django sets a maximum data upload size of 2.5 MB. To reconfigure Django to allow up to 10 MB per upload, and to specify where to store the media files, add the following lines to the end of your ~/441/chatterd/routing/settings.py:

MEDIA_URL = 'https://YOUR_SERVER_IP/media/'
MEDIA_ROOT = BASE_DIR / 'media'
DATA_UPLOAD_MAX_MEMORY_SIZE = 10485760

Replace YOUR_SERVER_IP with your server’s IP address.

We next tell Nginx where to look for the media file when presented with https://YOUR_SERVER_IP/media/. Since Nginx also limits maximum client upload size to 1 MB, we will raise this limit at the same time. Edit your Nginx website configuration file:

server$ sudo vi /etc/nginx/sites-enabled/chatterd

and add the following lines to the first server block (not the second, redirection block):

server {
    ...
    client_max_body_size 10M;
    location ^~ /media {
        alias /home/ubuntu/441/chatterd/media;
    }
}

Editing views.py

Now edit views.py to handle image and video uploads. First, add the following imports and postimages() function to your views.py:

import os
from django.conf import settings
from django.core.files.storage import FileSystemStorage

@csrf_exempt
def postimages(request):
    if request.method != 'POST':
        return HttpResponse(status=400)

    # loading multipart/form-data
    username = request.POST.get("username")
    message = request.POST.get("message")

    if request.FILES.get("image"):
        content = request.FILES['image']
        filename = username+str(time.time())+".jpeg"
        fs = FileSystemStorage()
        filename = fs.save(filename, content)
        imageurl = fs.url(filename)
    else:
        imageurl = None

    if request.FILES.get("video"):
        content = request.FILES['video']
        filename = username+str(time.time())+".mp4"
        fs = FileSystemStorage()
        filename = fs.save(filename, content)
        videourl = fs.url(filename)
    else:
        videourl = None
        
    cursor = connection.cursor()
    cursor.execute('INSERT INTO chatts (username, message, imageurl, videourl) VALUES '
                   '(%s, %s, %s, %s);', (username, message, imageurl, videourl))

    return JsonResponse({})

Next, make a copy of your getchatts() function inside your views.py file and name the copy getimages(). In getimages(), replace the SELECT statement with the following: 'SELECT username, message, time, imageurl, videourl FROM chatts ORDER BY time DESC;'. This statement will retrieve all data, including our new image and video URLs from the PostgreSQL database.

Save and exit views.py.

Routing for new URLs

So that Django knows how to forward the new APIs to the newly added getimages() and postimages() functions, add the following new routes to the urlpatterns array in urls.py:

    path('getimages/', views.getimages, name='getimages'),
    path('postimages/', views.postimages, name='postimages'),

Save and exit urls.py and restart both Nginx and Gunicorn:

server$ sudo nginx -t
server$ sudo systemctl restart nginx gunicorn

References

• How to Limit File Upload Size in Nginx
• Serving Static Content
• Understanding Nginx Server and Location Block Selection Algorithms
• Loading form-encoded data in python
• Simply save file to folder in Django
• Django MEDIA_URL and MEDIA_ROOT
• Django Request.FILES
• How to Upload Files With Django

Editing handlers.rs

We edit handlers.rs to handle image and video uploads. First, add the following crates/modules in the use axum::{} block:

use axum::{
    body::Bytes, 
    // you can choose to "merge" the following with the existing
    // `extract` module or add it as a separate line. Both work.
    extract::{Host, Multipart},
    // ...
};

and add the following as additional imported crates/modules:

use chrono::SecondsFormat;
use futures::{Stream, TryStreamExt};
use std::{io, path::Path };
use tokio::{fs::File, io::BufWriter};
use tokio_util::io::StreamReader;
use tower_http::BoxError;

As with the axum::extract module, you can “merge” the chrono and std modules to their respective existing imports, or leave them as separate lines.

Next add the postimages() function along with the saveFormFile() and stream_to_file() helper functions. We also specify our designated media directory to store image/video files.

pub const MEDIA_ROOT: &str = "/home/ubuntu/441/chatterd/media";

pub async fn postimages(
    State(pgpool): State<PGPool>,
    ConnectInfo(clientIP): ConnectInfo<SocketAddr>,
    Host(host): Host,
    method: Method,
    uri: Uri,
    mut multipart: Multipart,
) -> (StatusCode, Json<Value>) {
    let mut username = String::new();
    let mut message = String::new();
    let mut imageurl: Option<String> = None;
    let mut videourl: Option<String> = None;

    let chatterDB = pgpool
        .get()
        .await
        .unwrap();

    while let Some(field) = multipart.next_field().await.unwrap_or(None) {
        let ext = if let Some(mimeType) = field.content_type() {
            Some(mimeType[6..].to_string())
        } else {
            None
        };

        match &*field.name().unwrap().to_string() {
            "username" => username.push_str(
                str::from_utf8(&field.bytes().await.map_or(Bytes::from(""), |s| s)).unwrap(),
            ),
            "message" => message.push_str(
                str::from_utf8(&field.bytes().await.map_or(Bytes::from(""), |s| s)).unwrap(),
            ),
            "image" => imageurl = saveFormFile(field, &username, &host, &ext.unwrap()).await,
            "video" => videourl = saveFormFile(field, &username, &host, &ext.unwrap()).await,
            &_ => unreachable!(),
        }
    }

    let dbStatus = chatterDB.execute(
        "INSERT INTO chatts (username, message, imageurl, videourl) VALUES ($1, $2, $3, $4)",
        &[&username, &message, &imageurl, &videourl])
        .await
        .map_or_else(|err| (StatusCode::INTERNAL_SERVER_ERROR, Json(json!(err.to_string()))), |_| (StatusCode::OK, Json(json!({}))));

    tracing::debug!(
        "{:?} | {:?} | {:?} {:?}",
        dbStatus.0,
        clientIP,
        method,
        uri.path()
    );
    dbStatus
}

async fn saveFormFile<S, E>(stream: S, username: &str, host: &str, ext: &str) -> Option<String>
where
    S: Stream<Item = Result<Bytes, E>>,
    E: Into<BoxError>,
{
    let postTime = Utc::now().to_rfc3339_opts(SecondsFormat::Secs, true);

    let filename = &*format!("{username}-{postTime}.{ext}");
    if let Ok(_) = stream_to_file(filename, stream).await {
        Some(format!("https://{host}/media/{filename}"))
    } else {
        None
    }
}

// Save a `Stream` to a file
// from https://github.com/tokio-rs/axum/blob/main/examples/stream-to-file/src/main.rs
async fn stream_to_file<S, E>(path: &str, stream: S) -> Result<(), (StatusCode, String)>
where
    S: Stream<Item = Result<Bytes, E>>,
    E: Into<BoxError>,
{
    async {
        // Convert the stream into an `AsyncRead`.
        let body_with_io_error = stream.map_err(|err| io::Error::new(io::ErrorKind::Other, err));
        let body_reader = StreamReader::new(body_with_io_error);
        futures::pin_mut!(body_reader);

        // Create the file. `File` implements `AsyncWrite`.
        let path = Path::new(MEDIA_ROOT).join(path);
        let mut file = BufWriter::new(File::create(path).await?);

        // Copy the body into the file.
        tokio::io::copy(&mut body_reader, &mut file).await?;

        Ok::<_, io::Error>(())
    }
    .await
    .map_err(|err| (StatusCode::INTERNAL_SERVER_ERROR, err.to_string()))
}

Make a copy of your getchatts() function inside your handlers.rs file and name the copy getimages(). In getimages(),

1. replace the declaration of chattArr to:

   let mut chattArr: Vec<Vec<Option<String>>> = Vec::new();
   

2. replace the SELECT statement with the following: "SELECT username, message, time, imageurl, videourl FROM chatts ORDER BY time DESC". This statement will retrieve all data, including our new image and video URLs from the PostgreSQL database.

3. replace the chattArr.push(/*...*/); line with:

            chattArr.push(vec![
                row.get("username"),
                row.get("message"),
                Some(row.get::<&str, DateTime<Local>>("time").to_string()),
                row.get("imageurl"),
                row.get("videourl")
            ]);   
   

   In addition to the original three columns, which we now access by column name instead of by index, we added reading the imageurl and videourl columns and included them in the chatt data returned to the front end.

Save and exit handlers.rs.

Routing for new URLs

First, add the following crates/modules in the use block:

use axum::{
    // you can choose to "merge" the following with the existing
    // `extract` module or add it as a separate line. Both work.
    // If your merge list has more than one elements, put both inside a pair of parantheses.
    extract::DefaultBodyLimit, 
    // ...
};

then add the following crate:

use tower_http::{
    limit::RequestBodyLimitLayer,
    services::ServeDir,
};

So that axum knows how to forward the new APIs to the newly added getimages() and postimages() functions, add the following to the Router instantiation of the router variable in main.rs, before the .with_state(pgpool); line:

    .route("/getimages/", get(handlers::getimages))
    .route("/postimages/", post(handlers::postimages))
    .nest_service("/media",
        ServeDir::new(handlers::MEDIA_ROOT)
            .not_found_service(handle_404.into_service()))
    .layer(DefaultBodyLimit::disable())  // first disable default 2 MB limit
    .layer(RequestBodyLimitLayer::new(10485760)) // then add 10 MB limit            

In addition to routing the two new APIs, the next line line tells axum to redirect URL path /media to serve media files from our designated media directory, whose value is stored in handlers::MEDIA_ROOT. We then limit the size of each uploaded media file to 10 MB. To set this limit, we must first disable the default limit of 2MB/upload.

The struct ServeDir() uses the handle_404() to handle file not found cases. We now provide this function:

async fn handle_404() -> (StatusCode, &'static str) {
    (StatusCode::NOT_FOUND, "Not found")
}

Save and exit main.rs.

Finally, edit Cargo.toml to replace the axum line in the dependencies block with:

axum = { version="0.7.3", features = ["multipart"] }

and add the following dependencies:

futures = "0.3.30"
tokio-util = { version="0.7.10", features = ["io"] }
tower-http = { version = "0.5.0", features = ["fs", "limit", "trace"] }

Save and exit Cargo.toml. Rebuild and restart chatterd.

server$ cargo build --release
server$ sudo systemctl restart chatterd

References

• Axum multipart/form-data example
• axum::extract::Multipart
• Axum static file path example
• axum_extra::routing::SpaRouter