 {Tip} = require('./r_misc')
 
 Dropzone.autoDiscover = false
+
+DROPSTYLE =
+    border       : '2px solid #ccc'
+    boxShadow    : '4px 4px 2px #bbb'
+    borderRadius : '5px'
+    padding      : 0
+    margin       : '10px'
+
+render_header = ->
+    <Tip
+        icon      = 'file'
+        title     = 'Drag and drop files'
+        placement = 'top'
+        tip       = 'Drag and drop files from your computer into the box below to upload them into your project.  You can upload individual files that are up to 30MB in size.'>
+        <h4 style={color:"#666"}>
+            Drag and drop files (Currently, each file must be under 30MB; for bigger files, use SSH as explained in project settings.)
+        </h4>
+    </Tip>
+
 
 exports.SMC_Dropzone = rclass
     displayName: 'SMC_Dropzone'

    displayName: 'dropzone-wrapper'

    propTypes:
        project_id           : rtypes.string.isRequired    # The project to upload files to
        dest_path            : rtypes.string.isRequired    # The path for files to be sent
        config               : rtypes.object               # All supported dropzone.js config options
        event_handlers       : rtypes.object
        show_upload          : rtypes.bool
        on_close             : rtypes.func

    getDefaultProps: ->
        config         : {}

        postUrl  = window.smc_base_url + "/upload?project_id=#{@props.project_id}&dest_dir=#{dest_dir}"
        return postUrl

    render_close_button: ->
        <div className='close-button pull-right'>
            <span
                onClick   = {@props.close_button_onclick}
                className = 'close-button-x'
                style     = {cursor: 'pointer', fontSize: '18px', color:'gray'}>
                <i className="fa fa-times"></i>
            </span>
        </div>

    render: ->
        <div>
            {@render_close_button() if @props.close_button_onclick?}
            {render_header()}
            <div style={DROPSTYLE}>
                <DropComponent
                    config        = {postUrl: @postUrl()}
                    eventHandlers = {@props.dropzone_handler}
