import React , { InputHTMLAttributes } from "react" ; export interface ImportingFile < T = string > { file : File ; data : T | any ; error ? : string ; } interface Props extends InputHTMLAttributes < any > { id ? : string ; accept ? : string ; multiple ? : boolean ; onImport ( data ) : void ; } export class FileInput extends React . Component < Props > { protected input : HTMLInputElement ; protected style : React . CSSProperties = { position : "absolute" , display : "none" , } ; selectFiles = ( ) => { this . input . click ( ) ; } ; protected onChange = async ( evt ) => { var fileList = Array . from ( evt . target . files ) ; if ( ! fileList . length ) { return ; } var readingFiles = fileList . map ( file => { return new Promise ( ( resolve ) => { var reader = new FileReader ( ) ; reader . onloadend = ( ) => { resolve ( { file : file , data : reader . result , error : reader . error ? String ( reader . error ) : null , } ) ; } ; reader . readAsText ( file ) ; } ) ; } ) ; var data = await Promise . all ( readingFiles ) ; this . props . onImport ( data ) ; } ; render ( ) { var { onImport , ... props } = this . props ; return ( < input type = "file" style = { this . style } onChange = { this . onChange } ref = { e => this . input = e } { ... props } />); } }