Discussion :

[keokaz]

Bonjour,

j'ai un formulaire d'upload de fichier, et je souhaite enregistrer l'objet file dans un attribut, le problème c'est que cette attribut est vide ?
voici mon code:

Code html :

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

1
2
<input type="file" (change)="onFileSelected($event)">
<button type="button" (click)="onUpload()">envoyé</button>

Code :

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
export class ConnexionComponent implements OnInit {
  loginFail = null;
  selectedFile= null;
 
  constructor(private authService:AuthenticationService,private router:Router,private http:HttpClient) {
  }
 
 
  onFileSelected(event){
    console.log("111 event ");
    console.log(event.target.files[0]);
    console.log("222 target 0  ");
    this.selectedFile = event.target.files[0];
    console.log(this.selectedFile); 
  }
 
  onUpload(){
    console.log("==>"+this.selectedFile); 
    console.log("==>"+JSON.stringify(this.selectedFile));

voici le résultat:

Code :

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

1
2
3
4
5
6
111 event 
connexion.component.ts:23 File*{name: "bombonne.jpg", lastModified: 1564679643000, lastModifiedDate: Thu Aug 01 2019 19:14:03 GMT+0200 (heure d’été d’Europe centrale), webkitRelativePath: "", size: 4154484,*…}
connexion.component.ts:24 222 target 0  
connexion.component.ts:26 File*{name: "bombonne.jpg", lastModified: 1564679643000, lastModifiedDate: Thu Aug 01 2019 19:14:03 GMT+0200 (heure d’été d’Europe centrale), webkitRelativePath: "", size: 4154484,*…}
connexion.component.ts:30 ==>[object File]
connexion.component.ts:31 ==>{}

à la ligne 31 mon objet est vide:

Code :

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

connexion.component.ts:31 ==>{}

je ne comprend pas pourquoi il n'y a rien dedans ?
merci d'avance pour la réponse

[NoSmoking]

Bonjour,
on ne peut pas « stringifier » un objet File, certaines autres méthodes ne fonctionnent d'ailleurs pas mieux

Code :

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

1
2
3
4
5
6
const o = event.target.files[0];
console.log("JSON.stringify(o) :", JSON.stringify(o));      // >> {}
console.log("Object.assign({}, o)", Object.assign({}, o));  // >> {}
console.log("{ ...o } :", { ...o});                         // >> {}
console.log("Object.keys(o) :", Object.keys(o));            // >> []
console.log("Object.entries(o) :", Object.entries(o));      // >> []

Un façon de lire reste la bonne vielle boucle for(..in..) :

Code :

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

1
2
3
for (let key in o) {
  console.log(`${key} : ${o[key]}`);
}

La question qui demeure est pourquoi veux tu « stringifier » l'objet File ?

[keokaz]

merci de ta réponse ,
je pense que je me trompe, je condidère JSON.stringify comme une sérialialization, mais ce n'est pas la même chose .
et puis j'ai fait une autre erreur, pour simplifier mon test je met l'attribut et je met une concatenation "+", du coup tout les console log son fausse puisque quand je regarde dans l'objet il est vide.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  onFileSelected(event){
 
    console.log(event.target.files[0]);   
    this.selectedFile = event.target.files[0];
    console.log("onFileSelected(event) ==>"); 
    console.log(this.selectedFile); 
    console.log("onFileSelected(event) ==>"+this.selectedFile); 
  }
 
  onUpload(){
    console.log("onUpload()"); 
    console.log(this.selectedFile); 
    console.log(this.selectedFile.name);

Code :

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

1
2
3
4
5
6
7
8
 
File*{name: "bombonne.jpg", lastModified: 1564679643000, lastModifiedDate: Thu Aug 01 2019 19:14:03 GMT+0200 (heure d’été d’Europe centrale), webkitRelativePath: "", size: 4154484,*…}
connexion.component.ts:25 onFileSelected(event) ==>
connexion.component.ts:26 File*{name: "bombonne.jpg", lastModified: 1564679643000, lastModifiedDate: Thu Aug 01 2019 19:14:03 GMT+0200 (heure d’été d’Europe centrale), webkitRelativePath: "", size: 4154484,*…}
connexion.component.ts:27 onFileSelected(event) ==>[object File]
connexion.component.ts:31 onUpload()
connexion.component.ts:32 File*{name: "bombonne.jpg", lastModified: 1564679643000, lastModifiedDate: Thu Aug 01 2019 19:14:03 GMT+0200 (heure d’été d’Europe centrale), webkitRelativePath: "", size: 4154484,*…}
connexion.component.ts:33 bombonne.jpg

this.selectedFile sera toujours vide dès que j'utilise

Code :

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

1
2
 
    console.log("onFileSelected(event) ==>"+this.selectedFile);

j'utilise mal la console.log, je peux maintenant récupérer mon objet.