CODEWITHSUNDEEP
c#asp.net-corefile-uploadiformfile
Sam
Sam

Reputation: 91

Asp.Net Core API receiving empty IFormFile

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:

enter image description here

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

enter image description here

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

The structure after uploading an image

Upvotes: 2

Views: 4071

Answers (1)

Hasan
Hasan

Reputation: 1298

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.

Upvotes: 1

Related Questions