AngularJS .Net WebAPI Upload image and save to database (MSSQL)

Question

I'm trying to upload an Image(can be bind to a model with a data type byte[]) from UI and save it in the database. I'm using AngularJS connecting it to .NET WebAPI and saving it to MSSSQL Server I cant find a good example using these technologies.

Question: What approach is better to use? like ng-upload, FormData, ArrayBuffer, convert image to byte, etc. and how will you catch it from WebAPI?

Thanks!

As to the strategy of storing blobs or files refer to this link: stackoverflow.com/questions/1347461/… — Oleg G
– Oleg G, Commented Dec 15, 2014 at 21:00

wilver · Accepted Answer · 2014-05-03 13:19:14Z

2

I'm working on this feature these days. I share my experience (obviously it can be improved). The key components I use are:

angular-file-upload
.NET ImageResizer: for resizing original image for thumbnails (excellent work by Nathanael Jones)

the stack is:

Angular.js Image Uploader

As I said, I use angular-file-uploader. There's no so much to add to the official documentation, but my uploader configuration is:

$scope.uploader = $fileUploader.create({
    scope: $scope,
    url: DisciturSettings.apiUrl + 'User/Image',
    queueLimit: 1,
    formData: [{ UserId: AuthService.user.userid }],
    headers: AuthService.getTokenHeader()
});

In order to send the user id to the http request and to grant the access to the authorized route

WebApi 2 Action

The service does the main work. Here is the code. As you can see, in this phase, I do two resizings of the image passed (one for the user profile picture and the other for user thumbnail picture). Besides this, I convert the byte[] in string and prepare the string for next retrievals. Doing this I prepend this part "data:image/gif;base64,", so, in the next entity readings (through EntityFramework) I don't have to manipulate the result anymore and I can put them directly in angular template:

<img ng-src="{{local.user.image}}" />

Obviously It can be made differently, but that's my case.

Database

At the moment I simply use nvarchar for storing images.

It's my first try so it can be improved for sure (if you have hints, don't hesitate).

edited May 3, 2014 at 13:19

answered May 2, 2014 at 0:00

wilver

2,1161 gold badge21 silver badges26 bronze badges

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

2 Comments

Mastro Over a year ago

Do you have an example of how you're saving to the db? esp if you're streaming it in.

wilver Over a year ago

In my answer you can find all the code, in particular the service used to save the images to the db,

Collectives™ on Stack Overflow

AngularJS .Net WebAPI Upload image and save to database (MSSQL)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related