How to interact with files on the server?

[Amirhosein-GPR]

Hello guys.

I have a question (2 in fact).
I know my solution is probably silly but i wanted to show you my intention and find the true answer for my question.

Suppose i want to add a custom font for my website (Server side rendering is enabled):

• I add font declaration in CSS. The path to the font is something like this: "/assets/fonts/SomeFont.woff2".

@font-face {
    font-family: SomeFont;
    src: url(/assets/fonts/SomeFont.woff2);
}

• Then i add a server function that reads the file from public directory on the server and return it in an array of bytes.

#[server(GetFile, "/assets/fonts")]
pub async fn get_file() -> Result<Vec<u8>, ServerFnError> {

    let f = std::fs::read("./public/assets/fonts/SomeFont.woff2").unwrap();

    Ok(f)
}

• Finally i add a route and call the server function in it.

<Route path="/assets/fonts/:font_name" view=|cx| {
    view! { cx, {
        let font_file_resource = create_resource(cx, || (), |_| async move { get_file(font_name).await });
        move || match font_file_resource.read(cx) {
            None => view! { cx,  }.into_view(cx),
            Some(data) => view! { cx, { move || print!("{:?}", data.unwrap()) } }.into_view(cx)
        }
    }}
}/>

The problem is i don't know how to stream down the file to the client correctly. Should i do it like above where i create a resource, call get_file function in it and then read it's content so that when it's ready it prints down the content?
I know a little PHP and think that's why i got a little confused how to do it. (printing the font resource data so that it streams down to client!)

In fact i think i should make a seperate API and routing on the axum server for this purpose...

I know the above codes are really dumb and may not even compile and have a lot of mistakes... But i just wanted to show you my intention...

So my main questions are:

Question 1:
What is the idiomatic way to create a route for files management and stream down any requested files for download? Also for uploading files?

When question 1 is solved i want to find the answer for question 2...

Question 2:
How to implement a progress bar that shows how much of the file has been sent or downloaded?

[gbj]

This is kind of a "wrong tool for the job" situation. Leptos is a UI framework. If you're trying to serve a static file, you should use the appropriate tool for serving static files for whichever server you're using. For Axum, for example, this would be tower_http::services::ServeFile.

Every one of the Axum examples and the Axum starter also include a handler for serving static files or a 404.

Your question about uploading files is completely separate. The search term you want here is "multipart form upload." A quick search gave me a useful article.

Question 3 (a progress bar) does touch on UI more. You can use the <progress> HTML element with a signal that tracks how much of the file upload or download has been processed. Getting that percentage is a bit more complicated and involves some custom client-side upload logic. You will probably need to do some interaction with Web APIs like FileReader via web-sys. Again, searching something like "file upload with progress bar vanilla JavaScript" and adapting this to Rust code is probably your best bet.

[Amirhosein-GPR]

This is kind of a "wrong tool for the job" situation. Leptos is a UI framework.

Indeed!
Deep inside I thought i was doing something wrong.
I mixed different domains.

Every one of the Axum examples and the Axum starter also include a handler for serving static files or a 404.
Your question about uploading files is completely separate. The search term you want here is "multipart form upload." A quick search gave me a useful article.

Thanks for the useful resources! I should definitely read them.

Again, searching something like "file upload with progress bar vanilla JavaScript" and adapting this to Rust code is probably your best bet.

Yeah. Always a great approach. Finding the solution in the main language and trying to port it to the desired one.

Thank you very much Greg for the really informative, quick response!
Love your framework!
One of the best, actively developed, UI frameworks for the web.
Hope the bests for you! ❤️

[Amirhosein-GPR]

Update:

Finally after learning a bit about axum and tower_http, I found the solution for the font loading problem.

For the css font url path i wrote a path relative to the project path.

In the example image above it is like this:

@font-face {
    font-family: SomeFont;
    src: url(public/assets/fonts/SomeFont.woff2);
}

But I should have written the path like this:

@font-face {
    font-family: SomeFont;
    src: url(assets/fonts/SomeFont.woff2);
}

In other words, Axum tries to match the URI to the defined routes (which we defined with the help of Leptos routes), if Axum finds one it does it's server side rendering stuff. But if it doesn't match any routes, it falls back to the defined "file_and_error_handler" function in the fileserv.rs file. There it tries to find a file relative to the "site" directory which is shown in the 2nd section in the image.
So i just needed to define the path for my font relative to the inside of "site" directory.
That was it.

I thought there wasn't any default static files handling in the Leptos Axum template but there was. Only my relative path was wrong.
If i wanted to create a special path for serving files, and not to use the default implementation, i think could have used tower_http::services::ServeFile for this purpose:

If you're trying to serve a static file, you should use the appropriate tool for serving static files for whichever server you're using. For Axum, for example, this would be tower_http::services::ServeFile.

Just like Greg told.

• Note that you should still put your necessary static files in the public directory and cargo leptos automatically copies it to the site directory. If i'm not wrong.