import * as React from "react" ; import { observer } from "mobx-react" ; import { Messages } from "../../services/Messages" ; import { UploadState } from "./UploadState" ; import * as firebase from "firebase/app" ; import "firebase/storage" ; /**
 * Sample Upload / download / delete
   */ declare const window ; const uploadFolder = "shakeout-tests" ; @ observer export default class Upload extends React . Component < { } , { } > { constructor ( props ) { super ( props ) ; this . getImages ( ) ; } param folder param uploads private uploadFiles ( folder , uploads ) { return Promise . all ( Array . from ( uploads ) . map ( file => this . uploadFile ( folder , file ) ) ) ; } param folder param file private uploadFile ( folder , file ) { return new Promise ( ( resolve , reject ) => { const folderRef = firebase . app ( ) . storage ( ) . ref ( folder ) ; const fileRef = folderRef . child ( file . name ) ; const uploadTask = fileRef . put ( file ) ; uploadTask . on ( firebase . storage . TaskEvent . STATE_CHANGED , null , reject , resolve ) ; } ) ; } private async getFiles ( ) { UploadState . urls . splice ( 0 , UploadState . urls . length ) ; return await firebase . app ( ) . storage ( ) . ref ( uploadFolder ) . listAll ( ) ; } private async deleteImages ( ) { this . getFiles ( ) . then ( result => result . items . forEach ( async ( item ) => await item . delete ( ) ) ) ; } private async getImages ( ) { this . getFiles ( ) . then ( result => result . items . forEach ( item => item . getDownloadURL ( ) . then ( url => UploadState . urls . push ( url ) ) ) ) ; } private onUploadButtonClicked ( evt ) { if ( window . File && window . FileReader && window . FileList && window . Blob ) { const files = evt . target . files ; this . uploadFiles ( uploadFolder , files ) . then ( this . getImages . bind ( this ) ) ; } } render ( ) { return ( < div > < strong > { Messages . get ( "shakeout-test-upload" ) } < /strong> < ul > < li > < input onChange = { this . onUploadButtonClicked . bind ( this ) } type = "file" id = "avatar" name = "avatar" accept = "image/png, image/jpeg, image/gif, image/bmp" / > < /li> < li > < button onClick = { this . deleteImages . bind ( this ) } > { Messages . get ( "shakeout-test-delete" ) } < /button></li > { UploadState . imageUrls . map ( url => < li key = { url } > < img key = { url } height = "50px" width = "50px" src = { url } / > < /li>)} < /ul> < /div>); } }