storj.io/minio@v0.0.0-20230509071714-0cbc90f649b1/browser/app/js/uploads/Dropzone.js (about)

     1  /*
     2   * MinIO Cloud Storage (C) 2016, 2018 MinIO, Inc.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  import React from "react"
    18  import { connect } from "react-redux"
    19  import ReactDropzone from "react-dropzone"
    20  import * as actions from "./actions"
    21  
    22  // Dropzone is a drag-and-drop element for uploading files. It will create a
    23  // landing zone of sorts that automatically receives the files.
    24  export class Dropzone extends React.Component {
    25    onDrop(files) {
    26      const { uploadFile } = this.props
    27      // FIXME: Currently you can upload multiple files, but only one abort
    28      // modal will be shown, and progress updates will only occur for one
    29      // file at a time. See #171.
    30      files.forEach(file => {
    31        uploadFile(file)
    32      })
    33    }
    34  
    35    render() {
    36      // Overwrite the default styling from react-dropzone; otherwise it
    37      // won't handle child elements correctly.
    38      const style = {
    39        flex: "1",
    40        borderWidth: "0",
    41        borderStyle: "dashed",
    42        borderColor: "#fff"
    43      }
    44      const activeStyle = {
    45        borderWidth: "2px",
    46        borderColor: "#777"
    47      }
    48      const rejectStyle = {
    49        backgroundColor: "#ffdddd"
    50      }
    51      const getStyle = (isDragActive, isDragAccept, isDragReject) => ({
    52        ...style,
    53        ...(isDragActive ? activeStyle : {}),
    54        ...(isDragReject ? rejectStyle : {})
    55      })
    56  
    57      // disableClick means that it won't trigger a file upload box when
    58      // the user clicks on a file.
    59      return (
    60        <ReactDropzone
    61          onDrop={this.onDrop.bind(this)}
    62        >
    63          {({getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject}) => (
    64            <div
    65              {...getRootProps({
    66                onClick: event => event.stopPropagation()
    67              })}
    68              style={getStyle(isDragActive, isDragAccept, isDragReject)}
    69            >
    70              <input {...getInputProps()} />
    71              {this.props.children}
    72            </div>
    73          )}
    74        </ReactDropzone>
    75      )
    76    }
    77  }
    78  
    79  const mapDispatchToProps = dispatch => {
    80    return {
    81      uploadFile: file => dispatch(actions.uploadFile(file))
    82    }
    83  }
    84  
    85  export default connect(undefined, mapDispatchToProps)(Dropzone)