diff --git a/src/components/Contribute/Knowledge/UploadFile.tsx b/src/components/Contribute/Knowledge/UploadFile.tsx index 50876f6..b39f480 100644 --- a/src/components/Contribute/Knowledge/UploadFile.tsx +++ b/src/components/Contribute/Knowledge/UploadFile.tsx @@ -12,6 +12,8 @@ import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; import { FileRejection, DropEvent } from 'react-dropzone'; import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'; import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; +import { Spinner } from '@patternfly/react-core/dist/esm/components/Spinner'; +import './knowledge.css'; interface readFile { fileName: string; @@ -24,6 +26,7 @@ export const UploadFile: React.FunctionComponent<{ onFilesChange: (files: File[] const [currentFiles, setCurrentFiles] = useState([]); const [readFileData, setReadFileData] = useState([]); const [showStatus, setShowStatus] = useState(false); + const [isUploading, setIsUploading] = useState(false); const [statusIcon, setStatusIcon] = useState<'inProgress' | 'success' | 'danger'>('inProgress'); const [modalText, setModalText] = useState(''); @@ -53,6 +56,7 @@ export const UploadFile: React.FunctionComponent<{ onFilesChange: (files: File[] }; const handleFileDrop = (_event: DropEvent, droppedFiles: File[]) => { + setIsUploading(true); const currentFileNames = currentFiles.map((file) => file.name); const reUploads = droppedFiles.filter((file) => currentFileNames.includes(file.name)); @@ -70,6 +74,7 @@ export const UploadFile: React.FunctionComponent<{ onFilesChange: (files: File[] if (existingFile) { return prevReadFiles; } + setIsUploading(false); return [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]; }); }; @@ -126,6 +131,16 @@ export const UploadFile: React.FunctionComponent<{ onFilesChange: (files: File[] titleTextSeparator="or" infoText="Accepted file types: Markdown" /> +

+ {isUploading && ( + <> + +

+ Uploading files to taxonomy-knowledge-docs repo in your github account. +

+ + )} +

{showStatus && (