Cacher is the code snippet organizer for pro developers

/*
  Express server
*/
import express from 'express';
import path from 'path';
import logger from 'morgan';
import bodyParser from 'body-parser';
import cors from 'cors';
import routes from './routes';

const app = express();
app.disable('x-powered-by');
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use('/uploads', express.static(path.join(__dirname, './uploads')))

// Routes
app.use('/', routes);

const { PORT = 8080 } = process.env;
app.listen(PORT, () => console.log(`Listening on port ${PORT}`)); // eslint-disable-line no-console

/*
Express routes
*/
import { Router } from 'express';
import { doStuffWithImage } from './../services/methods';
import multer from 'multer';

const routes = Router();
// destination for uploaded images
const upload = multer({ dest: 'uploads/' })

routes.post('/upload', upload.single('photo'), (req, res) => {
    let imageUri = req.file.path;
    doStuffWithImage(imageUri)
        .then((items) => {
            res.json({ items });
        })
        .catch((err) => {
            console.error("Error; ", err)
        });
});

export default routes;

/*
    React component
*/
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Upload extends Component {
    constructor(){
        super();
        this.uploadFile = this.uploadFile.bind(this);
        this.state = {
            isLoading:false,
            labels: [],
            imageUri: undefined
        }
    }

    uploadFile(){
        this.setState({
            isLoading:true
        });
        var formData = new FormData(ReactDOM.findDOMNode(this.refs.uploadForm));
        
        fetch("http://localhost:8080/upload", {
            method: 'POST',
            headers: { 
                "Accept": "application/json" },
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                let items = data.items;
                this.setState({
                    items,
                    isLoading:false
                })
            })
    }

    render() {
        if(this.state.isLoading){
            return <div>Loading...</div>
        }
        return (
            <div>
                <div className="upload-form">
                    <form ref="uploadForm" className="uploader" encType="multipart/form-data" >
                        <input ref="photo" type="file" name="photo" className="upload-file" />
                        <input type="button" ref="button" value="Upload" onClick={this.uploadFile} />
                    </form>
                </div>
                 <ul className="upload-result">
                    {this.state.items.map((item, i) => {
                        return <li key={i}>{item.title}</li>
                    })}
                </ul>
            </div>
        );
    }
}

export default Upload;