0

¿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;

}

2
  • Intenta usando postman, así determinamos si el problema va con la API o con el front. Saludos.
    – fredyfx
    Commented el 25 may. 2023 a las 16:39
  • El problema al parecer viene de angular por que crear correctamente el usuario a travez de postman ¿Puedes ayudarme?
    – Joaquin
    Commented el 25 may. 2023 a las 17:14

1 respuesta 1

0

Intenta 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).pipe(
  catchError(this.handleError)
);
4
  • Lo he intentado pero recibo un error lo siguiente: status: 415 statusText: "Unsupported Media Type"
    – Joaquin
    Commented el 25 may. 2023 a las 18:40
  • Cuando envio registerDto como unico parametro, puedo crear el usuario, pero cuando lo intento enviar con la foto en el segundo parametro obtengo el error en la llamada a la api
    – Joaquin
    Commented el 25 may. 2023 a las 18:45
  • Edita tu pregunta y agrega lo que tienes en this.getHeader()
    – fredyfx
    Commented el 25 may. 2023 a las 20:04
  • ya lo he editado, en this.getHeader() envio el token de autenticación private getHeader() { const header = new HttpHeaders().set('Authorization', Bearer ${this.getToken()}); return header; }
    – Joaquin
    Commented el 25 may. 2023 a las 20:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.