minio/browser/app/js/components/Dropzone.js

/*
 * Minio Cloud Storage (C) 2016 Minio, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react'
import ReactDropzone from 'react-dropzone'
import * as actions from '../actions'

// Dropzone is a drag-and-drop element for uploading files. It will create a
// landing zone of sorts that automatically receives the files.
export default class Dropzone extends React.Component {

  onDrop(files) {
    // FIXME: Currently you can upload multiple files, but only one abort
    // modal will be shown, and progress updates will only occur for one
    // file at a time. See #171.
    files.forEach(file => {
      let req = new XMLHttpRequest()

      // Dispatch the upload.
      web.dispatch(actions.uploadFile(file, req))
    })
  }

  render() {
    // Overwrite the default styling from react-dropzone; otherwise it
    // won't handle child elements correctly.
    const style = {
      height: '100%',
      borderWidth: '0',
      borderStyle: 'dashed',
      borderColor: '#fff'
    }
    const activeStyle = {
      borderWidth: '2px',
      borderColor: '#777'
    }
    const rejectStyle = {
      backgroundColor: '#ffdddd'
    }

    // disableClick means that it won't trigger a file upload box when
    // the user clicks on a file.
    return (
      <ReactDropzone style={ style }
        activeStyle={ activeStyle }
        rejectStyle={ rejectStyle }
        disableClick={ true }
        onDrop={ this.onDrop }>
        { this.props.children }
      </ReactDropzone>
    )
  }
}