Asp.Net Core API receiving empty IFormFile

Question

The last 2 days, I have been trying to create an image upload system for my website. When I try to save an uploaded image in the "wwwroot" of my Api, everything goes as planned except that I get an empty image in my folder.

At the backend, I receive the filename I send in the frontend but the bytes of the image itself are not there. For some reason the the data of the stream I put in the post call is missing but I do receive the filename in the formfile.

Edit:

To clear things up about my application, I'm working with an Asp.Net Mvc as frontend and Asp.Net Api as backend. I know this isn't how you are supposed to use Asp.Net but this is a school project and I have to do it like this. Normally i would work with Angular or something else but that is not an option for me right now.

So, I'm sending data from the Asp.Net Mvc (frontend) to the Asp.Net Api (backend) and I'm trying to do it by sending it as form data. That means there is no real form that is being submitted.

This is the guide I tried to use: https://ilclubdellesei.blog/2018/02/14/how-to-upload-images-to-an-asp-net-core-rest-service-with-xamarin-forms/

Backend

ImageController:

[HttpPost("upload")]
public async Task<IActionResult> UploadImage([FromForm(Name = "file")] IFormFile file)
{
    if (file.Length == 0)
        return BadRequest("Empty file");

    string imageName = file.FileName;
    using (var fs = new FileStream("wwwroot/" + imageName, FileMode.Create, FileAccess.Write))
    {
        await file.CopyToAsync(fs);
    }

    return Ok();
}

Frontend

Method that uploads 1 image as a MemoryStream to the server

private async Task<string> Upload(Stream image, string name, string contentType)
{
    _httpClient = _clientFactory.CreateClient("ProjectApi");

    HttpContent fileStreamContent = new StreamContent(image);
    fileStreamContent.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data") { Name = "file", FileName = name };
    fileStreamContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(contentType);
    using (var formData = new MultipartFormDataContent())
    {
        formData.Add(fileStreamContent);
        HttpResponseMessage response = await _httpClient.PostAsync("api/images/upload", formData);
        var input = await response.Content.ReadAsStringAsync();
        return input;
    }
}

The content doesn't seem to be empty:

The filename has been successfully send to the Api but the bytes of the image have not been send:

Structure after uploading some images without checking the size of the formfile (They are empty):

Can you also post the <form> and <input> tags you used in your view to submit your file? I believe this would help clarifying what's going on. Also, can you confirm that your <form> has enctype="multipart/form-data"? — vinicius.ras
– vinicius.ras, Commented Dec 25, 2018 at 18:50
Hey, I added some more information in my question to clear things up for you. — Sam
– Sam, Commented Dec 25, 2018 at 19:11
I wouldn’t use the IFormFile interface at all. Just send the data as a byte array and the file name as a separate argument. — Heretic Monkey
– Heretic Monkey, Commented Dec 25, 2018 at 19:21
Add image.Position = 0; as the first line in your Upload method (frontend). — Kirk Larkin
– Kirk Larkin, Commented Dec 25, 2018 at 20:19

Hasan · Accepted Answer · 2018-12-26 11:35:18Z

1

I am not 100% sure but I suppose the reason why you get empty file is that you did not set what type data your api endpoint will consume and maybe the form encryption type & method attributes. My suggestion is that you should update your code to below. ,

[Consumes("multipart/form-data")]
private async Task<string> Upload(Stream image, string name, string contentType)

And in case you forget to add form attributes to your html section, please set attributes as follows <form method="post" enctype="multipart/form-data">. Hope this solves your problem.

answered Dec 26, 2018 at 11:35

Hasan

1,30813 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Asp.Net Core API receiving empty IFormFile

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related