jsmanifest

import { useCallback, useEffect, useReducer, useRef } from 'react'

// mock upload func
const api = {
  uploadFile({ timeout = 550 }) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve()
      }, timeout)
    })

jsmanifest

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

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

jsmanifest

body {
  padding: 12px;
  background: #171c1f;
  color: #fff;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

jsmanifest

import React from 'react'

const FileUploader = ({ children, triggerInput, inputRef, onChange }) => {
  let hiddenInputStyle = {}
  // If user passes in children, display children and hide input.
  if (children) {
    hiddenInputStyle = {
      position: 'absolute',
      top: '-9999px',
    }

jsmanifest

const triggerInput = (e) => {
  e.persist()
  inputRef.current.click()
}

jsmanifest

return {
  ...state,
  onSubmit,
  onChange,
  triggerInput,
}

jsmanifest

import React from 'react'
import idleSrc from './images/jade_input_bg.jpg'

const FileUploaderScreen = (props) => (
  <div className="uploader-input">
    <div
      style={{ backgroundImage: `url("${idleSrc}")` }}
      className="uploader-overlay"
    />
  </div>

jsmanifest

.form {
  max-width: 400px;
  margin: auto;
}
.uploader {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;

jsmanifest

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

const App = ({ children }) => {
  const inputRef = React.createRef()
  const {
    files,

jsmanifest

const initialState = {
  files: [],
  pending: [],
  next: null,
  uploading: false,
  uploaded: {},
  status: IDLE,
}