import 'react-app-polyfill/ie11' ; import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { useFilePicker } from '../src' ; import { Validator } from '../src/validators/validatorInterface' ; const customValidator = { returns { Promise } validateBeforeParsing : async ( config , plainFiles ) => new Promise ( ( res , rej ) => ( plainFiles . length % 2 === 0 ? res ( ) : rej ( { oddNumberOfFiles : true } ) ) ) , returns { Promise } validateAfterParsing : async ( config , file , reader ) => new Promise ( ( res , rej ) => file . lastModified < new Date ( ) . getTime ( ) - 24 * 60 * 60 * 1000 ? res ( ) : rej ( { fileRecentlyModified : true , lastModified : file . lastModified } ) ) , } ; const App = ( ) => { const [ openFileSelector , { filesContent , loading , errors , plainFiles } ] = useFilePicker ( { multiple : true , readAs : 'DataURL' , accept : [ '.png' , '.jpeg' ] , limitFilesConfig : { min : 2 , max : 3 } , } ) ; if ( errors . length ) { return ( < div > < button onClick = { ( ) => openFileSelector ( ) } > Something went wrong , retry ! < /button> < div style = { { display : 'flex' , flexDirection : 'column' } } > { console . log ( errors ) } { Object . entries ( errors [ 0 ] ) . filter ( ( [ key , value ] ) => key !== 'name' && value ) . map ( ( [ key ] ) => ( < div key = { key } > { key } < /div>))} < /div> < /div>); } if ( loading ) { return < div > Loading ... < /div>; } return ( < div > < button onClick = { ( ) => openFileSelector ( ) } > Select file < /button> < br / > Number of selected files : { plainFiles . length } < br /> { } { ! ! filesContent . length && < img src = { filesContent [ 0 ] . content } />} < br / > { plainFiles . map ( file => ( < div key = { file . name } > { file . name } < /div>))} < /div>); } ; ReactDOM . render ( < App />, document.getElementById('root'));