4

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!

user3505453
  • 41
  • 1
  • 1
  • 3
  • As to the strategy of storing blobs or files refer to this link: http://stackoverflow.com/questions/1347461/saving-images-files-or-blobs – Oleg G Dec 15 '14 at 21:00

1 Answers1

2

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

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).

wilver
  • 2,106
  • 1
  • 19
  • 26
  • Do you have an example of how you're saving to the db? esp if you're streaming it in. – Mastro Apr 22 '15 at 21:37
  • 1
    In my answer you can find all the code, in particular [the service used to save the images to the db](https://github.com/williamverdolini/discitur-api/blob/master/Controllers/UserController.cs#L133), – wilver Apr 23 '15 at 06:45