¿Como puedo hacer para enviar una foto de Angular a una api en c#?
He realizado un pequeño formulario para crear un usuario y he agregado un poco de codigo para cargar la foto
<div class="col-2">
<div class="user-photo">
<mat-card>
<mat-card-header>
<mat-card-title>Foto del Usuario</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="photo-container">
<div class="photo-content" [ngStyle]="{ 'background-image': 'url(' + userForm.get('photoPath')?.value + ')' }" [ngClass]="{ 'no-photo': !userForm.get('photoPath')?.value }">
<mat-icon *ngIf="!userForm.get('photoPath')?.value" class="add-photo-icon" (click)="handlePhotoUpload($event)">add_photo_alternate</mat-icon>
</div>
</div>
<div class="add-photo">
<label for="fileInput">
<input id="fileInput" type="file" accept="image/*" (change)="handlePhotoUpload($event)">
<mat-icon>add_photo_alternate</mat-icon><span>Agregar foto</span>
</label>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
tengo un pequeño metodo para manejar la foto
handlePhotoUpload(event: Event) {
const inputElement = event.target as HTMLInputElement;
if (inputElement.files && inputElement.files.length > 0) {
const file = inputElement.files[0];
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
const maxSizeInBytes = 5242880; // Tamaño máximo de archivo en bytes (5 MB)
if (allowedTypes.includes(file.type) && file.size <= maxSizeInBytes) {
const reader = new FileReader();
reader.onload = () => {
const imageUrl = reader.result as string;
this.photoPath = imageUrl; // Actualizar la ruta de la foto
this.userForm.get('photoPath')?.setValue(imageUrl);
};
reader.readAsDataURL(file);
// Asignar el archivo a la variable photoFile en userForm.value
this.userForm.get('photoPath')?.setValue(file);
} else {
this._matSnack.open('El tamaño de la foto supera los 5 MB o el tipo de archivo no es el correcto', 'Cerrar', { duration: 5000 });
}
}
}
y atravez de el boton crear ejecuto el siguiente metodo
createUser() {
if (this.userForm.invalid) {
return;
}
const registerDto: RegisterDto = {
firstName: this.userForm.value.firstName,
lastName: this.userForm.value.lastName,
userName: this.userForm.value.userName,
email: this.userForm.value.email,
passwordHash: this.userForm.value.passwordHash,
confirmPassword: this.userForm.value.passwordHash,
phone: this.userForm.value.phone,
roleId: this.userForm.value.roleId,
updatedAt: this.userForm.value.updatedAt
};
const photo: File | undefined = this.userForm.value.photoPath;
if (photo) {
this._gestorService.registerUser(registerDto, photo).subscribe(
(response: RegisterDto) => {
this._matSnack.open('El usuario se ha creado exitosamente', 'Cerrar', { duration: 5000 });
this._gestorService.navigateTo("home/usuarios");
},
(error) => {
this._matSnack.open('Ocurrió un problema al crear el usuario', 'Cerrar', { duration: 5000 });
}
)
} else {
this._gestorService.registerUser(registerDto, null).subscribe(
(response: RegisterDto) => {
this._matSnack.open('El usuario se ha creado exitosamente', 'Cerrar', { duration: 5000 });
this._gestorService.navigateTo("home/usuarios");
},
(error) => {
this._matSnack.open('Ocurrió un problema al crear el usuario', 'Cerrar', { duration: 5000 });
}
)
}
}
en mi servicio que llama a la api tengo lo siguiente
registerUser(registerDto: RegisterDto, photo: File | null): Observable<RegisterDto> {
let headers = this.getHeader();
headers.append('Content-Type', 'application/json');
const formData = new FormData();
formData.append('registerDto', JSON.stringify(registerDto));
if (photo) {
formData.append('photo', photo);
}
return this._http.post<RegisterDto>(`${this._urlBase}/gestionusuarios/register`, formData, { headers }).pipe(
catchError(this.handleError)
);
}
y por ultimo en mi metodo de api tengo lo siguiente para crear el usuario
[HttpPost("register")]
public async Task<IActionResult> Register([FromBody]RegisterDto registerDto, [FromForm]IFormFile? photo)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
var existingUser = await _context.Users
.FirstOrDefaultAsync(u => u.Username == registerDto.UserName);
if (existingUser != null)
{
return BadRequest("El usuario ya se encuentra registrado");
}
if (registerDto.RoleId == null)
{
registerDto.RoleId = 1; // Mozo level
}
else if (registerDto.RoleId != 1 && registerDto.RoleId != 2 && registerDto.RoleId != 3 && registerDto.RoleId != 4)
{
return BadRequest("Invalid role ID");
}
var newUser = new User
{
FirstName = registerDto.FirstName,
LastName = registerDto.LastName,
Username = registerDto.UserName,
Email = registerDto.Email,
Phone = registerDto.Phone,
UserRoleId = (int)registerDto.RoleId,
CreatedAt = DateTime.UtcNow,
UpdatedAt = DateTime.UtcNow,
};
if (photo != null && photo.Length > 0)
{
var username = registerDto.UserName;
newUser.PhotoPath = await SaveUserPhoto(username, photo);
}
else
{
newUser.PhotoPath = "Sin definir";
}
var passwordHasher = new PasswordHasher<User>();
newUser.PasswordHash = passwordHasher.HashPassword(newUser, registerDto.PasswordHash);
_context.Users.Add(newUser);
var log = new Log
{
TableName = "Users",
RecordId = newUser.Id,
Operation = "INSERT",
UserId = newUser.Id,
ColumnName = "ALL TABLE",
OldValue = "-",
NewValue = "ALL FIELD",
Description = "CREACION DE USUARIO",
Timestamp = DateTime.UtcNow
};
// Agregar el objeto Log al contexto de base de datos y guardar los cambios.
_context.Logs.Add(log);
await _context.SaveChangesAsync();
var responseDto = _mapper.Map<UserDto>(newUser);
return Ok(responseDto);
}
El problema es que obtengo Status Code:415 Unsupported Media Type
¿Alguna sugerencia para poder enviar correctamente los archivos a mi metodo?
EDITADO: en this.getHeader() tengo lo siguiente:
private getHeader() {
const header = new HttpHeaders().set('Authorization', `Bearer ${this.getToken()}`);
return header;
}