Discussion :

[flamant]

Bonjour,
j'essaye de construire un tableau d'image base64 que je glisse dépose


Voici la partie html

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
16
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" style="margin-left: 28px;">
line 643    <div style="position: relative;" class="uploadfilecontainer" (click)="fileInput.click()" appDragDrop (onFileDropped)="uploadFile($event)">
			<input id="testId" hidden type="file" #fileInput (change)="uploadFile($event.target.files)">
			<label class="positionabsolute horizontal-vertical-center btn btn-success" style="text-align: center;padding: 0px 0px;">
				<input class="blackButtonWithBaseColorText"  value="Télécharger" type="button">
			</label>
		</div>
		<div>
			<div  class="files-list" *ngFor="let file of files;let i= index" >
				<p> {{ file.name }} </p>
				<button class="delete-file" (click)="deleteAttachment(i)">
					<img src="../../assets/images/Recycle_Bin_Full.png">
				</button>
			</div>
		</div>
</div>

Et voici la partie typescript

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
      filesToCropp = [];
      fileReader: FileReader = new FileReader();
 
      uploadFile(events: any) {
        let i = 0;
        let that = this;
        for (const event of events) {
          console.log(event);
          console.log('uploadFile');
          console.log('event.type='+event.type);      
 
          that.fileReader.onload = (event: any) => {
             that.filesToCropp.push(event.target.result);
          };
          that.fileReader.readAsDataURL(event);      
          i++;
          console.log('i='+i);
        }
        this.fileReader.onloadend = (event: any) => {
            console.log(that.filesToCropp);      // filesToCropp  contient un tableau (en base64) avec tous les fichiers que l'on a sélectionnés 
            this.openDialog(that.filesToCropp);
          }; 
      }

Mais, quand je glisse depose 3 images, j'ai le message d'erreur suivante

[krakatoa]

j'essaye de construire un tableau d'image base64 que je glisse dépose

[flamant]

Pardon, je me suis mal exprimé. Je glisse dépose des fichiers puis j'essaye de transformer ces fichiers en un tableau d'image base 64.

J'ai modifié le code en rajoutant that.fileReader = new FileReader(); dans la boucle

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
 
  filesToCropp = [];
  fileReader: FileReader = new FileReader();
 
  uploadFile(events: any) {
    let i = 0;
    let that = this;
    for (const event of events) {
      that.fileReader = new FileReader();
      console.log(event);
      console.log('uploadFile');
      console.log('event.type='+event.type);      
 
      that.fileReader.onload = (event: any) => {
         that.filesToCropp.push(event.target.result);
      };
      that.fileReader.readAsDataURL(event);      
      i++;
      console.log('i='+i);
    }
    this.fileReader.onloadend = (event: any) => {
        console.log(that.filesToCropp);      // filesToCropp  contient un tableau (en base64) avec tous les fichiers que l'on a sélectionnés 
        this.openDialog(that.filesToCropp);
      }; 
  }

avec ceci il n'y a plus d'erreur, mais je ne sais pas encore si cela rempli mes requirements, à savoir remplir un tableau avec mes 3 images base64

[dukoid]

est ce que tu peux mettre ça sur stackblitz stp parceque là