drag and drop not default and configurable

Author: vietnogi

components/ExampleNav/ExampleNav.cjsx

@@ -14,12 +14,12 @@ component = ({data, state}) ->
 
       <Link to="/FileUploaderContainerExamples">FileUploaderContainer</Link>
 
+      <Link to="/FileUploaderExamples">FileUploader</Link>
+
       <Link to="/UploadedFileExamples">UploadedFile</Link>
 
       <Link to="/UploadedFilesExamples">UploadedFiles</Link>
 
-      <Link to="/FileUploaderExamples">FileUploader</Link>
-
       <Link to="/CheckboxExamples">Checkbox</Link>
 
       <Link to="/ImageViewerHeaderExamples">ImageViewerHeader</Link>

components/FileUploader/FileUploader.cjsx

@@ -6,18 +6,30 @@ React                  = require 'react'
 UploadedFilesContainer = require '../UploadedFiles/UploadedFilesContainer'
 Dropzone               = require 'react-dropzone'
 Loader                 = require '../Loader/Loader.cjsx'
+classNames             = require 'classnames'
+
+FileUploader = ({ multiple, onChange, loading, dragAndDrop }) ->
+  dzContainerClassNames = classNames
+    'dropzone-container': true
+    'drag-and-drop': dragAndDrop
 
-FileUploader = ({ multiple, onChange, loading}) ->
   <div className="FileUploader">
     {
       if loading
         <Loader />
     }
     <UploadedFilesContainer/>
 
-    <Dropzone multiple={multiple} onDrop={onChange} className="Dropzone">
-      <p>click or drag files here to upload</p>
-    </Dropzone>
+    <div className={ dzContainerClassNames }>
+      <Dropzone multiple={multiple} onDrop={onChange} className="Dropzone">
+        {
+          if dragAndDrop
+            <p>click or drag files here to upload</p>
+          else
+            <button>choose files to upload</button>
+        }
+      </Dropzone>
+    </div>
   </div>
 
 module.exports = FileUploader

components/FileUploader/FileUploaderExamples.cjsx

@@ -12,6 +12,10 @@ FileUploaderExamples = ->
     <h1>loading is true</h1>
 
     <FileUploader loading={true} id={'123'} assetType={'work'} category={'development'}/>
+
+    <h1>dragNdrop is true</h1>
+
+    <FileUploader id={'123'} assetType={'work'} category={'development'} dragAndDrop={true}/>
   </div>
 
 module.exports = FileUploaderExamples

components/FileUploader/FileUploaderStyles.scss

@@ -12,15 +12,25 @@
   }
 
   .Dropzone {
-    text-align: center;
-    border: 3px dashed $grey;
-    margin: 10px;
+    display: inline-block;
+  }
+
+  .drag-and-drop {
+    .Dropzone {
+      text-align: center;
+      border    : 3px dashed $grey;
+      margin    : 10px;
+      display   : block;
 
-    p {
-      font-size: 20px;
-      margin: 30px 0px;
-      color: $grey;
+      p {
+        font-size: 20px;
+        margin: 30px 0px;
+        color: $grey;
+      }
     }
   }
 
+  .dropzone-container {
+    text-align: center;
+  }
 }