Get filename out of Form<TempFile< >>

[myz-dev]

Hi,
first let me say I really enjoy learning rocket!
I am new to web development, so if this is not a rocket question please forgive me:

I am trying to upload a file to my server (post request, currently trying enctype="multipart/form-data"). The server should be able to check the filename and size before taking further action.

Copying the approach that is described in Pastebin section of the guide lets me save the file on my sever, but the filename gets lost.

So currently I am trying to use a form guard that is wrapping a TempFile. That TempFile unfortunately also does not give me access to the filename and I cannot even access the body of the post request.

So here is my code:

#[macro_use]
extern crate rocket;
const WEB_DRECTORY: &str = "web";

use rocket::fs::TempFile;
use std::path::Path;
use std::path::PathBuf;

#[derive(Responder)]
#[response(status = 200, content_type = "plain")]
struct FileCreated(&'static str);

#[post("/txt/testing", format = "multipart", data = "<file>")]
fn create_txt(mut file : rocket::form::Form<TempFile< >>) -> FileCreated{
    
    println!("Option filename: {:?}", file.name());
    println!("Option rawname: {:?}", file.raw_name());
    println!("Option content type: {:?}", file.content_type());
    
    let my_path=std::path::Path::new("/home/abc/Desktop/Test/abc.txt");
    file.persist_to(my_path.join(my_path));

    FileCreated("Nice!")
}


#[launch]
async fn rocket() -> _ {
    rocket::build().mount("/", routes![create_txt])
}

I am using rocket::form::Form<TempFile< >> because the debug output of rocket suggested to do so, when I was only using TempFile. But now I still get said output:

POST /txt/testing multipart/form-data:
Matched: (create_txt) POST /txt/testing multipart/form-data
Warning: Request contains a form that will not be processed.
Bare TempFile<'_> data guard writes raw, unprocessed stream to disk.
Did you mean to use Form<TempFile<'_>> instead?

Can anyone help me with this?

[jebrosen]

The same code you posted seems to work for me, and is able to extract the filename from a mulipart-format form sent via curl:

curl -F upload=@foo localhost:8000/txt/testing

     Running `target/debug/i1747-tempfile`
🔧 Configured for debug.
   >> address: 127.0.0.1
   >> port: 8000
   >> workers: 8
   >> ident: Rocket
   >> keep-alive: 5s
   >> limits: bytes = 8KiB, data-form = 2MiB, file = 1MiB, form = 32KiB, json = 1MiB, msgpack = 1MiB, string = 8KiB
   >> tls: disabled
   >> temp dir: /tmp
   >> log level: normal
   >> cli colors: true
   >> shutdown: ctrlc = true, force = true, signals = [SIGTERM], grace = 2s, mercy = 3s
🛰  Routes:
   >> (create_txt) POST /txt/testing multipart/form-data
📡 Fairings:
   >> Shield (liftoff, response, singleton)
🛡️ Shield:
   >> X-Content-Type-Options: nosniff
   >> X-Frame-Options: SAMEORIGIN
   >> Permissions-Policy: interest-cohort=()
🚀 Rocket has launched from http://127.0.0.1:8000
POST /txt/testing multipart/form-data:
   >> Matched: (create_txt) POST /txt/testing multipart/form-data
Option filename: Some("foo")
Option rawname: Some(FileName("foo"))
Option content type: Some(ContentType(MediaType { source: Custom("application/octet-stream"), top: (0, 11), sub: (12, 24), params: Dynamic([]) }))
   >> Outcome: Success
   >> Response succeeded.

Can you provide more details of your issue, in particular what format/library/API are you using to upload the form?

[myz-dev]

Hi,
thank you for the fast reply!
OK, so it is a problem on the client side.
I am sending a POST request via a HTML form and a JavaScript function.
The relevant HTML is

            <form id="upgrade_form" action="txt/testing" method="post">
                <input id="upgrade_file" class="form-control form-control-lg" type="file" name="filename" />
                <input class="btn btn-lg btn-secondary fw-bold border-white bg-white mt-3" type="submit" name="whereDoesThisGo" value="Upgrade" onclick="trigger_send_upgrade_file()"/>
            </form>

And the JS:

function trigger_send_upgrade_file(){
    let the_file = document.getElementById("upgrade_file").files[0];
    let formData = new FormData();
         
    formData.append("please_upgrade", the_file);
    fetch('/txt/testing', {method: "POST", body: formData});    
}

Thank you already for confirming that the rocket code works as is!

[jebrosen]

I did not see the same problem you described with that code. I did see this instead:

POST /txt/testing application/x-www-form-urlencoded:
   >> No matching routes for POST /txt/testing application/x-www-form-urlencoded.
   >> No 404 catcher registered. Using Rocket default.
   >> Response succeeded.

It seems this is because the onclick handler does not cancel the default submit behavior, which is to use x-www-form-urlencoded. Adding a return false to the onclick handler opts out of the default submit behavior, which allowed the fetch to complete successfully and as expected.

Or, this same form could potentially be submitted without even using javascript at all! HTML forms support multipart uploads directly via the enctype="multipart/form-data" attribute on the <form> tag, for example:

<form id="upgrade_form" action="txt/testing" method="post" enctype="multipart/form-data">

[myz-dev]

Thank you very much!
I am a complete beginner (obviously) and did not notice that the form and the JS part are competing with each other. Now I have cut down the form and handling the POST via JS.