Uploading image in .net core web api in better way

Question

We are uploading images from .net core web api to Amazon Web Services(AWS) using S3 bucket. And the image we are receiving in request body in Base64 string format in web api controller.

This all works well, however we are having performance issues while uploading the image. As it is take a lot of time to upload.

What we are doing once we receive the Base64 string we convert it to byte array and pass the byte array to aws. We are receiving at least 10 images in request body.

Basically these images are send through mobile app created with ionic/angular js.

We have tried with directly sending the byte array from UI to web api but still it takes the same time. Along with image upload we are also sending the form data.

As these images have size of 6/7 mb per image.

Below is the code for the same.

public class SafetyController : ControllerBase
    {
        [HttpPost]

        public IActionResult Save([FromBody] SafetyModel safetyModel)
        {
            try
            {
                  SafetyBL safetybl = new SafetyBL();
                  safetybl.Save();

            }

            catch (Exception ex)
            {
               throw ex;
            }
        }
}


public class SafetyModel
    {
        public int Id { get; set; }
        public string SafetyName { get; set; }
        public string SafetyDescription { get; set; }
        public string Location { get; set; }
        public List<Photo> Photos { get; set; }
    }

public class Photo
{
  public string Base64{ get; set; }
}

public class Convert()
{
  Public byte[] ConvertToByteArray(string base64)
    {
        return Convert.FromBase64String(base64);
    }
}

Roman Marusyk · Accepted Answer · 2019-11-07 16:57:08Z

2

For better performance you need to upload files with streaming as described in docs

To achieve this in an easier way see on UploadStream package.

Also use stream instead of byte array wherever it possible. I believe that S3 bucket SKD has overloading for stream

edited Nov 7, 2019 at 16:57

answered Nov 7, 2019 at 16:49

Roman Marusyk

24.8k27 gold badges83 silver badges127 bronze badges

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

6 Comments

XamDev Over a year ago

But can we use the base64 approach?

XamDev Over a year ago

I mean what should be the accepting parameter in the api and how they should pass from angular js?

Chris Pratt Over a year ago

You're uploading the file via JSON, so your only options are a base64-encoded string or a uint array (the JS-equivalent of a byte array), since those are the only types valid in a JSON document. JSON, in general, is not a streamable format. In order to deserialize the JSON object (and thus get at the file data), the entire document must be available, requiring it to be uploaded completely. If you want better performance, then you need to send via multipart/form-data and then manually read from the request body stream (no model-binding).

XamDev Over a year ago

@Roman Marusyk Thanks for the information. However, there is no detailed information available how to use uploadstream package ? Alternatively, I was thinking of using IFormFile.

Roman Marusyk Over a year ago

Why not detailed information? Yes, you should use IFormFile to better performance, as said Cris, but with streaming and package from my answer. You can still use base64 but via multipart/form-data instead of request body

|

Collectives™ on Stack Overflow

Uploading image in .net core web api in better way

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related