C#•16mo ago

✅ Fetch

hi 🙂 so, i have small problem with sending form with image to server, can someone please explain how to correctly do that? spend like 3 hours and not found anything useful about that 😦

<form id="formq">
    <p>
        <label for="title"  method="post">Title</label>
    </p>
    <input type="text" id="title" name="title" required>
  
    <p>
        <label for="description">description</label>
    </p>
    <input type="description" id="description" name="description" required>
  
    <p>
        <label for="price">price</label>
    </p>
    <input type="price" id="price" name="price" required>
  
    <label for="image">price</label>
    <input type="file" id="image" name="image" required>
    <p>
        <button type="submit">Add product</button>
    </p>
</form>

<form id="formq">
    <p>
        <label for="title"  method="post">Title</label>
    </p>
    <input type="text" id="title" name="title" required>
  
    <p>
        <label for="description">description</label>
    </p>
    <input type="description" id="description" name="description" required>
  
    <p>
        <label for="price">price</label>
    </p>
    <input type="price" id="price" name="price" required>
  
    <label for="image">price</label>
    <input type="file" id="image" name="image" required>
    <p>
        <button type="submit">Add product</button>
    </p>
</form>

that is endpoint for request, but have no clue how to send image with,

app.MapPost("/api/addProduct", [Authorize] (ProductM prod, ShopDbContext db) =>
{

    string fileName = Guid.NewGuid().ToString();
    // save file in folder with new name
    // create Product based on data
    // save to db
    return Results.Ok();
});

app.MapPost("/api/addProduct", [Authorize] (ProductM prod, ShopDbContext db) =>
{

    string fileName = Guid.NewGuid().ToString();
    // save file in folder with new name
    // create Product based on data
    // save to db
    return Results.Ok();
});

like, in case of registration i was sending it like -

const response = await fetch("api/register", {
    method: "POST",
    headers: { "Accept": "application/json", "Content-Type": "application/json" },
    body: JSON.stringify({
        name: document.getElementById("name").value,
        email: document.getElementById("email").value,
        password: document.getElementById("password").value
    })
});

const response = await fetch("api/register", {
    method: "POST",
    headers: { "Accept": "application/json", "Content-Type": "application/json" },
    body: JSON.stringify({
        name: document.getElementById("name").value,
        email: document.getElementById("email").value,
        password: document.getElementById("password").value
    })
});

but with images its a bit harder, tried with byte array but don't worked

40 Replies

wwwwOP•16mo ago

btw, with HttpConext i think i even know how to do that, but don't rly want to use it, cuz should be better way

Angius•16mo ago

To send an image you need a multipart/form-data request, not an application/json one

wwwwOP•16mo ago

