fixed dropzone preview

client/build/components/DropzonePreviewImage/index.js

@@ -100,9 +100,8 @@ function (_React$Component) {
     key: "render",
     value: function render() {
       return _react.default.createElement("img", {
-        id: "dropzone-preview",
         src: this.state.imgSource,
-        className: this.props.dimPreview ? 'publish-preview-dim' : '',
+        className: 'dropzone-preview-image ' + (this.props.dimPreview ? 'publish-preview-dim' : ''),
         alt: "publish preview"
       });
     }

client/build/containers/Dropzone/view.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _file = require("../../utils/file");
 
-var _DropzonePreview = _interopRequireDefault(require("@components/DropzonePreview"));
+var _DropzonePreviewImage = _interopRequireDefault(require("@components/DropzonePreviewImage"));
 
 var _DropzoneDropItDisplay = _interopRequireDefault(require("@components/DropzoneDropItDisplay"));
 
@@ -179,13 +179,17 @@ function (_React$Component) {
         onMouseEnter: this.handleMouseEnter,
         onMouseLeave: this.handleMouseLeave,
         onClick: this.handleClick
-      }, this.props.file ? _react.default.createElement("div", null, _react.default.createElement(_DropzonePreview.default, {
+      }, this.props.file ? _react.default.createElement("div", {
+        className: 'dropzone-preview-wrapper'
+      }, _react.default.createElement(_DropzonePreviewImage.default, {
         dimPreview: this.state.dimPreview,
         file: this.props.file,
         thumbnail: this.props.thumbnail
-      }), this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : null, this.state.mouseOver ? _react.default.createElement(_DropzoneInstructionsDisplay.default, {
+      }), _react.default.createElement("div", {
+        className: 'dropzone-preview-overlay'
+      }, this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : null, this.state.mouseOver ? _react.default.createElement(_DropzoneInstructionsDisplay.default, {
         fileError: this.props.fileError
-      }) : null) : this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : _react.default.createElement(_DropzoneInstructionsDisplay.default, {
+      }) : null)) : this.state.dragOver ? _react.default.createElement(_DropzoneDropItDisplay.default, null) : _react.default.createElement(_DropzoneInstructionsDisplay.default, {
         fileError: this.props.fileError
       })));
     }

client/scss/containers/_dropzone.scss

@@ -30,9 +30,25 @@
   text-align: center;
 }
 
-#dropzone-preview {
+.dropzone-preview-image {
   display: block;
   padding: 1em;
   width: calc(100% - 2em);
 }
 
+.dropzone-preview-wrapper {
+  position: relative;
+  .dropzone-preview-overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+

client/src/components/DropzonePreviewImage/index.jsx

@@ -44,9 +44,8 @@ class PublishPreview extends React.Component {
   render () {
     return (
       <img
-        id='dropzone-preview'
         src={this.state.imgSource}
-        className={this.props.dimPreview ? 'publish-preview-dim' : ''}
+        className={'dropzone-preview-image ' + (this.props.dimPreview ? 'publish-preview-dim' : '')}
         alt='publish preview'
       />
     );

client/src/containers/Dropzone/view.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { validateFile } from '../../utils/file';
-import DropzonePreview from '@components/DropzonePreview';
+import DropzonePreviewImage from '@components/DropzonePreviewImage';
 import DropzoneDropItDisplay from '@components/DropzoneDropItDisplay';
 import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay';
 
@@ -105,18 +105,20 @@ class Dropzone extends React.Component {
           onMouseLeave={this.handleMouseLeave}
           onClick={this.handleClick}>
           {this.props.file ? (
-            <div>
-              <DropzonePreview
+            <div className={'dropzone-preview-wrapper'}>
+              <DropzonePreviewImage
                 dimPreview={this.state.dimPreview}
                 file={this.props.file}
                 thumbnail={this.props.thumbnail}
               />
-              { this.state.dragOver ? <DropzoneDropItDisplay /> : null }
-              { this.state.mouseOver ? (
-                <DropzoneInstructionsDisplay
-                  fileError={this.props.fileError}
-                />
-              ) : null }
+              <div className={'dropzone-preview-overlay'}>
+                { this.state.dragOver ? <DropzoneDropItDisplay /> : null }
+                { this.state.mouseOver ? (
+                  <DropzoneInstructionsDisplay
+                    fileError={this.props.fileError}
+                  />
+                ) : null }
+              </div>
             </div>
           ) : (
             this.state.dragOver ? <DropzoneDropItDisplay /> : (