Discussion :

[flamant]

Bonjour,
j'ai une simple question javascript

j'affiche tour à tour les objets suivants

1) data
2) data.files
3) data.length (-> 0)
4) data.files[0] (-> undefined)



je n'arrive pas à comprendre pourquoi data.files[0] est undefined

[flamant]

J'avais oublié de preciser un détail qui permet de résoudre le problème


Voici comment j'alimente data

Code html :

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

    <div style="position: relative;" class="uploadfilecontainer" (click)="fileInput.click()" appDragDrop (onFileDropped)="uploadFile($event)">

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
      uploadFile(events: any) {
        let data = [];
        let i = 0;
        for (const event of events) {
           var reader = new FileReader();
           reader.onload = (event: any) => {
               data.push(event.target.result);
           }
           reader.readAsDataURL(event);
 
          i++;
        }
      }

et j'ai eu la réponse :
reader.readAsDataURL(event); est asynchrone.
Du coup j'essaye de lire d'une manière synchrone avec FileReaderSync
Mais je n'arrive pas à l'importer avec Angular 8.
J'ai trouvé un post pour l'importer avec Angular 2 (https://stackoverflow.com/questions/...nc-in-angular2), mais pas avec Angular 8

[flamant]

J'ai j'ai finalement pas réussi à importer FileReaderSync

Code :

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

1
2
3
 
  let reader = new FileReaderSync();
  data.push(reader.readAsDataURL(event));

[flamant]

Bonjour, j'essaie d'importer FileReaderSync pour l'utiliser dans une application angular 8

voici un printscreen de l'endroit où je l'importe



voici le contenu de index.d.ts

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
interface FileReaderSync {
  readAsArrayBuffer(blob: Blob): any;
  readAsBinaryString(blob: Blob): void;
  readAsDataURL(blob: Blob): string;
  readAsText(blob: Blob, encoding?: string): string;
}
 
declare var FileReaderSync: {
  prototype: FileReaderSync;
  new(): FileReaderSync;
};

Mais ça ne marche pas

[krakatoa]

https://stackblitz.com/edit/angular-...p.component.ts

[flamant]

Bonjour Krakatoa, merci pour ta réponse mais ça ne résout pas mon problème

[dukoid]

pourtant l'exemple de kratoa fonctionne avec: let reader = new FileReader();
alors pourquoi s'entêter avec FileReaderSync ?



sinon essaye:

tsconfig.json

Code :

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

1
2
3
4
5
6
7
8
 
 
  "compilerOptions": {
...
...
    "typeRoots": [
      "node_modules/@types"
    ],

[flamant]

Bonjour Dukoi et Krakatoa

si vous lisez tous les messages, vous comprendrez ce que je veux faire. Pourriez vous m'aider. Je suis bloqué

[dukoid]

tout est là:

https://stackblitz.com/edit/angular-...p.component.ts



tu peux créer sur stackblitz en mode public ton test
et nous filer le lien qu'on regarde

[flamant]

bonjour Dukoid,

voici le lien vers stackblitz :

https://stackblitz.com/edit/angular-...p.component.ts

Je n'arrive pas à importer FileReader et console.log : comment faire

Mon objectif final, après est d'importer FileReadersync

[dukoid]

on s'en fout de FileReadersync... ça ne fonctionne pas, point barre
FileReader fonctionne...


l'objectif c'est quoi ? la fonctionnalité ?

récupérer une image , un pdf...
et pour en faire quoi


je m'en fou de FileReadersync, je ne veux plus en entendre parler

[flamant]

Bonjour, je reprend tout depuis le début

je veux faire un drag and drop de fichiers avec le code html suivant

Code html :

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

<div style="position: relative;" class="uploadfilecontainer" (click)="fileInput.click()" appDragDrop (onFileDropped)="uploadFile($event)">

je gère cela de la façon suivante

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
      uploadFile(events: any) {
        let data = [];
        let i = 0;
        for (const event of events) {
           var reader = new FileReader();
           reader.onload = (event: any) => {
               data.push(event.target.result);
           }
           reader.readAsDataURL(event);
 
          i++;
        }
      }

Plus tard, quand je veux récupérer l'élément data[0], j'obtiens undefined

[dukoid]

je vois que ça fonctionne à peu prêt


j'ai re ecris le code
j'ai viré ce qui ne servait à rien

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
20
21
22
23
24
25
26
27
28
 
import { Component } from "@angular/core";
 
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
 
  public imageFile: any;
  filesToCropp = [];
  reader = new FileReader();
 
  uploadFile(events: any) {
    let that = this;
    for (const event of events) {
      that.reader.onload = (event: any) => {
        that.filesToCropp.push(event.target.result);
      };
      that.reader.readAsDataURL(event);
    }
    this.reader.onloadend = (event: any) => {
      console.log(that.filesToCropp);      // filesToCropp  contient un tableau (en base64) avec tous les fichiers que l'on a sélectionnés 
    };
  }
}

et donc on obtient bien:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAtAC0AAD/4gVYSUNDX1BST0...................................

qui est la base 64 de l'image !
tout fichier est transformé en base64 pour le manipuler dans le code !

fichier -> en base 64
base64 -> en fichier

*** pour du drag n drop
inutile de re inventer la roue, il existe des packages qui le fait très bien


https://www.npmjs.com/package/ngx-file-drop
et sa démo: https://georgipeltekov.github.io/

[flamant]

Bonjour Dukoid, Merci pour ta réponse et ta patience

la partie qui me manquait était

Code :

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

1
2
3
4
 
this.reader.onloadend = (event: any) => {
      console.log(that.filesToCropp);      // filesToCropp  contient un tableau (en base64) avec tous les fichiers que l'on a sélectionnés 
    };

C'est résolu. Merci encore parce que ça fait longtemps que je n'arrivait pas à résoudre ce problème