Как сделать постоянное приложение ionic 4, использующее загрузчик ng2-file-upload? - PullRequest
Новая
       41

Как сделать постоянное приложение ionic 4, использующее загрузчик ng2-file-upload?

0 голосов
/ 25 сентября 2019

Я пытаюсь выполнить загрузку файла ng2 в автономном режиме.Ваш пользователь должен иметь возможность добавлять файлы и покидать страницу в приложении ionic 4, а затем, когда он снова открывает страницу, он может видеть файлы в списке загрузки с последнего посещения.В идеале он сможет закрыть приложение и при перезагрузке увидеть файлы в списке загрузки.Я открыт для использования файловой системы, но не уверен, как мне этого добиться.

.html 

<div class="file-input-container">
  <br>
  <label>
    <input type="file" ng2FileSelect [uploader]="uploader" multiple />
    Add Photos or Files
  </label>
</div>
<br>
  <ion-list>
    <ion-list-header>
      <ion-label>Files: {{ uploader?.queue?.length }}</ion-label>
    </ion-list-header>
      <ion-item *ngFor="let item of uploader.queue">
        <ion-label>{{ item?.file?.name }}</ion-label>
        <ion-button fill="outline" color="danger" slot="end" (click)="item.remove()">Delete</ion-button>
      </ion-item>
  </ion-list>

.ts 

import { Component } from '@angular/core';
import { FileUploader, FileLikeObject } from 'ng2-file-upload';

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

  public uploader: FileUploader = new FileUploader({});
  public hasBaseDropZoneOver: boolean = false;

  constructor() { 

  }

  getFiles(): FileLikeObject[] {
    return this.uploader.queue.map((fileItem) => {
      return fileItem.file;
    });
  }

  fileOverBase(ev): void {
    this.hasBaseDropZoneOver = ev;
  }

  reorderFiles(reorderEvent: CustomEvent): void {
    let element = this.uploader.queue.splice(reorderEvent.detail.from, 1)[0];
    this.uploader.queue.splice(reorderEvent.detail.to, 0, element);
  }
}
...