0

I am using .NET Core 3.1 for my Web API project and ReactJs as front-end. I want to upload an image from ReactJs and pass it to Web API. The .Net Core will upload the image to AWS S3. Now my problem is I have some other information along with an image that I want to store in the database. So from the front-end, I want to pass an image along with other details and during GET request I want an image along with other details. Below are the properties I am dealing with:

public class CategoryDto
{
    public int CategoryId {  get; internal set; }
    [Display(Name ="category name")]
    [Required]
    [StringLength(50)]
    public string CategoryName { get; set; }
    public IFormFile CategoryImage { get; set; }
    [Required]
    public bool HasSubCategory { get; set; }
}

I am facing the following issues:

  1. How do I send an image along with other category details from ReactJs? I read several articles and some of them suggest to use form-data and others suggest to convert the image to base64 and deal with them. As I don't want the overhead of encoding and decoding the image in base64 on the client and server-side I preferred using form-data but the API won't be REST anymore. Is there any other way through which I can send images via REST API (I don't want to use the two different APIs either i.e. one for sending details and the other for sending image)?

  2. As of now I have used the form-data and on the server-side, I am storing the image on AWS S3. Now, how should I send the category details along with the image as a response to the client? I know one simple way of passing the URL of the image stored on AWS S3 and simply use <img src="url">. For this, I have to make the images stored on a bucket public. Also, there would be many images rendering on the client-side at once, so this might affect the performance as we have to render the image directly from S3. Is there any other way through which I can send the image along with other details as a response from Web API and then render the image on the client-side?

Sunny
  • 752
  • 1
  • 11
  • 24
  • This might be helpful https://stackoverflow.com/q/33279153/713789 – Anirudha Gupta Nov 03 '20 at 05:40
  • @AnirudhaGupta I have referred to this article already. The answers to this question do not contain the explanation for returning images as a response. Only one way I found here was to use the Image URL of the cloud server. – Sunny Nov 03 '20 at 05:52
  • Why you want to serve the image from your server? If you read from s3 and return in api response, you are adding the unusual overhead to server. – Anirudha Gupta Nov 03 '20 at 06:31
  • @AnirudhaGupta as there might be a situation where bucket needs to be private. – Sunny Nov 03 '20 at 06:59
  • `Is there any other way through which I can send the image along with other details as a response from Web API` sending a file and other custom data in same one response is not supported in ASP.NET Core API. You can try to encode image file to base64encoded string, then send it with other information to client. – Fei Han Nov 03 '20 at 09:10

0 Answers0