import React , { useState } from 'react' ; import Path from 'path' ; import uploadFileToBlob , { isStorageConfigured } from './azure-storage-blob' ; const storageConfigured = isStorageConfigured ( ) ; const App = ( ) : JSX . Element => { const [ blobList , setBlobList ] = useState < string [ ] > ( [ ] ) ; const [ fileSelected , setFileSelected ] = useState ( null ) ; const [ uploading , setUploading ] = useState ( false ) ; const [ inputKey , setInputKey ] = useState ( Math . random ( ) . toString ( 36 ) ) ; const onFileChange = ( event ) => { setFileSelected ( event . target . files [ 0 ] ) ; } ; const onFileUpload = async ( ) => { setUploading ( true ) ; const blobsInContainer = await uploadFileToBlob ( fileSelected ) ; setBlobList ( blobsInContainer ) ; setFileSelected ( null ) ; setUploading ( false ) ; setInputKey ( Math . random ( ) . toString ( 36 ) ) ; } ; const DisplayForm = ( ) => ( < div > < input type = "file" onChange = { onFileChange } key = { inputKey || '' } /> < button type = "submit" onClick = { onFileUpload } > Upload ! < /button> < /div>); const DisplayImagesFromContainer = ( ) => ( < div > < h2 > Container items < /h2> < ul > { blobList . map ( ( item ) => { return ( < li key = { item } > < div > { Path . basename ( item ) } < br / > < img src = { item } alt = { item } height = "200" / > < /div> < /li>); } ) } < /ul> < /div>); return ( < div > < h1 > Upload file to Azure Blob Storage < /h1> { storageConfigured && ! uploading && DisplayForm ( ) } { storageConfigured && uploading && < div > Uploading < /div>} < hr / > { storageConfigured && blobList . length > 0 && DisplayImagesFromContainer ( ) } { ! storageConfigured && < div > Storage is not configured . < /div>} < /div>); } ; export default App ;