App.js

import React from 'react'
import useApp from './useApp'
import './styles.css'

const Input = (props) => (
  <input
    type="file"
    accept="image/*"
    name="img-loader-input"
    multiple
    {...props}
  />
)

const App = ({ children }) => {
  const {
    files,
    pending,
    next,
    uploading,
    uploaded,
    status,
    onSubmit,
    onChange,
  } = useApp()

  return (
    <form className="form" onSubmit={onSubmit}>
      <div>
        <Input onChange={onChange} />
        <button type="submit">Submit</button>
      </div>
      <div>
        {files.map(({ file, src, id }, index) => (
          <div key={`file-row${index}`}>
            <img src={src} alt="" />
            <div>{file.name}</div>
          </div>
        ))}
      </div>
    </form>
  )
}

export default App