client/scss/_dropzone.scss

@@ -56,6 +56,17 @@
   width: calc(100% - 2em);
 }
 
+.dropzone-memeify-button {
+  background: #333;
+  color: #fff;
+  font-size: .8em;
+  padding: 3px 6px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 3;
+}
+
 .dropzone-instructions-display__chooser-label {
   text-decoration: underline;
 }

client/src/components/Creatify/index.js

@@ -8,8 +8,10 @@ import RichDraggable from './RichDraggable';
 import EditableFontface, { PRESETS as FontPresets } from './EditableFontface';
 
 import {
-  faFont
+  faEdit,
-} from '@fortawesome/free-solid-svg-icons'
+  faFont,
+} from '@fortawesome/free-solid-svg-icons';
+library.add(faEdit);
 library.add(faFont);
 
 const getRasterizedCanvas = (contents, width, height) => {
@@ -154,8 +156,10 @@ export default class Creatify extends Component {
     return (
       <div style={{ position: 'relative', flex: props.flex === true ? 1 : props.flex, display: props.flex ? 'flex' : 'block' }}>
         <div style={{ position: 'absolute', top: 0, left: 0, right: 0, background: '#333', zIndex: 2 }}>
+          {/*
           <button onClick={() => this.renderContents()}>Rasterize</button>
           <Select isSearchable={false} options={state.fontOptions} onChange={(option) => this.setFont(option.fontName)} />
+          */}
         </div>
         <div ref={me.contents} style={{ fontSize: '22px', overflow: 'hidden', transform: 'translateZ(0)', flex: 1 }}>
           <RichDraggable bounds={state.bounds}>

client/src/containers/Dropzone/view.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
+
 import { validateFile } from '../../utils/file';
 import Creatify from '@components/Creatify';
 import DropzonePreviewImage from '@components/DropzonePreviewImage';
 import DropzoneDropItDisplay from '@components/DropzoneDropItDisplay';
 import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay';
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEdit } from '@fortawesome/free-solid-svg-icons';
+
 class Dropzone extends React.Component {
   constructor (props) {
     super(props);
@@ -14,6 +19,7 @@ class Dropzone extends React.Component {
       mouseOver  : false,
       dimPreview : false,
       filePreview: null,
+      memeify    : false,
     };
 
     if(props.file) {
@@ -121,7 +127,7 @@ class Dropzone extends React.Component {
   }
 
   render () {
-    const { dragOver, mouseOver, dimPreview, filePreview } = this.state;
+    const { dragOver, mouseOver, dimPreview, filePreview, memeify } = this.state;
     const { file, thumbnail, fileError, isUpdate, sourceUrl, fileExt } = this.props;
 
     const hasContent = !!(file || isUpdate);
@@ -147,7 +153,7 @@ class Dropzone extends React.Component {
       sourceUrl,
     };
 
-    let memeify = file && filePreview ? (
+    const memeifyContent = memeify && file && filePreview ? (
       <Creatify flex>
         <div style={{ background: '#fff', flex: 1 }}>
           <img style={{ width: '100%' }} src={filePreview} />
@@ -186,7 +192,12 @@ class Dropzone extends React.Component {
                         message={fileExt === 'mp4' ? 'Drag & drop new thumbnail' : null}
                       />
                     ) : null }
-                    {memeify}
+                    { !memeify && (
+                      <div className={'dropzone-memeify-button'} onClick={() => this.setState({ memeify: !memeify })}>
+                        <FontAwesomeIcon icon={faEdit} /> Memeify
+                      </div>
+                    )}
+                    {memeifyContent}
                   </div>
                 </div>
               ) : (

package.json

@@ -70,12 +70,14 @@
     "passport-local": "^1.0.0",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
-    "react-feather": "^1.1.4",
     "react-dom": "^16.6.1",
+    "react-draggable": "^3.0.5",
+    "react-feather": "^1.1.4",
     "react-ga": "^2.5.3",
     "react-helmet": "^5.2.0",
     "react-redux": "^5.1.1",
     "react-router-dom": "^4.3.1",
+    "react-select": "^2.1.1",
     "redux": "^4.0.1",
     "redux-saga": "^0.16.2",
     "sequelize": "^4.41.1",
@@ -97,9 +99,9 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-stage-2": "^7.0.0",
     "@babel/register": "^7.0.0",
+    "babel-eslint": "9.0.0-beta.3",
     "babel-loader": "^7.1.2",
     "babel-plugin-module-resolver": "^3.1.1",
-    "babel-eslint": "9.0.0-beta.3",
     "builder": "^4.0.0",
     "chai": "^4.2.0",
     "chai-http": "^4.2.0",