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

alova upload experiments

Browse Source
This commit is contained in:
proddy
2023-06-30 14:25:01 +02:00
parent d6c5c87412
commit fb41606e43
14 changed files with 489 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import { Box, Button, LinearProgress, Typography, useTheme } from '@mui/material
import { Fragment } from 'react';
import { useDropzone } from 'react-dropzone';
import type { Theme } from '@mui/material';
import type { AxiosProgressEvent } from 'axios';
import type { Progress } from 'alova';
import type { FC } from 'react';
import type { DropzoneState } from 'react-dropzone';
@@ -26,11 +26,13 @@ const getBorderColor = (theme: Theme, props: DropzoneState) => {
export interface SingleUploadProps {
onDrop: (acceptedFiles: File[]) => void;
onCancel: () => void;
uploading: boolean;
progress?: AxiosProgressEvent;
isUploading: boolean;
progress?: Progress;
// TODO remove
// progress?: AxiosProgressEvent;
}
const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, progress }) => {
const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, isUploading, progress }) => {
const dropzoneState = useDropzone({
onDrop,
accept: {
@@ -38,7 +40,7 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, prog
'application/json': ['.json'],
'text/plain': ['.md5']
},
disabled: uploading,
disabled: isUploading,
multiple: false
});
const { getRootProps, getInputProps } = dropzoneState;
@@ -46,8 +48,11 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, prog
const { LL } = useI18nContext();
// TODO remove debug
console.log('progress', progress?.loaded);
const progressText = () => {
if (uploading) {
if (isUploading) {
if (progress?.total) {
return LL.UPLOADING() + ': ' + Math.round((progress.loaded * 100) / progress.total) + '%';
}
@@ -68,7 +73,7 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, prog
color: theme.palette.grey[400],
transition: 'border .24s ease-in-out',
width: '100%',
cursor: uploading ? 'default' : 'pointer',
cursor: isUploading ? 'default' : 'pointer',
borderColor: getBorderColor(theme, dropzoneState)
}
})}
@@ -77,7 +82,7 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, prog
<Box flexDirection="column" display="flex" alignItems="center">
<CloudUploadIcon fontSize="large" />
<Typography variant="h6">{progressText()}</Typography>
{uploading && (
{isUploading && (
<Fragment>
<Box width="100%" p={2}>
<LinearProgress

112
interface/src/components/upload/useFileUpload.ts
View File

@@ -1,72 +1,94 @@
import axios from 'axios';
import { useRequest } from 'alova';
// import axios from 'axios';
import { useCallback, useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import type { FileUploadConfig } from 'api/endpoints';
import type { AxiosPromise, CancelTokenSource, AxiosProgressEvent } from 'axios';
// import type { FileUploadConfig } from 'api/endpoints';
// import type { AxiosPromise, CancelTokenSource, AxiosProgressEvent } from 'axios';
import * as SystemApi from 'api/system';
import { useI18nContext } from 'i18n/i18n-react';
interface MediaUploadOptions {
// TODO fileupload move to alova
upload: (file: File, config?: FileUploadConfig) => AxiosPromise<void>;
// upload: (file: File, config?: FileUploadConfig) => AxiosPromise<void>;
upload: (file: File) => Promise<void>;
}
const useFileUpload = ({ upload }: MediaUploadOptions) => {
const { LL } = useI18nContext();
const [uploading, setUploading] = useState<boolean>(false);
// const [uploading, setUploading] = useState<boolean>(false);
const [md5, setMd5] = useState<string>('');
const [uploadProgress, setUploadProgress] = useState<AxiosProgressEvent>();
const [uploadCancelToken, setUploadCancelToken] = useState<CancelTokenSource>();
// const [uploadProgress, setUploadProgress] = useState<AxiosProgressEvent>();
// const [uploadCancelToken, setUploadCancelToken] = useState<CancelTokenSource>();
const { uploading, send: sendUpload } = useRequest(SystemApi.uploadFile, {
immediate: false
});
const resetUploadingStates = () => {
setUploading(false);
setUploadProgress(undefined);
setUploadCancelToken(undefined);
// setUploading(false);
// setUploadProgress(undefined);
// setUploadCancelToken(undefined);
setMd5('');
};
const cancelUpload = useCallback(() => {
uploadCancelToken?.cancel();
resetUploadingStates();
}, [uploadCancelToken]);
// const cancelUpload = useCallback(() => {
// uploadCancelToken?.cancel();
// resetUploadingStates();
// }, [uploadCancelToken]);
useEffect(
() => () => {
uploadCancelToken?.cancel();
},
[uploadCancelToken]
);
// useEffect(
// () => () => {
// uploadCancelToken?.cancel();
// },
// [uploadCancelToken]
// );
// TODO fileupload move to alova
const uploadFile = async (images: File[]) => {
try {
const cancelToken = axios.CancelToken.source();
setUploadCancelToken(cancelToken);
setUploading(true);
const response = await upload(images[0], {
onUploadProgress: setUploadProgress,
cancelToken: cancelToken.token
});
resetUploadingStates();
if (response.status === 200) {
toast.success(LL.UPLOAD() + ' ' + LL.SUCCESSFUL());
} else if (response.status === 201) {
setMd5(String(response.data));
toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
}
} catch (error) {
if (axios.isCancel(error)) {
toast.warning(LL.UPLOAD() + ' ' + LL.ABORTED());
} else {
resetUploadingStates();
toast.error(LL.UPLOAD() + ' ' + LL.FAILED(0));
}
}
// TODO make it single file
const uploadFile = async (files: File[]) => {
// TODO remove debug
console.log('useFileUpload.ts:uploadFile:' + files[0].name, files[0].size);
await sendUpload(files[0]);
// const response = await SystemApi.startUploadFile(files[0]);
// console.log(response.status);
// const response = await upload(files[0], {
// onUploadProgress: setUploadProgress,
// cancelToken: cancelToken.token
// });
// try {
// const cancelToken = axios.CancelToken.source();
// setUploadCancelToken(cancelToken);
// setUploading(true);
// const response = await upload(images[0], {
// onUploadProgress: setUploadProgress,
// cancelToken: cancelToken.token
// });
// resetUploadingStates();
// if (response.status === 200) {
// toast.success(LL.UPLOAD() + ' ' + LL.SUCCESSFUL());
// } else if (response.status === 201) {
// setMd5(String(response.data));
// toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
// }
// } catch (error) {
// if (axios.isCancel(error)) {
// toast.warning(LL.UPLOAD() + ' ' + LL.ABORTED());
// } else {
// resetUploadingStates();
// toast.error(LL.UPLOAD() + ' ' + LL.FAILED(0));
// }
// }
};
return [uploadFile, cancelUpload, uploading, uploadProgress, md5] as const;
return [uploadFile, uploading, md5] as const;
// return [uploadFile, cancelUpload, uploading, uploadProgress, md5] as const;
};
export default useFileUpload;