TypeScript storage.AngularFireStorage類代碼示例

    async startUpload(event: FileList) {

        const file = event.item(0);

        // Client-side validation: Must be an image and smaller than 10MB.
        if (file.type.split('/')[0] !== 'image') {
            return this.snackBar.open('Unsupported File Type', '', { duration: 3000, panelClass: 'snackbar-error' });
        }
        // Must be smaller than 20MB, http://www.unitconversion.org/data-storage/megabytes-to-bytes-conversion.html
        if (file.size > 10485760) {
            return this.snackBar.open('Images must be smaller than 10MB', '', { duration: 5000, panelClass: 'snackbar-error' });
        }

        const dictionary = await this.dictionariesService.getDictionary();

        // Replace spaces w/ underscores in dict name, remove special characters from lexeme so image converter can accept filename
        const _dictName = dictionary.name.replace(/\s+/g, '_');
        const _lexeme = this.entry.lx.replace(/[^a-z0-9+]+/gi, '_');
        const fileTypeSuffix = file.name.match(/\.[0-9a-z]+$/i)[0];

        const path = `images/${_dictName}_${dictionary.id}/${_lexeme}_${this.entry.id}_${new Date().getTime()}${fileTypeSuffix}`;

        // optional metadata
        const { displayName, uid } = await this.auth.getUser();
        const customMetadata = { uploadedBy: displayName };

        this.task = this.storage.upload(path, file, { customMetadata });
        this.percentage = this.task.percentageChanges();
        this.task.then(snap => {
            if (snap.state === 'success') { this.savePhoto(path, displayName, uid, this.entry.lx, dictionary.id); }
        }).catch(() => {
            this.snackBar.open('Image Upload Failed', '', { duration: 3000, panelClass: 'snackbar-error' });
        });
    }

  onImageChange(event:any) {
    const image = event.target.files[0];
    const uploader = document.getElementById('uploader') as HTMLInputElement;
    const storageRef = this.storage.ref('images/' + Date.now() + image.name);
    const task = storageRef.put(image);

    task.snapshotChanges().subscribe((snapshot) => {
        document.getElementById('buttonFile').style.visibility = 'hidden';
        document.getElementById('uploader').style.visibility = 'visible';

        const percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        uploader.value = percentage.toString();
      },
      (err:any) => {
        document.getElementById('buttonFile').style.visibility = 'visible';
        document.getElementById('uploader').style.visibility = 'hidden';
        uploader.value = '0';
      },
      () => {
        uploader.value = '0';
        document.getElementById('buttonFile').style.visibility = 'visible';
        document.getElementById('uploader').style.visibility = 'hidden';
        this.draftMessage = task.task.snapshot.ref.name.substring(0, 13);
        this.draftImage = task.task.snapshot.ref.name.substring(0, 13);
        storageRef.getDownloadURL().subscribe(url => {
          this.draftImageDownloadURL = url;
          this.addMessage();
          event.target.value = '';
        });
      });
  }

  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().pipe(
      tap(snap => {
        if (snap.bytesTransferred === snap.totalBytes) {
          // Update firestore on completion
          this.db.collection('photos').add({ path, size: snap.totalBytes });
        }
      }),
      finalize(() => this.downloadURL = this.storage.ref(path).getDownloadURL() )
    );


    // The file's download URL
  }

  async uploadImage(file) {
   const filePath = Date.now() + '.jpg';
   const ref = this.storage.ref('upload').child(filePath);
   const image = await ref.putString(file, 'data_url', {
     contentType: 'image/jpg'
   });
   const url = await this.getImageUrl(image);
   return url;
 }

 it('should resolve the task as a promise', (done) => {
   const data = { angular: "promise" };
   const blob = new Blob([JSON.stringify(data)], { type : 'application/json' });
   const ref = afStorage.ref('af.json');
   const task: AngularFireUploadTask = ref.put(blob);
   task.then(snap => { 
     expect(snap).toBeDefined(); 
     done();
   }).catch(done.fail);
 });