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

[krakatoa]

technique de sioux, avec des console.log partout , ça donne quoi ?

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

bonne pratique, savoir utiliser var, let et const
(var est à éviter tant que faire ce peut)

[keokaz]

merci, c'est la facilité du copier coller pour le var ...
ça marche un peu mieux mais il faut je trouve pourquoi la deuxième image ne s'affiche pas ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
DragDropDirective.ts:15 over ...
form-upld.component.ts:29 preview ....
form-upld.component.ts:32 image/jpeg
form-upld.component.ts:44 return this.previewUrl=null
form-upld.component.ts:22 [Array(2)]
form-upld.component.ts:41 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4RDaRXhpZgAATU0AKgAAAAgABAE7AAIAAAAFAAAISodpAAQAAAABAAAIUJydAAEAAAAKAAAQyOocAAcAAAgMAAAAPgAAAAAc6gAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA ....
 
25DragDropDirective.ts:15 over ...
form-upld.component.ts:29 preview ....
form-upld.component.ts:32 image/jpeg
form-upld.component.ts:44 return this.previewUrl=data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4RDaRXhpZgAATU0AKgAAAAgABAE7AAIAAAA

je vais refaire le code , il faut que je récupère d'abord le miniature du callback et je charge la liste des uploads ...
edit :
je viens de comprendre pourquoi lors d'un dépot puis un autre dépot , cela bug, c'est à dire qu'il n'affiche pas de miniature sur le deuxième téléversement,
si on sélectionne par la touche ALT pour prendre directement 2 images et on les glisses, cela fonctionne (mais pour le moment les miniatures sont les mêmes).
si je drop une à une les images, la deuxième ligne on ne charge pas la miniature .