Discussion :

[keokaz]

Bonjour, je test un tuto pour téléverser des images avec le déposer glisser:

Code :

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

1
2
 
https://medium.com/@mariemchabeni/angular-7-drag-and-drop-simple-file-uploadin-in-less-than-5-minutes-d57eb010c0dc

Je souhaite ajouter une miniature pour chaque image uploadé.
Voici ce que j'ai testé :

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
 
<div class="uploadfilecontainer" (click)="fileInput.click()" appDragDrop (onFileDropped)="uploadFile($event)">
  <input hidden type="file" #fileInput (change)="uploadFile($event.target.files)">
</div>
 
<div class="files-list" *ngFor="let file of fileData;let i= index">
  <p> {{ file }} </p>
  <button class="delete-file" (click)="deleteAttachment(i)">
      <div *ngIf="previewUrl">
          <img [src]="previewUrl" height="100" width="100"/>    
          <mat-icone>delete</mat-icone>
      </div>
 
  </button>
</div>

voici mon composant:

Code javascript :

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
33
34
35
36
37
38
39
 
export class FormUpldComponent{
  fileData: any = [];
  previewUrl: any = null;
  uploadFile(event) {
 
    for (let index = 0; index < event.length; index++) {
      const element = event[index];
      this.fileData.push([element.name,this.preview(element)]);
      console.log(this.fileData);
     // this.preview.push(this.preview(element));
 
    }  
  }
 
  preview(element) {
    console.log("preview ....");
    // Show preview 
    var mimeType = element.type;
  //  console.log(mimeType);return null;
    if (mimeType.match(/image\/*/) == null) {
      return;
    }
 
    var reader = new FileReader();
    reader.readAsDataURL(element);
    reader.onload = (_event) => {
     // console.log(reader.result);return null;
      this.previewUrl = reader.result;
    }
 
    return this.previewUrl;
  }
 
 
  deleteAttachment(index) {
    this.fileData.splice(index, 1)
  }
}

Dans ma fonction preview j'ai testé si j'ai pu récupérer la miniature :

Code :

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

1
2
3
4
5
6
7
 
    var reader = new FileReader();
    reader.readAsDataURL(element);
    reader.onload = (_event) => {
     // console.log(reader.result);return null;
      this.previewUrl = reader.result;
    }

j'ai bien ceci :



Comme j'ai bien reçu mon image encodé, je l'ai enregistrer dans un tableau:

Code javascript :

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

1
2
 
      this.fileData.push([element.name,this.preview(element)]);

Par contre lors de mes testes, je return cette donnée encodé mais je me retrouve avec null:

Code javascript :

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
 
  preview(element) {
    console.log("preview ....");
    // Show preview 
    var mimeType = element.type;
  //  console.log(mimeType);return null;
    if (mimeType.match(/image\/*/) == null) {
      return;
    }
 
    var reader = new FileReader();
    reader.readAsDataURL(element);
    reader.onload = (_event) => {
     // console.log(reader.result);return null;
      this.previewUrl = reader.result;
    }
 
    return this.previewUrl;
  }

voici mon test à l'appel de uploadfile:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
  uploadFile(event) {
 
    for (let index = 0; index < event.length; index++) {
      const element = event[index];
      this.fileData.push([element.name,this.preview(element)]);
      console.log(this.fileData);
     // this.preview.push(this.preview(element));
 
    }  
  }

le fileData est à null

Code :

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

1
2
3
4
5
6
7
 
preview ....
form-upld.component.ts:22 
[Array(2)]
0: (2) ["resultat_article.JPG", null]
length: 1
__proto__: Array(0)

comment je dois faire afin que cette valeur ne soit pas null et obtenir la miniature de l'image ?

merci d'avances pour les réponses