photo.jsx

import React, {Component} from 'react';
import FontIcon from 'material-ui/FontIcon'
import {cyan500} from 'material-ui/styles/colors'

const remote = require('electron').remote
const dialog = remote.require('dialog')

class PhotoHover extends Component {
  constructor(props) {
    super(props)
  }

  uploadPhoto = (e) => {
    dialog.showOpenDialog({
      properties: ['openFile', 'openDirectory']
    }, function(file){
      console.log(file)
    })
  }

  render() {
    return (
      <div onClick={this.uploadPhoto} style={{
          width:200,
          height:200,
          border:`5px solid ${cyan500}`,
          backgroundColor:cyan500,
          textAlign:'center',
          color:'#eee',
          fontSize:18,
          fontWeight:'bold',
          cursor:'pointer',
          display:'inline-block'
        }}>
        <span style={{
          paddingTop:20,
          display:'block'
        }}>
          Upload Photo
        </span>
        <FontIcon
          className="fa fa-plus-circle"
          style={{
            display:'block',
            fontSize:100,
            color:'inherit',
            marginTop:30
          }}
        />
      </div>
    )
  }
}

export default PhotoHover