import * as React from 'react' ; import { IUploadFilePickerTabProps } from './IUploadFilePickerTabProps' ; import { IUploadFilePickerTabState } from './IUploadFilePickerTabState' ; import { IFilePickerResult } from '../FilePicker.types' ; import { GeneralHelper } from '../../../common/utilities/GeneralHelper' ; import { PrimaryButton , DefaultButton } from 'office-ui-fabric-react/lib/components/Button' ; import { css } from 'office-ui-fabric-react/lib/Utilities' ; import * as strings from 'ControlStrings' ; import styles from './UploadFilePickerTab.module.scss' ; export default class UploadFilePickerTab extends React . Component < IUploadFilePickerTabProps , IUploadFilePickerTabState > { constructor ( props ) { super ( props ) ; this . state = { filePickerResult : undefined } ; } public render ( ) { const { filePickerResult , filePreview } = this . state ; const fileName = filePickerResult ? filePickerResult . fileName : null ; const acceptedFilesExtensions = this . props . accepts ? this . props . accepts . join ( "," ) : null ; return ( < div className = { styles . tabContainer } > < div className = { styles . tabHeaderContainer } > < h2 className = { styles . tabHeader } > { strings . UploadFileHeader } < /h2> < /div> < div className = { css ( styles . tab , styles . tabOffset ) } > < input className = { styles . localTabInput } type = "file" id = "fileInput" accept = { acceptedFilesExtensions } multiple = { false } onChange = { ( event ) => this . _handleFileUpload ( event ) } /> { fileName && filePreview && < div className = { styles . localTabSinglePreview } > < img className = { styles . localTabSinglePreviewImage } src = { filePreview } alt = { filePickerResult . fileName } / > < span > { fileName } < /span> < /div>} < div > < label className = { styles . localTabFilename } > { ( ! filePreview && fileName ? fileName : "" ) } < /label> < /div> < label className = { styles . localTabLabel } htmlFor = "fileInput" > { ( fileName ? strings . ChangeFileLinkLabel : strings . ChooseFileLinkLabel ) } < /label> { this . props . renderCustomUploadTabContent && this . props . renderCustomUploadTabContent ( this . state . filePickerResult ) } < /div> < div className = { styles . actionButtonsContainer } > < div className = { styles . actionButtons } > < PrimaryButton disabled = { ! filePickerResult } onClick = { ( ) => this . _handleSave ( ) } className = { styles . actionButton } > { strings . AddFileButtonLabel } < /PrimaryButton> < DefaultButton onClick = { ( ) => this . _handleClose ( ) } className = { styles . actionButton } > { strings . CancelButtonLabel } < /DefaultButton> < /div> < /div> < /div>); } private _loadPreiview = ( file ) : Promise < string | undefined > => { return new Promise < string | undefined > ( resolve => { if ( ! GeneralHelper . isImage ( file . name ) ) { resolve ( undefined ) ; return ; } const reader = new FileReader ( ) ; reader . readAsDataURL ( file ) ; reader . onload = ( ) => { resolve ( reader . result as string ) ; } ; } ) ; } ; private _handleFileUpload = async ( event ) => { if ( ! event . target . files || event . target . files . length < 1 ) { return ; } let files = event . target . files ; const file = files [ 0 ] ; const filePickerResult = { fileAbsoluteUrl : null , fileName : file . name , fileSize : file . size , fileNameWithoutExtension : GeneralHelper . getFileNameWithoutExtension ( file . name ) , downloadFileContent : ( ) => { return Promise . resolve ( file ) ; } } ; if ( GeneralHelper . isImage ( file . name ) ) { filePickerResult . previewDataUrl = await this . _loadPreiview ( file ) ; } this . setState ( { filePickerResult , filePreview : filePickerResult . previewDataUrl } ) ; this . props . onChange ( [ filePickerResult ] ) ; } ; private _handleSave = ( ) => { this . props . onSave ( [ this . state . filePickerResult ] ) ; } ; private _handleClose = ( ) => { this . props . onClose ( ) ; } ; }