Discussion :

[angie13003]

Bonjour,

Cela fait des jours que je suis bloqué sur cette fonction. J'ai essayé plein de tutos différemment mais j'ai toujours le même problème.

Code TypeScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  get f(){
    return this.myForm.controls;
  }
 
  onFileChange(event) {
 
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.myForm.patchValue({
        fileSource: file
      });
    }
  }
 
  submit(){
    const formData = new FormData();
    formData.append('file', this.myForm.get('fileSource').value);
    console.log(formData.append('file', this.myForm.get('fileSource').value))
 
    this.http.post('http://localhost:8888/MoutteCAPI/backend/upload.php', formData)
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Successfully.');
      })
  }

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<h1>Angular 10 File Upload Tutorial Example - ItSolutionStuff.com</h1>
 
<form [formGroup]="myForm" (ngSubmit)="submit()">
 
    <div class="form-group">
        <label for="name">Name</label>
        <input
            formControlName="name"
            id="name"
            type="text"
            class="form-control">
        <div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">
            <div *ngIf="f.name.errors.required">Name is required.</div>
            <div *ngIf="f.name.errors.minlength">Name should be 3 character.</div>
        </div>
    </div>
 
    <div class="form-group">
        <label for="file">File</label>
        <input
            formControlName="file"
            id="file"
            type="file"
            class="form-control"
            (change)="onFileChange($event)">
        <div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">
            <div *ngIf="f.file.errors.required">File is required.</div>
        </div>
    </div>
 
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

le problème est que je ne récupère rien dans le console.log(formData.append('file', this.myForm.get('fileSource').value));

[krakatoa]

je ne sais pas trop.

ça donne quoi ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
    const formData = new FormData();
console.log(this.myForm.get('fileSource').value);
    formData.append('file', this.myForm.get('fileSource').value);
console.log(formData);
    this.myForm.get(formData);
console.log(formData.append('file', this.myForm.get('fileSource').value))

[angie13003]

Alors lorsque je test cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 const formData = new FormData();
 console.log('1',this.addForm.get('fileSource').value);
 formData.append('file',this.addForm.value);
 console.log('2',formData);
 console.log('3',formData.append('file',this.addForm.get('fileSource').value));
 
 this.http.post('http://localhost/codeigniter4_rest_api/student/upload', formData)
   .subscribe(res => {
      console.log(res);
    alert('Uploaded Successfully.');
   })
 }

j'ai directe cette erreur

ERROR TypeError: Cannot read property 'value' of null

et du coup aucun console.log qui s'affiche

[krakatoa]

regarde ici

https://stackblitz.com/edit/angular-form-file-upload