Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Pourquoi mon objet file est-il vide ?


Sujet :

Angular

  1. #1
    Membre confirmé
    Pourquoi mon objet file est-il vide ?
    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

  2. #2
    Modérateur

    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 ?

  3. #3
    Membre confirmé
    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.

###raw>template_hook.ano_emploi###