Angular Web API save image to db

Hi IIkin Turk,

try below code..

template

Component

export class FileUploadComponenet {
constractor(private httpClient:HttpClient){}
public fileChange(files:any[]) {
if (files && files.length > 0) {
let file = files[0];
let formData = new FormData();
formData.append('file', file);
this.httpClient.post(url,formData).subscribe(res => console.log('File Uploaded ...');
}
}
}

Rendering images to byte array and convert

public MyInformationViewModel Get(int id)
{
var user = userRepository.GetUser(Authentication.GetCurrentAuthenticatedUserName());
var viewModel = new MyInformationViewModel
{
Username = user.SamAccountName,
LastName = user.Surname,
FirstName = user.GivenName,
Position = principalRepository.GetProperty(user, "title"),
DepartmentId = int.Parse(principalRepository.GetProperty(user, "departmentNumber")),
EmployeeId = int.Parse(principalRepository.GetProperty(user, "employeeNumber")),
Department = principalRepository.GetProperty(user, "department"),
EmailAddress = user.EmailAddress,
Phone = principalRepository.GetProperty(user, "telephoneNumber"),
Mobile = principalRepository.GetProperty(user, "mobile"),
Ddi = principalRepository.GetProperty(user, "ipPhone"),
Fax = principalRepository.GetProperty(user, "facsimileTelephoneNumber"),
UserPhoto = principalRepository.GetProperty_Byte(user, "thumbnailPhoto")
};
return viewModel;
}
[Transaction]
public void Post(MyInformationViewModel viewModel)
{
var isSuccessful = userTasks.UpdateUserDetails(
viewModel.Username,
viewModel.Phone,
viewModel.Mobile,
viewModel.Fax,
viewModel.UserPhoto
);
}

public byte[] UserPhoto { get; set; }

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ravishankar N7y ago
Hi llkin,

check out this article to save and view images in SQL

https://www.c-sharpcorner.com/article/how-to-upload-multiple-image-using-angular7/
0
7y ago
Hi Elavarasan.I only need store image in binary format without encoding it to base64. Save it to sql then retrieve to show from db.

thanks
0
Sonu Gupta7y ago
Hi,

Go to following link -

https://www.codeproject.com/Tips/878730/File-Upload-Using-AngularJS-and-ASP-NET-MVC
0
Elavarasan R7y ago
Hi IIkin Turk,

try below code..

template

Component
export class FileUploadComponenet {

constractor(private httpClient:HttpClient){}

public fileChange(files:any[]) {

    if (files && files.length > 0) {
     let file = files[0];
     let formData = new FormData();
     formData.append('file', file);
     this.httpClient.post(url,formData).subscribe(res => console.log('File Uploaded ...');
    }

  }
}
Rendering images to byte array and convert
public MyInformationViewModel Get(int id)
{
    var user = userRepository.GetUser(Authentication.GetCurrentAuthenticatedUserName());

    var viewModel = new MyInformationViewModel
    {
        Username = user.SamAccountName,
        LastName = user.Surname,
        FirstName = user.GivenName,
        Position = principalRepository.GetProperty(user, "title"),
        DepartmentId = int.Parse(principalRepository.GetProperty(user, "departmentNumber")),
        EmployeeId = int.Parse(principalRepository.GetProperty(user, "employeeNumber")),
        Department = principalRepository.GetProperty(user, "department"),
        EmailAddress = user.EmailAddress,
        Phone = principalRepository.GetProperty(user, "telephoneNumber"),
        Mobile = principalRepository.GetProperty(user, "mobile"),
        Ddi = principalRepository.GetProperty(user, "ipPhone"),
        Fax = principalRepository.GetProperty(user, "facsimileTelephoneNumber"),
        UserPhoto = principalRepository.GetProperty_Byte(user, "thumbnailPhoto")
    };

    return viewModel;
}

[Transaction]
public void Post(MyInformationViewModel viewModel)
{
    var isSuccessful = userTasks.UpdateUserDetails(
        viewModel.Username,
        viewModel.Phone,
        viewModel.Mobile,
        viewModel.Fax,
        viewModel.UserPhoto
        );
}
public byte[] UserPhoto { get; set; }
+1