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

     1  /*
     2   * MinIO Cloud Storage (C) 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 humanize from "humanize"
    19  import classNames from "classnames"
    20  import { connect } from "react-redux"
    21  
    22  import { ProgressBar } from "react-bootstrap"
    23  import AbortConfirmModal from "./AbortConfirmModal"
    24  import * as uploadsActions from "./actions"
    25  
    26  export class UploadModal extends React.Component {
    27    render() {
    28      const { uploads, showAbort, showAbortModal } = this.props
    29      if (showAbort) {
    30        return <AbortConfirmModal />
    31      }
    32  
    33      // If we don't have any files uploading, don't show anything.
    34      let numberUploading = Object.keys(uploads).length
    35      if (numberUploading == 0) return <noscript />
    36  
    37      let totalLoaded = 0
    38      let totalSize = 0
    39  
    40      // Iterate over each upload, adding together the total size and that
    41      // which has been uploaded.
    42      for (var slug in uploads) {
    43        let upload = uploads[slug]
    44        totalLoaded += upload.loaded
    45        totalSize += upload.size
    46      }
    47  
    48      let percent = totalLoaded / totalSize * 100
    49  
    50      // If more than one: "Uploading files (5)..."
    51      // If only one: "Uploading myfile.txt..."
    52      let text =
    53        "Uploading " +
    54        (numberUploading == 1
    55          ? `'${uploads[Object.keys(uploads)[0]].name}'`
    56          : `files (${numberUploading})`) +
    57        "..."
    58  
    59      return (
    60        <div className="alert alert-info progress animated fadeInUp ">
    61          <button type="button" className="close" onClick={showAbortModal}>
    62            <span>×</span>
    63          </button>
    64          <div className="text-center">
    65            <small>{text}</small>
    66          </div>
    67          <ProgressBar now={percent} />
    68          <div className="text-center">
    69            <small>
    70              {humanize.filesize(totalLoaded)} ({percent.toFixed(2)} %)
    71            </small>
    72          </div>
    73        </div>
    74      )
    75    }
    76  }
    77  
    78  const mapStateToProps = state => {
    79    return {
    80      uploads: state.uploads.files,
    81      showAbort: state.uploads.showAbortModal
    82    }
    83  }
    84  
    85  const mapDispatchToProps = dispatch => {
    86    return {
    87      showAbortModal: () => dispatch(uploadsActions.showAbortModal())
    88    }
    89  }
    90  
    91  export default connect(mapStateToProps, mapDispatchToProps)(UploadModal)