CODEWITHSUNDEEP
angularfirebasefile-uploadfirebase-storageangularfire2
Vueer
Vueer

Reputation: 1512

Show different progress bars for multiple image upload with AngularFireStorage

I followed this tutorial to build an image upload function with dropZone in my Angular4 App: Firebase Storage With AngularFire - DropZone File Uploader

It´s working very well with single upload. But I need a multiple upload function. So I changed my code into this:

Component

startUpload(event: FileList) {

 Array.from(event).forEach(file => {
   if (file.type.split('/')[0] != 'image') {
     alert('Dieses Dateiformat wird nicht unterstützt');
   }

   // Storage path
   const path = `uploads/${this.currentUserEmail}_${file.name}`;

   // Meta Data
   const customMetadata = {
     auction: 'test'
   }

   // Main Task
   this.task = this.storage.upload(path, file, {customMetadata});

   // Progress Monitoring
   this.percentage = this.task.percentageChanges();
   this.snapshot = this.task.snapshotChanges();

   // File Download Url
   this.downloadURL = this.task.downloadURL();
 })
}

Frontend

<div class="dropzone" dropZone (hovered)="toggleHover($event)" (dropped)="startUpload($event)" [class.hovering]="isHovering">
    <h3>Upload</h3>
    <p>Ziehe Deine Fotos via Drag & Drop in die rechteckige Fläche oder klick auf "Datei auswählen"</p>
    <div class="file">
      <input multiple="multiple" class="file-input" type="file" (change)="startUpload($event.target.files)">
    </div>

    <div *ngIf="percentage | async as pct">
      <progress [value]="pct" max="100"></progress>
    </div>

    <div *ngIf="(snapshot | async) as snap">
      {{ snap.bytesTransferred | fileSize }} of {{ snap.totalBytes | fileSize }}
    </div>

  </div>

  <ul class="list-group">
    <div *ngIf="downloadURL | async">
      <h3>Results</h3>
      <li class="list-group-item">
        <img [src]="u" alt="Bild" height="100">
      </li>
    </div>
  </ul>

The function startUpload writes all images properly in storage, but in frontend I don´t know to show separated progress bars for all images or separated results for properly uploaded images. It shows only informations about the last image.

How can I write the code to show multiple progress bars for different images for example?

What I tried

Thinks like this:

<div *ngFor="let pct of percentage | async">
 <progress [value]="pct" max="100"></progress>
</div>

....but without success.... any ideas?

Upvotes: 1

Views: 836

Answers (1)

artask
artask

Reputation: 439

You can create an array of all dropped files like this:

startUpload(event: FileList) {

 Array.from(event).forEach(file => {
   if (file.type.split('/')[0] != 'image') {
     alert('Dieses Dateiformat wird nicht unterstützt');
   }

   const path = `uploads/${this.currentUserEmail}_${file.name}`;
   const customMetadata = {
     auction: 'test'
   }
   const task = this.storage.upload(path, file, {customMetadata});
   const percentage = this.task.percentageChanges();
   const snapshot = this.task.snapshotChanges();
   const fileRef = this.storage.ref(path);
   const downloadURL = this.task.getDownloadURL();

   this.files.push({
      task: task,
      percentage: percentage,
      snapshot: snapshot,
      filename: filename,
      downloadURL: downloadURL
    });
 })
}

and then iterate through it on the front-end like this

<div *ngFor="let file of files">
  {{ file.filename }}
  <div *ngIf="file.percentage | async as pct">
    <progress class="progress is-info" 
              [value]="pct" 
              max="100">        
    </progress>
    {{ pct | number }}%
  </div>


  <div *ngIf="(file.snapshot | async) as snap">
    {{ snap.bytesTransferred | fileSize }} of {{ snap.totalBytes | fileSize }} 
  </div>

</div>

Upvotes: 0

Related Questions