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 upload, except cancel

Browse Source
This commit is contained in:
Proddy
2023-07-01 17:01:08 +02:00
parent fb41606e43
commit 985da48947
12 changed files with 1168 additions and 1186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,13 +26,12 @@ const getBorderColor = (theme: Theme, props: DropzoneState) => {
export interface SingleUploadProps {
onDrop: (acceptedFiles: File[]) => void;
onCancel: () => void;
isUploading: boolean;
progress?: Progress;
// TODO remove
// progress?: AxiosProgressEvent;
progress: Progress;
}
const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, isUploading, progress }) => {
const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, progress }) => {
const isUploading = progress.total > 0;
const dropzoneState = useDropzone({
onDrop,
accept: {
@@ -43,20 +42,16 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, isUploading, pr
disabled: isUploading,
multiple: false
});
const { getRootProps, getInputProps } = dropzoneState;
const theme = useTheme();
const { LL } = useI18nContext();
// TODO remove debug
console.log('progress', progress?.loaded);
const progressText = () => {
if (isUploading) {
if (progress?.total) {
if (progress.total) {
return LL.UPLOADING() + ': ' + Math.round((progress.loaded * 100) / progress.total) + '%';
}
return LL.UPLOADING() + `\u2026`;
}
return LL.UPLOAD_DROP_TEXT();
};
@@ -86,8 +81,8 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, isUploading, pr
<Fragment>
<Box width="100%" p={2}>
<LinearProgress
variant={!progress || progress.total ? 'determinate' : 'indeterminate'}
value={!progress ? 0 : progress.total ? Math.round((progress.loaded * 100) / progress.total) : 0}
variant="determinate"
value={progress.total === 0 ? 0 : Math.round((progress.loaded * 100) / progress.total)}
/>
</Box>
<Button startIcon={<CancelIcon />} variant="outlined" color="secondary" onClick={onCancel}>

1
interface/src/components/upload/index.ts
View File

@@ -1,2 +1 @@
export { default as SingleUpload } from './SingleUpload';
export { default as useFileUpload } from './useFileUpload';

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

@@ -1,94 +0,0 @@
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 * 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) => Promise<void>;
}
const useFileUpload = ({ upload }: MediaUploadOptions) => {
const { LL } = useI18nContext();
// const [uploading, setUploading] = useState<boolean>(false);
const [md5, setMd5] = useState<string>('');
// 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);
setMd5('');
};
// const cancelUpload = useCallback(() => {
// uploadCancelToken?.cancel();
// resetUploadingStates();
// }, [uploadCancelToken]);
// useEffect(
// () => () => {
// uploadCancelToken?.cancel();
// },
// [uploadCancelToken]
// );
// TODO fileupload move to alova
// 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, uploading, md5] as const;
// return [uploadFile, cancelUpload, uploading, uploadProgress, md5] as const;
};
export default useFileUpload;