public/bundle/bundle.js

@@ -18398,7 +18398,8 @@ var Dropzone = function (_React$Component) {
     var _this = _possibleConstructorReturn(this, (Dropzone.__proto__ || Object.getPrototypeOf(Dropzone)).call(this, props));
 
     _this.state = {
-      fileError: null
+      fileError: null,
+      dragOver: false
     };
     _this.handleDrop = _this.handleDrop.bind(_this);
     _this.handleDragOver = _this.handleDragOver.bind(_this);
@@ -18451,8 +18452,8 @@ var Dropzone = function (_React$Component) {
   }, {
     key: 'handleDrop',
     value: function handleDrop(event) {
-      console.log('handleDrop', event);
       event.preventDefault();
+      this.setState({ dragOver: false });
       // if dropped items aren't files, reject them
       var dt = event.dataTransfer;
       console.log('dt', dt);
@@ -18464,7 +18465,7 @@ var Dropzone = function (_React$Component) {
           try {
             this.validateFile(droppedFile); // validate the file's name, type, and size
           } catch (error) {
-            return this.setState('fileError', error.message);
+            return this.setState({ fileError: error.message });
           }
           // stage it so it will be ready when the publish button is clicked
           this.props.stageFileAndShowDetails(droppedFile);
@@ -18491,18 +18492,12 @@ var Dropzone = function (_React$Component) {
   }, {
     key: 'handleDragEnter',
     value: function handleDragEnter() {
-      var thisDropzone = document.getElementById('primary-dropzone');
-      thisDropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--padded row--tall flex-container--column flex-container--center-center');
-      thisDropzone.firstElementChild.setAttribute('class', 'hidden');
-      thisDropzone.lastElementChild.setAttribute('class', '');
+      this.setState({ dragOver: true });
     }
   }, {
     key: 'handleDragLeave',
     value: function handleDragLeave() {
-      var thisDropzone = document.getElementById('primary-dropzone');
-      thisDropzone.setAttribute('class', 'dropzone row row--tall row--padded flex-container--column flex-container--center-center');
-      thisDropzone.firstElementChild.setAttribute('class', '');
-      thisDropzone.lastElementChild.setAttribute('class', 'hidden');
+      this.setState({ dragOver: false });
     }
   }, {
     key: 'handleClick',
@@ -18521,7 +18516,7 @@ var Dropzone = function (_React$Component) {
         try {
           this.validateFile(chosenFile); // validate the file's name, type, and size
         } catch (error) {
-          return this.setState('fileError', error.message);
+          return this.setState({ fileError: error.message });
         }
         // stage it so it will be ready when the publish button is clicked
         this.props.stageFileAndShowDetails(chosenFile);
@@ -18540,13 +18535,21 @@ var Dropzone = function (_React$Component) {
         ),
         _react2.default.createElement(
           'div',
-          { id: 'primary-dropzone', className: 'dropzone row row--padded row--tall flex-container--column flex-container--center-center', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragEnd: this.handleDragEnd, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onClick: this.handleClick },
-          _react2.default.createElement(
+          { id: 'primary-dropzone', className: 'dropzone row row--padded row--tall flex-container--column flex-container--center-center' + (this.state.dragOver && ' dropzone--drag-over'), onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragEnd: this.handleDragEnd, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onClick: this.handleClick },
+          this.state.dragOver ? _react2.default.createElement(
+            'div',
+            { id: 'dropbzone-dragover' },
+            _react2.default.createElement(
+              'p',
+              { className: 'blue' },
+              'Drop it.'
+            )
+          ) : _react2.default.createElement(
             'div',
             { id: 'primary-dropzone-instructions' },
             _react2.default.createElement(
               'p',
-              { className: 'info-message-placeholder info-message--failure', id: 'input-error-file-selection', hidden: 'true' },
+              { className: 'info-message-placeholder info-message--failure', id: 'input-error-file-selection' },
               this.state.fileError
             ),
             _react2.default.createElement(
@@ -18564,15 +18567,6 @@ var Dropzone = function (_React$Component) {
               { className: 'blue--underlined' },
               'CHOOSE FILE'
             )
-          ),
-          _react2.default.createElement(
-            'div',
-            { id: 'dropbzone-dragover', className: 'hidden' },
-            _react2.default.createElement(
-              'p',
-              { className: 'blue' },
-              'Drop it.'
-            )
           )
         )
       );

react/components/dropzone.jsx

@@ -5,6 +5,7 @@ class Dropzone extends React.Component {
     super(props);
     this.state = {
       fileError: null,
+      dragOver : false,
     }
     this.handleDrop = this.handleDrop.bind(this);
     this.handleDragOver = this.handleDragOver.bind(this);
@@ -51,8 +52,8 @@ class Dropzone extends React.Component {
     }
   }
   handleDrop (event) {
-    console.log('handleDrop', event);
     event.preventDefault();
+    this.setState({dragOver: false});
     // if dropped items aren't files, reject them
     const dt = event.dataTransfer;
     console.log('dt', dt);
@@ -64,7 +65,7 @@ class Dropzone extends React.Component {
         try {
           this.validateFile(droppedFile); // validate the file's name, type, and size
         } catch (error) {
-          return this.setState('fileError', error.message);
+          return this.setState({fileError: error.message});
         }
         // stage it so it will be ready when the publish button is clicked
         this.props.stageFileAndShowDetails(droppedFile);
@@ -85,16 +86,10 @@ class Dropzone extends React.Component {
     }
   }
   handleDragEnter () {
-    const thisDropzone = document.getElementById('primary-dropzone');
-    thisDropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--padded row--tall flex-container--column flex-container--center-center');
-    thisDropzone.firstElementChild.setAttribute('class', 'hidden');
-    thisDropzone.lastElementChild.setAttribute('class', '');
+    this.setState({dragOver: true});
   }
   handleDragLeave () {
-    const thisDropzone = document.getElementById('primary-dropzone');
-    thisDropzone.setAttribute('class', 'dropzone row row--tall row--padded flex-container--column flex-container--center-center');
-    thisDropzone.firstElementChild.setAttribute('class', '');
-    thisDropzone.lastElementChild.setAttribute('class', 'hidden');
+    this.setState({dragOver: false});
   }
   handleClick (event) {
     event.preventDefault();
@@ -109,7 +104,7 @@ class Dropzone extends React.Component {
       try {
         this.validateFile(chosenFile); // validate the file's name, type, and size
       } catch (error) {
-        return this.setState('fileError', error.message);
+        return this.setState({fileError: error.message});
       }
       // stage it so it will be ready when the publish button is clicked
       this.props.stageFileAndShowDetails(chosenFile);
@@ -121,16 +116,19 @@ class Dropzone extends React.Component {
         <form>
           <input className="input-file" type="file" id="file_input" name="file_input" accept="video/*,image/*" onChange={this.handleFileInput} encType="multipart/form-data"/>
         </form>
-        <div id="primary-dropzone" className="dropzone row row--padded row--tall flex-container--column flex-container--center-center" onDrop={this.handleDrop} onDragOver={this.handleDragOver} onDragEnd={this.handleDragEnd} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave} onClick={this.handleClick}>
-          <div id="primary-dropzone-instructions">
-            <p className="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true">{this.state.fileError}</p>
+        <div id="primary-dropzone" className={'dropzone row row--padded row--tall flex-container--column flex-container--center-center' + (this.state.dragOver && ' dropzone--drag-over')} onDrop={this.handleDrop} onDragOver={this.handleDragOver} onDragEnd={this.handleDragEnd} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave} onClick={this.handleClick}>
+          { this.state.dragOver ? (
+            <div id="dropbzone-dragover">
+              <p className="blue">Drop it.</p>
+            </div>
+          ) : (
+            <div id="primary-dropzone-instructions">
+            <p className="info-message-placeholder info-message--failure" id="input-error-file-selection">{this.state.fileError}</p>
             <p>Drag & drop image or video here to publish</p>
             <p className="fine-print">OR</p>
             <p className="blue--underlined">CHOOSE FILE</p>
-          </div>
-          <div id="dropbzone-dragover" className="hidden">
-            <p className="blue">Drop it.</p>
-          </div>
+            </div>
+          )}
         </div>
       </div>
     );

views/index.handlebars

@@ -1,5 +1,9 @@
 <div class="row row--tall flex-container--column">
-    <div id="react-uploader" class="row row--padded row--tall"></div>
+    <div id="react-uploader" class="row row--padded row--tall">
+        <div class="row row--padded row--tall flex-container--column flex-container--center-center">
+            <img src="/assets/img/loading.gif" alt="loading">
+        </div>
+    </div>
 </div>
 
 <script src="/bundle/bundle.js"></script>