Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

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!

share|improve this question
    
As to the strategy of storing blobs or files refer to this link: stackoverflow.com/questions/1347461/… – Oleg G Dec 15 '14 at 21:00

1 Answer 1

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

share|improve this answer
    
Do you have an example of how you're saving to the db? esp if you're streaming it in. – Mastro Apr 22 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, – wilver Apr 23 at 6:45

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.