diff --git a/gui/src/components/editQuantity/FileEditQuantity.js b/gui/src/components/editQuantity/FileEditQuantity.js index 6f8e872696b9f2602f831138830967c3d92d049f..cb40f883e114992ae42dad8c8be8efc120c98bab 100644 --- a/gui/src/components/editQuantity/FileEditQuantity.js +++ b/gui/src/components/editQuantity/FileEditQuantity.js @@ -26,6 +26,7 @@ import { useApi } from '../api' import { ItemButton } from '../archive/Browser' import { useEntryStore } from '../entry/EntryContext' import OverwriteExistingFileDialog from './OverwriteExistingFileDialog' +import UploadProgressDialog from '../uploads/UploadProgressDialog' const useFileEditQuantityStyles = makeStyles(theme => ({ dropzone: { @@ -47,6 +48,7 @@ const FileEditQuantity = React.memo(props => { const {api} = useApi() const [askForOverwrite, setAskForOverwrite] = useState(false) const dropedFiles = useRef([]) + const [uploading, setUploading] = useState(null) const uploadFile = useCallback((file, overwrite = false) => { const mainfilePathSegments = metadata.mainfile.split('/') @@ -62,12 +64,16 @@ const FileEditQuantity = React.memo(props => { `/uploads/${uploadId}/raw/${mainfileDirEncoded}?wait_for_processing=true&overwrite_if_exists=${overwrite}`, formData, { onUploadProgress: (progressEvent) => { - // TODO: would be nice to show progress somehow + const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total) + setUploading(percentCompleted) } } ) .then(response => resolve({response, fullPath})) .catch(error => reject(error)) + .finally(() => { + setUploading(null) + }) }) }, [api, uploadId, metadata]) @@ -119,6 +125,7 @@ const FileEditQuantity = React.memo(props => { return ( <div {...getRootProps({className: dropzoneClassName})}> + <UploadProgressDialog uploading={uploading} /> <input {...getInputProps()} /> <TextField value={value || ''} onChange={handleChange} diff --git a/gui/src/components/uploads/UploadOverview.js b/gui/src/components/uploads/UploadOverview.js index b1d91af274d1fde072b7fafc545bafb0c57345cf..40ed175ad30a85359ced816504c0c69b294c76cf 100644 --- a/gui/src/components/uploads/UploadOverview.js +++ b/gui/src/components/uploads/UploadOverview.js @@ -19,7 +19,7 @@ import React, { useEffect, useState, useCallback } from 'react' import PropTypes from 'prop-types' import { makeStyles, Step, StepContent, StepLabel, Stepper, Typography, Link, Button, Tooltip, Box, Grid, FormControl, InputLabel, Select, MenuItem, FormHelperText, - Input, DialogTitle, DialogContent, Dialog, LinearProgress, IconButton, Accordion, AccordionSummary, AccordionDetails} from '@material-ui/core' + Input, DialogTitle, DialogContent, Dialog, IconButton, Accordion, AccordionSummary, AccordionDetails} from '@material-ui/core' import { useDropzone } from 'react-dropzone' import UploadIcon from '@material-ui/icons/CloudUpload' import ExpandMoreIcon from '@material-ui/icons/ExpandMore' @@ -51,6 +51,7 @@ import {formatTimestamp} from '../../utils' import DialogLink from '../utils/DialogLink' import UploadName from './UploadName' import DeletingReferencesTable from './DeletingReferencesTable' +import UploadProgressDialog from './UploadProgressDialog' const useDropButtonStyles = makeStyles(theme => ({ dropzone: { @@ -210,22 +211,6 @@ PublishUpload.propTypes = { onPublish: PropTypes.func } -function LinearProgressWithLabel(props) { - return ( - <Box display="flex" alignItems="center"> - <Box width="100%" mr={1}> - <LinearProgress variant="determinate" {...props} /> - </Box> - <Typography variant="body2" color="textSecondary">{`${Math.round( - props.value - )}%`}</Typography> - </Box> - ) -} -LinearProgressWithLabel.propTypes = { - value: PropTypes.number.isRequired -} - function ProcessingStatus({data}) { const {pagination, upload, processing_successful, processing_failed} = data let mainMessage = null @@ -400,14 +385,7 @@ function UploadOverview(props) { return ( <Page limitedWidth> - {(uploading || uploading === 0) && <Dialog open> - <DialogTitle>Uploading file ...</DialogTitle> - <DialogContent> - <Box width={300}> - <LinearProgressWithLabel value={uploading} /> - </Box> - </DialogContent> - </Dialog>} + <UploadProgressDialog uploading={uploading} /> <Grid container spacing={2} alignItems="center"> <Grid item> <UploadStatus upload={upload} fontSize="large" /> diff --git a/gui/src/components/uploads/UploadProgressDialog.js b/gui/src/components/uploads/UploadProgressDialog.js new file mode 100644 index 0000000000000000000000000000000000000000..5403c6f3c3f433adc3a06de7ffcce8e745631af8 --- /dev/null +++ b/gui/src/components/uploads/UploadProgressDialog.js @@ -0,0 +1,54 @@ +/* + * Copyright The NOMAD Authors. + * + * This file is part of NOMAD. See https://nomad-lab.eu for further info. + * + * 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 PropTypes from 'prop-types' +import { Typography, Box, DialogTitle, DialogContent, Dialog, LinearProgress} from '@material-ui/core' + +function LinearProgressWithLabel(props) { + return ( + <Box display="flex" alignItems="center"> + <Box width="100%" mr={1}> + <LinearProgress variant="determinate" {...props} /> + </Box> + <Typography variant="body2" color="textSecondary">{`${Math.round( + props.value + )}%`}</Typography> + </Box> + ) +} +LinearProgressWithLabel.propTypes = { + value: PropTypes.number.isRequired +} + +export default function UploadProgressDialog({uploading}) { + if (uploading || uploading === 0) { + return (<Dialog open> + <DialogTitle>Uploading file ...</DialogTitle> + <DialogContent> + <Box width={300}> + <LinearProgressWithLabel value={uploading} /> + </Box> + </DialogContent> + </Dialog>) + } + return null +} + +UploadProgressDialog.propTypes = { + uploading: PropTypes.number.isRequired +}