0

Estou tentando fazer com que um arquivo seja anexado através de um botão. O problema é que o arquivo chega mas não esta setando, como mostra nas imagens abaixo, logo abaixo das imagens tem o método e o html do botão.

Erro SetValue

Arquivo chega null

docFile(event: any) {
  let reader = new FileReader();
  let size = event.target.files[0].size;
  if (event.target.files && event.target.files.length > 0) {
    let file = event.target.files[0];
    if (size > 2097152) {
      this.template.openModal()
    } else {
      reader.readAsDataURL(file);
      reader.onload = (event: any) => {
        this.imagemDoc = event.target.result;
        console.log(size);
        this.dadosPessoaisForm.get('documentos.arquivo').setValue({
          id: this.arquivo.id,
          nome: file.name,
          tipo: file.type,
          // dados: reader.result.split(',')[1]
        })
      };
    }
  }
}
<div class="input-group-addon" style="background-color: #ffffff">
  <div class="upload-btn-wrapper">
    <button type="file" class="fa fa-paperclip"></button>
    <input type="file" class="btn btn-default" id="arquivo" accept='file/*' (change)="docFile($event)" #fileInput>
  </div>
</div>

Foi feito o console.log(size) na função como pedido no comentário e o resultado foi este da imagem abaixo.

inserir a descrição da imagem aqui

2
  • Consegues dar um console. log no event.target.files e ver se está correta a estrutura ? 4/09/2018 às 14:06
  • Acabei de fazer e o resultado está nas ultimas linhas da minha pergunta. 4/09/2018 às 14:37

2 Respostas 2

1

Você pode fazer dessa maneira para realizar o upload.

app.component.html

<form [formGroup]="photoForm" class="row" (submit)="upload()">
    <input #fileInput formControlName="file" type="file" accept="image/*"
       (change)="handleFile($event.target.files[0])">
</form>

E o handle serve para pegar o arquivo no momento que ele é escolhido e por dentro da variável file do tipo File e preview do tipo string globalmente dentro do component.ts.

E para realizar o upload será o método upload será chamado no submit do form. Nesse exemplo estou enviando a imagem junto com outros campos do formulário. Mantive em separado o arquivo para você poder adaptar da melhor forma.

app.component.ts

export class AppComponent implements OnInit {

    photoForm: FormGroup;
    file: File;

    constructor(
        private formBuilder: FormBuilder,
        private appService: AppService,
        private router: Router
    ) { }

    ngOnInit() {

        this.photoForm = this.formBuilder.group({
            file: [''],
            description: ['']
        });
    }

    handleFile(file: File) {
        this.file = file;
        const reader = new FileReader();

        reader.onload = (event: any) => this.preview = event.target.result;
        reader.readAsDataURL(file);
    }


    upload() {
        const data = this.photoForm.getRawValue() as PhotoForm;
        data.file = this.file; // <-- arquivo para upload

        this.appService.upload(data).subscribe(
            () => {
                console.log('Upload Done.')
            }
        );
    }

E por fim o serviço. Estou declarando explicitamente cada campo do meu formulário pois o backend espera nomes diferentes dos aplicados no frontend.

app.service.ts

    upload(photoForm: PhotoForm) {

        const formData = new FormData();
        formData.append('description', photoForm.description);
        formData.append('imageFile', photoForm.file);

        return this.http.post(API + '/photos/upload', formData);
    }

Espero que ajude! Bons códigos!

2
  • Tem como você demonstrar no stackblitz pois não consegui compreender os app.componente.ts . 12/09/2018 às 11:39
  • Modifiquei um pouco tentando simplificar e esclarecer suas dúvidas. Veja se ajuda. @FabianoCamargo
    – jcebidanes
    14/09/2018 às 14:59
0

Tinha me esquecido de mencionar que este arquivo está dentro de um array, e foi necessário passar primeiro a posição do array e depois o campo onde eu coloco o anexo de arquivo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .