import * as React from 'react' ; import { IMultipleUploadFilePickerTabProps } from './IMultipleUploadFilePickerTabProps' ; import { IMultipleUploadFilePickerTabState } from './IMultipleUploadFilePickerTabState' ; 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 { DragDropFiles } from '../../dragDropFiles/DragDropFiles' ; import * as strings from 'ControlStrings' ; import styles from './MultipleUploadFilePickerTab.module.scss' ; export default class MultipleUploadFilePickerTab extends React . Component < IMultipleUploadFilePickerTabProps , IMultipleUploadFilePickerTabState > { constructor ( props ) { super ( props ) ; this . state = { filePickerResult : undefined } ; } private displayFileNames = ( filesResult ) => { const result = [ ] ; for ( var i = 0 ; i < filesResult . length ; i ++ ) { result . push ( < div key = { i . toString ( ) } className = { styles . localTabFilename } > { filesResult [ i ] . fileName } < /div>); } return result ; } ; public render ( ) { const { filePickerResult } = this . state ; const acceptedFilesExtensions = this . props . accepts ? this . props . accepts . join ( "," ) : null ; return ( < div className = { styles . tabContainer } > < div className = { styles . tabHeaderContainer } > < h2 className = { styles . tabHeader } > { strings . UploadLinkLabel + " " + strings . OneDriveRootFolderName } < /h2> < /div> < div className = { css ( styles . tab , styles . tabOffset ) } > < DragDropFiles iconName = "BulkUpload" onDrop = { this . _handleFileUpload } > < div className = { styles . localTabDragDropFile } > < input className = { styles . localTabInput } type = "file" id = "fileInput" accept = { acceptedFilesExtensions } multiple = { true } onChange = { ( event ) => this . _handleFileUploadExplorer ( event ) } /> < label className = { styles . localTabLabel } htmlFor = "fileInput" > { strings . UploadLinkLabel + " " + strings . OneDriveRootFolderName } < /label> < /div> < /DragDropFiles> < div > { ( filePickerResult ) ? this . displayFileNames ( filePickerResult ) : "" } < /div> { this . props . renderCustomMultipleUploadTabContent && this . props . renderCustomMultipleUploadTabContent ( this . state . filePickerResult ) } < /div> < div className = { styles . actionButtonsContainer } > < div className = { styles . actionButtons } > < PrimaryButton disabled = { ! filePickerResult } onClick = { ( ) => this . _handleSave ( ) } className = { styles . actionButton } > { strings . ListItemAttachmentslPlaceHolderButtonLabel + " " + strings . OneDriveRootFolderName } < /PrimaryButton> < DefaultButton onClick = { ( ) => this . _handleClose ( ) } className = { styles . actionButton } > { strings . CancelButtonLabel } < /DefaultButton> < /div> < /div> < /div>); } private _handleFileUpload = ( files ) => { if ( files . length < 1 ) { return ; } else { const filePickerResultsArray = [ ] ; for ( var i = 0 ; i < files . length ; i ++ ) { const file = files [ i ] ; const filePickerResult = { fileAbsoluteUrl : null , fileName : file . name , fileSize : file . size , fileNameWithoutExtension : GeneralHelper . getFileNameWithoutExtension ( file . name ) , downloadFileContent : ( ) => { return Promise . resolve ( file ) ; } } ; filePickerResultsArray . push ( filePickerResult ) ; } this . setState ( { filePickerResult : filePickerResultsArray } ) ; this . props . onChange ( filePickerResultsArray ) ; } } ; private _handleFileUploadExplorer = ( event ) => { if ( ! event || event . target . files . length < 1 ) { return ; } else { const files = [ ] ; for ( var i = 0 ; i < event . target . files . length ; i ++ ) { const file = event . target . files . item ( i ) ; files . push ( file ) ; } this . _handleFileUpload ( files ) ; } } ; private _handleSave = ( ) => { this . props . onSave ( this . state . filePickerResult ) ; } ; private _handleClose = ( ) => { this . props . onClose ( ) ; } ; }