2
respostas

Error 404

Estou com o seguinte erro

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Alguém pode me dar uma luz ?

component ts

import { HttpEvent, HttpEventType } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { finalize } from 'rxjs';
import { AnimaisService } from '../animais.service';

@Component({
  selector: 'app-novo-animal',
  templateUrl: './novo-animal.component.html',
  styleUrls: ['./novo-animal.component.css']
})
export class NovoAnimalComponent implements OnInit {
  formularioAnimal!: FormGroup
  file!: File
  preview!: string
  percentualConcluido = 0

  constructor(
    private animaisService: AnimaisService,
    private formBuilder: FormBuilder,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.formularioAnimal = this.formBuilder.group({
      file: ['', Validators.required],
      description: ['', Validators.maxLength(300)],
      allowComments: [true],
    })
  }

  upload() {
    const allowComments = this.formularioAnimal.get('allowComments')?.value ?? false
    const description = this.formularioAnimal.get('description')?.value ?? ''

    this.animaisService
      .upload(description, allowComments, this.file)
      .pipe(finalize(() => this.router.navigate(['animais'])))
      .subscribe(
        (event: HttpEvent<any>) => {
          if (event.type == HttpEventType.UploadProgress) {
            const total = event.total ?? 1
            this.percentualConcluido = Math.round( 100* (event.loaded / total))
          }
        },
        (error) => console.log(error)
      )
  }

  gravaArquivo(arquivo: any): void {
    const [file] = arquivo?.files
    this.file = file
    const reader = new FileReader()
    reader.onload = (event: any) => (this.preview = event.target.result)
    reader.readAsDataURL(file)
  }
}
2 respostas

Animal service

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, mapTo, Observable, of, throwError } from 'rxjs';
import { environment } from 'src/environments/environment';
import { TokenService } from '../autenticacao/token.service';
import { Animais, Animal } from './animais';

const API = environment.apiURL;
const NOT_MODIFIED = '304'

@Injectable({
  providedIn: 'root'
})
export class AnimaisService {

  constructor(private http: HttpClient, private tokenService: TokenService) { }

  listaDoUsuario(nomeDoUsuario: string): Observable<Animais>{ 
    return this.http.get<Animais>(`${API}/${nomeDoUsuario}/photos`)
  }

  buscaPorID(id: number): Observable<Animal> {
    return this.http.get<Animal>(`${API}/photos/${id}`)
  }

  excluiAnimal(id: number): Observable<Animal> {
    return this.http.delete<Animal>(`${API}/photos/${id}`)
  }

  curtir(id: number): Observable<boolean> {
    return this.http
    .post(`${API}/photos/${id}/like`, {}, {observe: 'response'})
    .pipe(
      mapTo(true),
      catchError((error)=> {
      return error.status === NOT_MODIFIED ? of(false) : throwError(error)
    })
    )
  }

  upload(descricao: string, permiteComentario: boolean, arquivo: File) {
    const formData = new FormData()
    formData.append('description', descricao)
    formData.append('allowComments', permiteComentario ? 'true' : 'false')
    formData.append('imageFile', arquivo)

    return this.http.post(`${API}/photo/upload`, formData, {
      observe: 'events',
      reportProgress: true,
    })
  }
}

html template

<div class="container">
    <form [formGroup]="formularioAnimal" class="row" (submit)="upload()"> 
        <div class="col-md-6 text-center">
            <div class="form-group" *ngIf="!preview; previewImage">
                <button
                type="submit"
                (click)="fileInput.click()"
                class="btn btn-primary">
                <i class="fa fa-image fa-4x align-middle"></i>
                </button>

                <input 
                #fileInput
                type="file"
                hidden
                formControlName="file"
                accept="image/*"
                (change)="gravaArquivo($event.target)">

                <app-mensagem
                mensagem="Por favor selecione a foto"
                *ngIf="!! formularioAnimal.get('file')?.errors?.['required']"
                ></app-mensagem>
            </div>
            <ng-template #previewImage>
                <app-animal [url]="preview" title="Preview"></app-animal>
            </ng-template>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <textarea
                formControlName="description"
                class="form-control form-control-sm"
                placeholder="Descrição do animal"
                ></textarea>
                <app-mensagem
                mensagem="Tamanho máximo do campo é 300 caracteres"
                *ngIf="!! formularioAnimal.get('description')?.errors?.['maxlength']"></app-mensagem>
            </div>

            <div class="form-group">
                <label class="text-muted">
                    Permite comentário
                    <input type="checkbox" formControlName="allowComments">
                </label>
            </div>

            <div *ngIf="!percentualConcluido; else uploaddiv">
                <button
                [disabled]="formularioAnimal.invalid"
                type="submit"
                class="btn btn-primary btn-block">
                Enviar
                </button>

                <a [routerLink]="['animais']" class="btn btn-secondary btn-block">Cancelar</a>

            </div>

            <ng-template #uploaddiv>
                <div class="text-center display-4">
                    Percentual de upload {{ percentualConcluido }} %
                </div>
            </ng-template>
        </div>

    </form>
</div>

Olá Bruno, tudo bem com você?

Peço desculpas pela demora em obter um retorno.

O erro, POST http://localhost:3000/photo/upload 404 (Not Found), está indicando que o endereço (endpoint) da API não foi encontrado no momento em que foi realizada a tentativa de salvar a foto. Este erro está acontecendo devido a url está com um erro de digitação, a url correta será http://localhost:3000/photos/upload, com o photos no plural.

Peço que localize o método upload presente no arquivo animais.service.ts, e no caminho passado para o método this.http.post() deixe a url da seguinte forma, `${API}/photos/upload`. Abaixo o método com a mudança aplicada:

  upload(descricao: string, permiteComentario: boolean, arquivo: File) {
    const formData = new FormData()
    formData.append('description', descricao)
    formData.append('allowComments', permiteComentario ? 'true' : 'false')
    formData.append('imageFile', arquivo)

    return this.http.post(`${API}/photos/upload`, formData, {
      observe: 'events',
      reportProgress: true,
    })
  }

Após essa mudança, salve o arquivo animais.service.ts e reinicie a aplicação Angular com o comando ng serve. Abra a aplicação no navegador e adicione uma nova imagem e verifique se ocorre a adição da imagem.

Espero ter ajudado. Continue mergulhando em conhecimento e não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Em caso de dúvidas estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!