andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 16:29:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix progress bar when uploading

Browse Source
This commit is contained in:
Proddy
2023-07-02 10:12:31 +02:00
parent 9b21607da5
commit 34113c3698
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
interface/src/components/upload/SingleUpload.tsx
View File

@@ -26,11 +26,12 @@ const getBorderColor = (theme: Theme, props: DropzoneState) => {
export interface SingleUploadProps { export interface SingleUploadProps {
onDrop: (acceptedFiles: File[]) => void; onDrop: (acceptedFiles: File[]) => void;
onCancel: () => void; onCancel: () => void;
isUploading: boolean;
progress: Progress; progress: Progress;
} }
const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, progress }) => { const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, isUploading, progress }) => {
const isUploading = progress.total > 0; const uploading = isUploading && progress.total > 0;
const dropzoneState = useDropzone({ const dropzoneState = useDropzone({
onDrop, onDrop,
@@ -48,7 +49,7 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, progress }) =>
const { LL } = useI18nContext(); const { LL } = useI18nContext();
const progressText = () => { const progressText = () => {
if (isUploading) { if (uploading) {
if (progress.total) { if (progress.total) {
return LL.UPLOADING() + ': ' + Math.round((progress.loaded * 100) / progress.total) + '%'; return LL.UPLOADING() + ': ' + Math.round((progress.loaded * 100) / progress.total) + '%';
} }
@@ -68,7 +69,7 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, progress }) =>
color: theme.palette.grey[400], color: theme.palette.grey[400],
transition: 'border .24s ease-in-out', transition: 'border .24s ease-in-out',
width: '100%', width: '100%',
cursor: isUploading ? 'default' : 'pointer', cursor: uploading ? 'default' : 'pointer',
borderColor: getBorderColor(theme, dropzoneState) borderColor: getBorderColor(theme, dropzoneState)
} }
})} })}
@@ -77,7 +78,7 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, progress }) =>
<Box flexDirection="column" display="flex" alignItems="center"> <Box flexDirection="column" display="flex" alignItems="center">
<CloudUploadIcon fontSize="large" /> <CloudUploadIcon fontSize="large" />
<Typography variant="h6">{progressText()}</Typography> <Typography variant="h6">{progressText()}</Typography>
{isUploading && ( {uploading && (
<Fragment> <Fragment>
<Box width="100%" p={2}> <Box width="100%" p={2}>
<LinearProgress <LinearProgress

3
interface/src/framework/system/UploadFileForm.tsx
View File

@@ -45,7 +45,6 @@ const UploadFileForm: FC = () => {
setMd5(data.md5); setMd5(data.md5);
toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL()); toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
} else { } else {
toast.success(LL.UPLOAD() + ' ' + LL.SUCCESSFUL());
setRestarting(true); setRestarting(true);
} }
}); });
@@ -123,7 +122,7 @@ const UploadFileForm: FC = () => {
<Typography variant="body2">{'MD5: ' + md5}</Typography> <Typography variant="body2">{'MD5: ' + md5}</Typography>
</Box> </Box>
)} )}
<SingleUpload onDrop={startUpload} onCancel={cancelUpload} progress={progress} /> <SingleUpload onDrop={startUpload} onCancel={cancelUpload} isUploading={isUploading} progress={progress} />
{!isUploading && ( {!isUploading && (
<> <>
<Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary"> <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">