1 pièce(s) jointe(s)
Ajouter des miniatures dans une liste téléversé
Bonjour, je test un tuto pour téléverser des images avec le déposer glisser:
Code:
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:
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:
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:
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 :
Pièce jointe 537535
Comme j'ai bien reçu mon image encodé, je l'ai enregistrer dans un tableau:
Code:
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:
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:
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:
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 :)
