AutoMate/frontend/components/FileUpload.js

import { useState } from 'react'
import { endpoint } from '../config'

const FileFields = props => {
  const [state, setState] = useState({ ...FileState })

  const updateState = async event => {
    const { name, type, value, files } = event.target
    await setState({
      ...state,
      [name]: type === 'file' ? files[0] : value
    })
    console.log(state)
    props.onChange(event, state)
  }

  return (
    < fieldset >
      <label htmlFor='file'>File</label>
      <input type='file' name='file' id='file' onChange={updateState} />
      < label htmlFor='name'>File name</label>
      <input type='text' name='name' id='name' placeholder='File name' value={state.name} onChange={updateState} />
      <label htmlFor='description'>File description</label>
      <textarea name='description' id='description' placeholder='File description' value={state.description} onChange={updateState} />
    </fieldset >
  )
}

const FileState = {
  file: null,
  name: '',
  description: '',
  filename: '',
  mimetype: '',
  size: '',
  path: '',
  uploading: false
}

async function uploadFile(file) {
  const body = new FormData()
  body.append('file', file)

  const res = await fetch(`${endpoint}/upload`, { method: 'POST', body })
  return res.json()
}

class FileUpload extends React.Component {
  state = {
    ...FileState
  }

  upload = async event => {
    event.preventDefault()
    if (!this.state.file) {
      alert('Please select file first.')
      return
    }
    this.setState({ uploading: true })
    const data = new FormData()
    data.append('file', this.state.file)
    data.append('description', this.state.description)

    const res = await fetch(`${endpoint}/upload`, {
      method: 'POST',
      body: data
    })

    const { error, file } = await res.json()
    if (error) {
      console.error(error)
      alert('Upload error.')
      this.setState({ uploading: false })
    }

    this.setState({ path: `${endpoint}/${file.path}`, uploading: false })
  }

  selectFile = event => {
    const { validity, files } = event.target
    this.setState({ file: files[0] })
  }

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value })
  }

  render() {
    return (
      <form>
        <fieldset>
          <input type='file' name='file' id='file'
            onChange={this.selectFile}
          />
          <textarea name="description" id="description" placeholder="Description"
            value={this.state.description}
            onChange={this.handleChange}
          ></textarea>
          <img src={this.state.path} alt={this.state.name} />
          <button onClick={this.upload} disabled={this.state.uploading}>Save</button>
        </fieldset>
      </form>
    )
  }
}

export default FileUpload
export { FileFields, FileState, uploadFile }