Как загрузить массив файлов, используя AngularFire2 и Firebase Storage? - PullRequest
Новая
       8

Как загрузить массив файлов, используя AngularFire2 и Firebase Storage?

0 голосов
/ 04 сентября 2018

Я изо всех сил пытался найти ответ на этот вопрос. Большинство примеров, в том числе документы AngularFire2 и отличный учебник angularfirebase.com , посвящены загрузке только одного файла за раз. Я хочу создать фотогалерею cms, чтобы этот вариант был неэффективным, если не сказать больше ...

На мой первоначальный вопрос я получил один ответ от Леона Рэдли, и спасибо за это, он помог переосмыслить подход.

Тем не менее, решение не было оптимальным для меня. Я решил ответить на свой вопрос, чтобы он кому-то помог, или даже лучше, кто-нибудь предложил бы лучшее решение.

Я буду обновлять свой ответ, так как я придумаю больше функциональности. Я просто переписываю решение, предоставленное angularfirebase.com , чтобы использовать массив файлов.

Обратите внимание, что используются пользовательское событие удаления и директива FileList, более подробную информацию см. В источнике

Оригинальное решение:

файл-upload.component.ts 

import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.scss']
})
export class FileUploadComponent {

  // Main task 
  task: AngularFireUploadTask;

  // Progress monitoring
  percentage: Observable<number>;

  snapshot: Observable<any>;

  // Download URL
  downloadURL: Observable<string>;

  // State for dropzone CSS toggling
  isHovering: boolean;

  constructor(private storage: AngularFireStorage, private db: AngularFirestore) { }


  toggleHover(event: boolean) {
    this.isHovering = event;
  }


  startUpload(event: FileList) {
    // The File object
    const file = event.item(0)

    // Client-side validation example
    if (file.type.split('/')[0] !== 'image') { 
      console.error('unsupported file type :( ')
      return;
    }

    // The storage path
    const path = `test/${new Date().getTime()}_${file.name}`;

    // Totally optional metadata
    const customMetadata = { app: 'My AngularFire-powered PWA!' };

    // The main task
    this.task = this.storage.upload(path, file, { customMetadata })

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

    // The file's download URL
    this.downloadURL = this.task.downloadURL(); 
  }

  // Determines if the upload task is active
  isActive(snapshot) {
    return snapshot.state === 'running' && snapshot.bytesTransferred < snapshot.totalBytes
  }

}

файл-upload.component.html 

<div class="dropzone" 
     dropZone
     (hovered)="toggleHover($event)"
     (dropped)="startUpload($event)"
     [class.hovering]="isHovering">



     <h3>AngularFire Drop Zone</h3>

     <div class="file">
        <label class="file-label">


        <input class="file-input" type="file" (change)="startUpload($event.target.files)">


          <span class="file-cta">
            <span class="file-icon">
              <i class="fa fa-upload"></i>
            </span>
            <span class="file-label">
              or choose a file…
            </span>
          </span>
        </label>
      </div>
</div>

<div *ngIf="percentage | async as pct">

  <progress class="progress is-info" 
            [value]="pct" 
            max="100">        
  </progress>

  {{ pct | number }}%

</div>


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

  <div *ngIf="downloadURL | async as url">
    <h3>Results!</h3>
    <img [src]="url"><br>
    <a [href]="url" target="_blank" rel="noopener">Download Me!</a>
  </div> 

  <button (click)="task.pause()" class="button is-warning" [disabled]="!isActive(snap)">Pause</button>
  <button (click)="task.cancel()" class="button is-danger" [disabled]="!isActive(snap)">Cancel</button>
  <button (click)="task.resume()" class="button is-info"   [disabled]="!(snap?.state === 'paused')">Resume</button>

</div>

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Пока мне удалось воспроизвести следующую функциональность:

  • загрузить
  • снимков (bytesTransferred / totalBytes)
  • прогрессирует

файл-upload.component.ts 

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.scss'],
})
export class FileUploadComponent {
  tasks$: Observable<any>
  progresses$: any
  snapshots$: any
  isHovering: boolean

  constructor(
    private storage: AngularFireStorage,
    private db: AngularFirestore,
  ) {}

  toggleHover(event: boolean) {
    this.isHovering = event
  }

  startUpload(event: HTMLInputEvent) {
    this.tasks$ = from([Array.from(event.target.files)]).pipe(
      map(files =>
        files.map(file => {
          const path = `test/${new Date().getTime()}_${file.name}`
          const customMetadata = { app: 'My AngularFire-powered PWA!' }

          return this.storage.upload(path, file, { customMetadata })
        }),
      ),
    )

    this.snapshots$ = this.tasks$.pipe(
      map(files =>
        files.map(file =>
          file.snapshotChanges(),
        ),

      )
    )

    this.progresses$ = this.tasks$.pipe(
      map(files =>
        files.map(file =>
          file.percentageChanges()
        ),
      )
    )
  }
}

Файл-upload.component.html 

<div class="dropzone"
     appDropZone
     (hovered)="toggleHover($event)"
     (dropped)="startUpload($event)"
     [class.hovering]="isHovering">


  <h3>AngularFire Drop Zone</h3>

  <div class="file">
    <label class="file-label">


      <input class="file-input" type="file" (change)="startUpload($event)"
             multiple>


      <span class="file-cta">
            <span class="file-icon">
              <i class="fa fa-upload"></i>
            </span>
            <span class="file-label">
              or choose a file…
            </span>
          </span>
    </label>
  </div>
</div>


<div>
  <ul>
    <li *ngFor="let progress of progresses$ | async">
      <progress
        class="progress is-info"
        [value]="progress | async"
        max="100">
      </progress>
      {{progress | async | number }}%
    </li>
  </ul>

</div>

<div>
  <ul>
    <li *ngFor="let snap of snapshots$ | async">
      <p *ngIf="snap | async">
        {{ (snap | async)?.bytesTransferred | fileSize }} of
        {{ (snap | async)?.totalBytes | fileSize }}
      </p>
    </li>
  </ul>
</div>
0 голосов
/ 05 сентября 2018

Я только что построил что-то вроде этого:)

Я сохранил в процентах наблюдаемые значения процентовChanges () и перебрал их в шаблоне 

<div class="tasks">
  <mat-progress-bar
    class="mt-2"
    *ngFor="let progress$ of progressObservables"
    mode="determinate"
    [value]="progress$ | async"
  ></mat-progress-bar>
</div>

Затем я использовал функцию Promise.all, чтобы дождаться их всех и закрыть диалог. Поскольку все наблюдаемые также являются Обещаниями, это прекрасно работает. 

this.tasks: AngularFireUploadTask[] = ...;
this.progressObservables = this.tasks.map(t => t.percentageChanges());
Promise.all(this.tasks).then(() => this.dialogRef.close());
...