Merge remote-tracking branch 'origin/v3.4' into dev

interface/src/components/upload/SingleUpload.tsx

@@ -0,0 +1,86 @@
+import { FC, Fragment } from 'react';
+import { useDropzone, DropzoneState } from 'react-dropzone';
+
+import { Box, Button, LinearProgress, Theme, Typography, useTheme } from '@mui/material';
+
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import CancelIcon from '@mui/icons-material/Cancel';
+
+const progressPercentage = (progress: ProgressEvent) => Math.round((progress.loaded * 100) / progress.total);
+
+const getBorderColor = (theme: Theme, props: DropzoneState) => {
+  if (props.isDragAccept) {
+    return theme.palette.success.main;
+  }
+  if (props.isDragReject) {
+    return theme.palette.error.main;
+  }
+  if (props.isDragActive) {
+    return theme.palette.info.main;
+  }
+  return theme.palette.grey[700];
+};
+
+export interface SingleUploadProps {
+  onDrop: (acceptedFiles: File[]) => void;
+  onCancel: () => void;
+  accept?: string | string[];
+  uploading: boolean;
+  progress?: ProgressEvent;
+}
+
+const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, accept, uploading, progress }) => {
+  const dropzoneState = useDropzone({ onDrop, accept, disabled: uploading, multiple: false });
+  const { getRootProps, getInputProps } = dropzoneState;
+  const theme = useTheme();
+
+  const progressText = () => {
+    if (uploading) {
+      if (progress?.lengthComputable) {
+        return `Uploading: ${progressPercentage(progress)}%`;
+      }
+      return 'Uploading\u2026';
+    }
+    return 'Drop file or click here';
+  };
+
+  return (
+    <Box
+      {...getRootProps({
+        sx: {
+          py: 8,
+          px: 2,
+          borderWidth: 2,
+          borderRadius: 2,
+          borderStyle: 'dashed',
+          color: theme.palette.grey[700],
+          transition: 'border .24s ease-in-out',
+          width: '100%',
+          cursor: uploading ? 'default' : 'pointer',
+          borderColor: getBorderColor(theme, dropzoneState)
+        }
+      })}
+    >
+      <input {...getInputProps()} />
+      <Box flexDirection="column" display="flex" alignItems="center">
+        <CloudUploadIcon fontSize="large" />
+        <Typography variant="h6">{progressText()}</Typography>
+        {uploading && (
+          <Fragment>
+            <Box width="100%" p={2}>
+              <LinearProgress
+                variant={!progress || progress.lengthComputable ? 'determinate' : 'indeterminate'}
+                value={!progress ? 0 : progress.lengthComputable ? progressPercentage(progress) : 0}
+              />
+            </Box>
+            <Button startIcon={<CancelIcon />} variant="outlined" color="secondary" onClick={onCancel}>
+              Cancel
+            </Button>
+          </Fragment>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default SingleUpload;

interface/src/components/upload/index.ts

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

interface/src/components/upload/useFileUpload.ts

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useState } from 'react';
+import axios, { AxiosPromise, CancelTokenSource } from 'axios';
+import { useSnackbar } from 'notistack';
+
+import { extractErrorMessage } from '../../utils';
+import { FileUploadConfig } from '../../api/endpoints';
+
+interface MediaUploadOptions {
+  upload: (file: File, config?: FileUploadConfig) => AxiosPromise<void>;
+}
+
+const useFileUpload = ({ upload }: MediaUploadOptions) => {
+  const { enqueueSnackbar } = useSnackbar();
+  const [uploading, setUploading] = useState<boolean>(false);
+  const [uploadProgress, setUploadProgress] = useState<ProgressEvent>();
+  const [uploadCancelToken, setUploadCancelToken] = useState<CancelTokenSource>();
+
+  const resetUploadingStates = () => {
+    setUploading(false);
+    setUploadProgress(undefined);
+    setUploadCancelToken(undefined);
+  };
+
+  const cancelUpload = useCallback(() => {
+    uploadCancelToken?.cancel();
+    resetUploadingStates();
+  }, [uploadCancelToken]);
+
+  useEffect(() => {
+    return () => {
+      uploadCancelToken?.cancel();
+    };
+  }, [uploadCancelToken]);
+
+  const uploadFile = async (images: File[]) => {
+    try {
+      const cancelToken = axios.CancelToken.source();
+      setUploadCancelToken(cancelToken);
+      setUploading(true);
+      await upload(images[0], {
+        onUploadProgress: setUploadProgress,
+        cancelToken: cancelToken.token
+      });
+      resetUploadingStates();
+      enqueueSnackbar('Upload successful', { variant: 'success' });
+    } catch (error: any) {
+      if (axios.isCancel(error)) {
+        enqueueSnackbar('Upload aborted', { variant: 'warning' });
+      } else {
+        resetUploadingStates();
+        enqueueSnackbar(extractErrorMessage(error, 'Upload failed'), { variant: 'error' });
+      }
+    }
+  };
+
+  return [uploadFile, cancelUpload, uploading, uploadProgress] as const;
+};
+
+export default useFileUpload;