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?

5
  • This might be helpful stackoverflow.com/q/33279153/713789 Commented Nov 3, 2020 at 5: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. Commented Nov 3, 2020 at 5: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. Commented Nov 3, 2020 at 6:31
  • @AnirudhaGupta as there might be a situation where bucket needs to be private. Commented Nov 3, 2020 at 6: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. Commented Nov 3, 2020 at 9:10

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.