Error while attaching file Angular4

Navigation
0

I'm trying to get a file attached via a button. The problem is that the file arrives but is not set up, as shown in the screenshots below, just below the images has the method and html of the button. 

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>

The console.log (size) was made in the function as requested in the comment and the result was the image below.

    
asked by anonymous 04.09.2018 / 13:53

2 answers

0

I had forgotten to mention that this file is inside an array, and it was necessary to first pass the position of the array and then the field where I put the attachment file.

    
18.09.2018 / 13:05
1

You can do this to 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>

And the handle is used to pick up the file at the time it is chosen and inside the File File variable > preview of type string globally within component.ts.

And to upload it will be the upload method will be called in the form submit. In this example I'm sending the image along with other form fields. I kept the file separate so that you can adapt it in the best way.

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.')
            }
        );
    }

And finally the service. I'm explicitly declaring each field in my form because the backend expects names other than those applied in the 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);
    }

Hope it helps! Good codes!

    
07.09.2018 / 16:51
JavaScript Clock increase for game Execution console hangs while doing many reads in debug mode!