AngularJS.Net WebAPI Upload Image and Save to Database (MSSQL)

Question

I am trying to load an image (you can bind to a model with a data type of type []) from the user interface and save it to the database. I use AngularJS, connecting it to .NET WebAPI and storing it on an MSSSQL server. I can not find a good example using these technologies.

Question: Which approach is better to use? e.g. ng-upload, FormData, ArrayBuffer, image to byte conversion, etc. and how do you catch it from webapi?

Thanks!

Answer 1

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

• angular-file-upload
• .NET ImageResizer : for resizing the original image for thumbnails (great job by Nathaniel Jones)

stack:

Angular.js Image Uploader

As I said, I use angular-file-uploader. There is not much to add to the official documentation, but my bootloader configuration is :

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

To send a user ID to an http request and provide access to an authorized route

WebApi Action 2

The service does the bulk of the work. Here is the code. As you can see, at this point I am making two changes to the image (one for the user profile image, and the other for the user thumbnail image). In addition, I convert the byte [] to a string and prepare the string for subsequent searches. Having done this, I will add this part of "data: image / gif; base64", so in subsequent readings of entities (via EntityFramework) I no longer need to manipulate the result, and I can place them directly in the angular template:

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

Obviously, this can be done differently, but this is my case.

Database

For the moment, I'm just using nvarchar to store images.

This is my first attempt, so it can be improved for sure (if you have any hints, feel free to).