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