ok finally i get it need to make my own class which uses IFormFile or somehow read data from IfromFileCollection another quest getting something like this - ????JFIFHH??C %-(0%()(??C (((((((((((((((((((((((((((((((((((((((((((((((((((?? "?????? ?zC??????itCWs=???????6???8???!?VWD?????{|????????????gM?Y??'P?+=c????TY+?Nl?m?????????|>?2???ßV4??;wC{q!??5?m?Y??-k?9?'@+X.? 9???5X?,?U???iO ?O(????:;??b?f2??y????<?L???l?~ ????f??\???????Uw?)pO????KD??{?>??q??{}?|W?Q>tJD???????T?r??OV????2H0|??r?hX?z?G?>????&}j?,X6`?}O>?:9E????V4??H?Xb???bt ?Y>??7??vk??9u&?1??O????F?7~jtR??????;??f?.??l$~L?b?Y????U???????O5??)? ?g??Q??0?????MM?iC???f>??g'???b???????xOYUYkX?????lf?/T???I???3d/=H?]=?|?V?JL??u??y?w???Rg ????????}o?s|?L?o?m?M?J>>????r ??^?????<y??m?X?G>??;f?E<???j<??F?r??R?H???h??|?y/?J?1?~? p???A{?#h?5??)?????C???d?m????/|??e???{???{Q"2????X??2#4zy?A^<?5|^????? o:?G(mj?}?zZ?(??mT?g?6u?>?=????{44??t??L?s???OW87??fr??o?1@??r?????ì?k???|?^z?S,????"?|I??W???z?~v?????yt??pL|K?ty5 ,?????K???R0???xG??????4?=~???i>?N?/????? ????#?y5 &=??^?MbC?D?C????A??2??DE??u??<6??u?C??XCD?????=N?~4d7@???{?;.?;G?|sP????X?6???fy4??o???y???eS???,?i?p?L???tv???n0z?n?Un?(?O;?????j?s>?'??L???g?9??2?C????????????~}tj???0{?1?gF??;?,<??o??????'??????J=?S?<???-uM???1???d?????J?v?g????zLC???td~?x??q?&b'k??????iR2?J?V?l?u{^???" ?α/?Σ?s??:??}??????}O?E:zC?j?E????_D???FK}? ?J?f?d??@l^????{???<??qzD}v?H>;7&?$????g7???r>??M@=?P??h?]??z??;?y?$?^`??????+?C?????Cq???&h?R???t??=??m?V??U???C?t?? vM?<??;??r(?|???K^?Z-g???k???o-q8?]???1P:$9F??3?n?r[?ZQc?1R?<?T?????0???????Z??T??*0??%??f?k?U??{?o????BEh??????/?%

wwwwOP•16mo ago

wwwwOP•16mo ago

app.MapPost("/api/addProduct", [Authorize] async ([FromForm] IFormFileCollection collection, ShopDbContext db) =>
{
    IFormFile? file = collection.FirstOrDefault();
    if (file is null)
        return Results.BadRequest("Bad image");

    string uniqueFileName = Guid.NewGuid().ToString();
    string filePath = Path.Combine("StaticFiles/Images", uniqueFileName);

    using (var fs = new FileStream(filePath, FileMode.Create))
        await file.CopyToAsync(fs);

    return Results.Ok();
});

app.MapPost("/api/addProduct", [Authorize] async ([FromForm] IFormFileCollection collection, ShopDbContext db) =>
{
    IFormFile? file = collection.FirstOrDefault();
    if (file is null)
        return Results.BadRequest("Bad image");

    string uniqueFileName = Guid.NewGuid().ToString();
    string filePath = Path.Combine("StaticFiles/Images", uniqueFileName);

    using (var fs = new FileStream(filePath, FileMode.Create))
        await file.CopyToAsync(fs);

    return Results.Ok();
});

finally, got my image but where is other harold

Pobiega•16mo ago

You dont have a field for it, so where do you expect it to go?

wwwwOP•16mo ago

idk bro, im doing it 6 hours already, on start i had it somehow and lost logic while sloving image problem lmao

Pobiega•16mo ago

Try adding it back in, also with fromform attribute As far as I can tell you replaced your product dto with the formfilecollection (are you uploading multiple files?) If single file, don't use collection

wwwwOP•16mo ago

idk, it just wasn't working with IFormFile

wwwwOP•16mo ago

wwwwOP•16mo ago

app.MapPost("/api/addProduct", [Authorize] async ([FromForm] ProductFormData model, [FromForm] IFormFileCollection collection, ShopDbContext db) =>
{
    System.Console.WriteLine(model.Title);
    IFormFile? file = collection.FirstOrDefault();
    if (file is null)
        return Results.BadRequest("Bad image");

    string uniqueFileName = Guid.NewGuid().ToString();
    string filePath = Path.Combine("StaticFiles/Images", uniqueFileName);

    using (var fs = new FileStream(filePath, FileMode.Create))
        await file.CopyToAsync(fs);

    return Results.Ok();
});

app.MapPost("/api/addProduct", [Authorize] async ([FromForm] ProductFormData model, [FromForm] IFormFileCollection collection, ShopDbContext db) =>
{
    System.Console.WriteLine(model.Title);
    IFormFile? file = collection.FirstOrDefault();
    if (file is null)
        return Results.BadRequest("Bad image");

    string uniqueFileName = Guid.NewGuid().ToString();
    string filePath = Path.Combine("StaticFiles/Images", uniqueFileName);

    using (var fs = new FileStream(filePath, FileMode.Create))
        await file.CopyToAsync(fs);

    return Results.Ok();
});

Pobiega•16mo ago

Ok, try removing the attribute from the dto, see if it binds

wwwwOP•16mo ago

wwwwOP•16mo ago

if i correctly understood what to remove

Pobiega•16mo ago

Hm Well, it thought it should bind to body, but we want it to bind to the form Idk enough about minimal APIs to solve this

wwwwOP•16mo ago

same, lmao atleast i got image, so can figure out other ways how to get data

Pobiega•16mo ago

What .net version?

wwwwOP•16mo ago

should be latest i mean 7, no?

Pobiega•16mo ago

Ok. 6 does not support binding to form data, unsure about 7

wwwwOP•16mo ago

Pobiega•16mo ago

https://stackoverflow.com/questions/71047077/net-6-minimal-api-and-multipart-form-data

Stack Overflow

.NET 6 Minimal API and multipart/form-data

Using the .NET 6 Minimal API, I'm trying to handle multipart/form-data in the POST method. However, with the following code: app.MapPost("/tickets", async (IFreshdeskApiService s, [FromFo...

Pobiega•16mo ago

This is for 6, but might be worth a read

wwwwOP•16mo ago

i mean with HttpContextn i think its easy to do problem is to do this without context

Pobiega•16mo ago

Pobiega•16mo ago

Read the center post by fowler This is literally unsupported and not possible without a custom modelsbinder or using the context

wwwwOP•16mo ago

Pobiega•16mo ago

Or use a controller:p

wwwwOP•16mo ago

mvc is next course for me, will start in 5-8 days

Pobiega•16mo ago

Apparently .net 8 preview supports it For simple models Ie no nested stuff or lists

Pobiega•16mo ago

https://github.com/dotnet/aspnetcore/issues/39430#issuecomment-1570826031

GitHub

Support Form binding for Minimal endpoints · Issue #39430 · dotnet/...

Support for simple types. ##44653 Suport for complex types. Support for IFormCollection

Pobiega•16mo ago

Wait what You had a course on minimal APIs before controllers? Thats wild. Minimal APIs are still new, education tends to lag behind

wwwwOP•16mo ago

Its separated courses, was up to me which one i start with

wwwwOP•16mo ago

asked some guys and they said this way is ok

wwwwOP•16mo ago

start with core after mvc and after razor pages

Pobiega•16mo ago

Asp.net core doesn't imply either minimal or MVC or razor

wwwwOP•16mo ago

i mean, atleast i know how this works

app.MapPost("/api/addProduct", [Authorize] async (HttpContext context, [FromForm] IFormFileCollection collection, ShopDbContext db) =>
{
    IFormFile? file = collection.FirstOrDefault();
    if (file is null)
        return Results.BadRequest("Bad image");

    string uniqueFileName = Guid.NewGuid().ToString() + file.FileName;
    string filePath = Path.Combine("StaticFiles/Images", uniqueFileName);

    using (var fs = new FileStream(filePath, FileMode.Create))
    {
        await file.CopyToAsync(fs);
    }

    Product product = new Product
    {
        Id = db.Products.Count() + 1,
        Title = context.Request.Form["Title"],
        Description = context.Request.Form["Description"],
        Price = Convert.ToDecimal(context.Request.Form["Price"]),
        Image = uniqueFileName
    };

    db.Products.Add(product);
    db.SaveChanges();
    return Results.Ok();
});

app.MapPost("/api/addProduct", [Authorize] async (HttpContext context, [FromForm] IFormFileCollection collection, ShopDbContext db) =>
{
    IFormFile? file = collection.FirstOrDefault();
    if (file is null)
        return Results.BadRequest("Bad image");

    string uniqueFileName = Guid.NewGuid().ToString() + file.FileName;
    string filePath = Path.Combine("StaticFiles/Images", uniqueFileName);

    using (var fs = new FileStream(filePath, FileMode.Create))
    {
        await file.CopyToAsync(fs);
    }

    Product product = new Product
    {
        Id = db.Products.Count() + 1,
        Title = context.Request.Form["Title"],
        Description = context.Request.Form["Description"],
        Price = Convert.ToDecimal(context.Request.Form["Price"]),
        Image = uniqueFileName
    };

    db.Products.Add(product);
    db.SaveChanges();
    return Results.Ok();
});

finally that thing works

wwwwOP•16mo ago

wwwwOP•16mo ago

wwwwOP•16mo ago

wwwwOP•16mo ago

Thanks for help @Pobiega , without you I would have sat there for 10 hours wondering whats wrong.

Gaming

Programming

✅ Fetch

Did you find this page helpful?