Uploading an image and displaying that image on the page (Node.js, React,js, Express.js)

I need to upload an image to a site and display it in the page after it's uploaded with a caption of the filename under the image. I've searched all over and found lots of tutorials about uploading and displaying on the same page, but I think that I just have a breakdown in my understanding of what goes into requesting info from a server and then displaying it back.

I'm writing my web app in node+react and using express and multer for the file IO. Here is my code:

import React from 'react';
import ReactDOM from 'react-dom';
import Dropzone from 'react-dropzone-component';
import fs from 'fs';
import express from 'express';
import mutler from 'mutler';

var app = express();
var storage;
var upload;

export default class Form extends React.Component {
constructor (props) {
    super(props);
    storage =  multer.diskStorage({
        //file destination
        destination: function (req, file, callback) {
            callback(null, '/uploads/');
        },
        //set the filename
        filename: function (req, file, callback) {
            callback(null, file.originalname);
            this.state = {
                name: file.originalname
            };
        }
    });
    upload = multer({ storage : storage}).single('userImage');
    app.use('/uploads/', express.static(__dirname + '/uploads/'));
}

handleImageUpload () {
    app.post('/', function (req, res) {
        fs.readFile(req.files.userImage.path, function(err, data) {
            console.log('error with ' + data);
        });
        upload(req, res, function (err) {
            if (err) {
                return res.end("Error uploading file.");
            }

            res.writeFile("/uploads/" + origName, new Buffer(req.body.photo, "base64"), function(err) {
                console.log("error writing image");
            });
            res.redirect('/');
        });
    });
}

getName () {
    return this.state.name;
}

render () {
    return (<div>
        <form action="/" method="post" enctype="multipart/form-data">
            <input type="image" name="userImage"/>
            <input type="submit" name="submit" value="submit" onClick={this.handleImageUpload.bind(this)}/>
        </form>
    </div>

    );
}

}

I've tried following multiple tutorials (which is why Dropzone is imported) but I just can't figure this out for what I want to do.

I figured that if I save the filename to state in the constructor, that then I can get it later and display it in another file, which is simply attributing the file's url to an image source in a higher up react file.

My question is this: where have I gone wrong? By my reasoning this should work, but I'm new to file IO with node and what seems to be common knowledge to a lot of people in the tutorials that I've read just isn't clicking with me. Thank you in advance for your help!

via DottoraQN