CODEWITHSUNDEEP
javascriptc#angular.net-coreblob
DiPix
DiPix

Reputation: 6083

How to send image file from Angular to .net core API

I want to upload image from my Angular application to .net core api, because I want to save it in SQL database. To do this I adding image via:

<input type="file" accept="image/png, image/jpeg">

And I have object type of File enter image description here

I found this tutorial for API which says that my property in backend should looks:

public byte[] ImageData { get; set; }

But I'm not quite sure how am I suppose to convert it to that type before I'll send it to API. Any idea?

Upvotes: 0

Views: 4392

Answers (2)

Diego Vieira
Diego Vieira

Reputation: 266

I have one advice for you before you implement your solution

Storing files in Database is not best practice. Your database can become huge and serving those files could become costly to your code.

Instead, you can store those files as static to serve more efficiently. It’s a simple process, just save the metadata (size, file, type, etc) of those files, and store the path to serve after.

For more information, read here.

Or follow these steps:

  1. Convert binary to base64 on your javascript client (how to).
  2. Send base64 string on your body request
  3. In your Endpoint get the data and store in your database as String

Upvotes: 1

Ahmed Abuamra
Ahmed Abuamra

Reputation: 213

You can use a storage to upload your files/images, it should provide a URL for this media file, and you can store this URL in the SQL database. Please follow this link for better understanding assuming you will use firebase storage, but you can use any storage provider or build your own.

Upvotes: 0

Related Questions