AutoMate/frontend/components/FileUpload.js

import React from 'react'
import gql from 'graphql-tag'
import { endpoint } from '../config'
/*import { Query } from 'react-apollo'

const QUERY_UPLOAD = gql`
  query QUERY_UPLOAD($id: ID!) {
    upload(id: $id) {
      id
      filename
      path
      description
      name
      size
    }
  } 
`*/

class FileUpload extends React.Component {
  state = {
    path: ''
  }

  upload = async event => {
    event.preventDefault()
    const { validity, files } = event.target
    console.log(event, validity, files, files[0])
    const data = new FormData()
    data.append('file', files[0])

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

    const { error, file } = await res.json()
    console.log(error, file)
    if (error) throw new Error('Failed to upload.')

    this.setState({ path: `${endpoint}/static/uploads/${file}` })
  }

  render() {
    return (
      <form>
        <input type='file' name='file' id='file' onChange={this.upload} /><img src={this.state.name} alt={this.state.name} />
      </form>
    )
  }
}

export default FileUpload