jsmanifest

const reducer = (state, action) => {
  switch (action.type) {
    case 'load':
      return { ...state, files: action.files, status: LOADED }
    case 'submit':
      return { ...state, uploading: true, pending: state.files, status: INIT }
    case 'next':
      return {
        ...state,
        next: action.next,

jsmanifest

// Sets the next file when it detects that its ready to go
useEffect(() => {
  if (state.pending.length && state.next == null) {
    const next = state.pending[0]
    dispatch({ type: 'next', next })
  }
}, [state.next, state.pending])

const countRef = useRef(0)

jsmanifest

const onChange = (e) => {
  if (e.target.files.length) {
    const arrFiles = Array.from(e.target.files)
    const files = arrFiles.map((file, index) => {
      const src = window.URL.createObjectURL(file)
      return { file, id: index, src }
    })
    dispatch({ type: 'load', files })
  }
}

jsmanifest

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

const FileUploaderScreen = ({ status }) => {
  let src
  switch (status) {
    case 'IDLE':
      src = idleSrc
      break
    default:

jsmanifest

import React from 'react'
import idleSrc from './images/jade_input_bg.jpg'
import pendingSrc from './images/art-arts-and-crafts-bright-1124884.jpg'
import uploadedSrc from './images/adventure-background-blur-891252.jpg'
import errorSrc from './images/121911.jpg'

const FileUploaderScreen = ({ status }) => {
  let src
  switch (status) {
    case 'IDLE':

jsmanifest

<FileUploader
  triggerInput={triggerInput}
  inputRef={inputRef}
  onChange={onChange}
>
  <FileUploaderScreen status={status} />
</FileUploader>

jsmanifest

import React from 'react'
import Spinner from './Spinner'

const getReadableSizeFromBytes = (bytes) => {
  const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  let l = 0
  let n = parseInt(bytes, 10) || 0
  while (n >= 1024 && ++l) n /= 1024
  // include a decimal point and a tenths-place digit if presenting
  // less than ten of KB or greater units

jsmanifest

.file-list {
  font-size: 0.75rem;
}
.file-row {
  position: relative;
  transition: all 0.15s ease-in;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;

jsmanifest

import React from 'react'
import MDSpinner from 'react-md-spinner'
import cx from 'classnames'

const Spinner = ({
  children,
  containerProps,
  spinnerProps,
  xs,
  sm,

jsmanifest

.spinner-container {
  position: relative;
  box-sizing: border-box;
  padding: 15px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.spinner {
  color: #fff;