diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
index 2a455b357117c84dc2c8703294e2dbdadb02bbcb..d479a6ccec46f62df37028bc0cc04ac771a787ba 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
@@ -261,8 +261,8 @@ function Directory({
)}
</div>
{amountSelected !== 0 && (
- <div className="absolute bottom-[12px] left-0 right-0 flex justify-center">
- <div className="mx-auto bg-white/40 rounded-lg py-1 px-2">
+ <div className="absolute bottom-[12px] left-0 right-0 flex justify-center pointer-events-none">
+ <div className="mx-auto bg-white/40 rounded-lg py-1 px-2 pointer-events-auto">
<div className="flex flex-row items-center gap-x-2">
<button
onClick={moveToWorkspace}
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
index e1f4651eb74e24929d445a07018c96c71bf0ef8b..104d45a166241b9338cf547e028cd51d249b8459 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
@@ -7,7 +7,9 @@ import PreLoader from "../../../../../Preloader";
function FileUploadProgressComponent({
slug,
+ uuid,
file,
+ setFiles,
rejected = false,
reason = null,
onUploadSuccess,
@@ -18,6 +20,19 @@ function FileUploadProgressComponent({
const [timerMs, setTimerMs] = useState(10);
const [status, setStatus] = useState("pending");
const [error, setError] = useState("");
+ const [isFadingOut, setIsFadingOut] = useState(false);
+
+ const fadeOut = (cb) => {
+ setIsFadingOut(true);
+ cb?.();
+ };
+
+ const beginFadeOut = () => {
+ setIsFadingOut(false);
+ setFiles((prev) => {
+ return prev.filter((item) => item.uid !== uuid);
+ });
+ };
useEffect(() => {
async function uploadFile() {
@@ -44,13 +59,22 @@ function FileUploadProgressComponent({
clearInterval(timer);
onUploadSuccess();
}
+
+ // Begin fadeout timer to clear uploader queue.
+ setTimeout(() => {
+ fadeOut(() => setTimeout(() => beginFadeOut(), 300));
+ }, 5000);
}
!!file && !rejected && uploadFile();
}, []);
if (rejected) {
return (
- <div className="h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40">
+ <div
+ className={`${
+ isFadingOut ? "file-upload-fadeout" : "file-upload"
+ } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40`}
+ >
<div className="w-6 h-6 flex-shrink-0">
<XCircle className="w-6 h-6 stroke-white bg-red-500 rounded-full p-1 w-full h-full" />
</div>
@@ -66,7 +90,11 @@ function FileUploadProgressComponent({
if (status === "failed") {
return (
- <div className="h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40 overflow-y-auto">
+ <div
+ className={`${
+ isFadingOut ? "file-upload-fadeout" : "file-upload"
+ } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40 overflow-y-auto`}
+ >
<div className="w-6 h-6 flex-shrink-0">
<XCircle className="w-6 h-6 stroke-white bg-red-500 rounded-full p-1 w-full h-full" />
</div>
@@ -81,7 +109,11 @@ function FileUploadProgressComponent({
}
return (
- <div className="h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40">
+ <div
+ className={`${
+ isFadingOut ? "file-upload-fadeout" : "file-upload"
+ } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40`}
+ >
<div className="w-6 h-6 flex-shrink-0">
{status !== "complete" ? (
<div className="flex items-center justify-center">
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
index e57997a830c46de9d823f504e1b8d4e6ee656c9c..8996829c1f4e43c690caebde532a602f8716de27 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
@@ -6,6 +6,7 @@ import { useDropzone } from "react-dropzone";
import { v4 } from "uuid";
import FileUploadProgress from "./FileUploadProgress";
import Workspace from "../../../../../models/workspace";
+import debounce from "lodash.debounce";
export default function UploadFile({
workspace,
@@ -39,14 +40,9 @@ export default function UploadFile({
setFetchingUrl(false);
};
- const handleUploadSuccess = () => {
- fetchKeys(true);
- showToast("File uploaded successfully", "success", { clear: true });
- };
-
- const handleUploadError = (message) => {
- showToast(`Error uploading file: ${message}`, "error");
- };
+ // Don't spam fetchKeys, wait 1s between calls at least.
+ const handleUploadSuccess = debounce(() => fetchKeys(true), 1000);
+ const handleUploadError = (_msg) => null; // stubbed.
const onDrop = async (acceptedFiles, rejections) => {
const newAccepted = acceptedFiles.map((file) => {
@@ -115,6 +111,8 @@ export default function UploadFile({
<FileUploadProgress
key={file.uid}
file={file.file}
+ uuid={file.uid}
+ setFiles={setFiles}
slug={workspace.slug}
rejected={file?.rejected}
reason={file?.reason}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e5066f6792e6f1b9688a2cefb45679929d948a09..35159b3f1baaa32c3b43fff9d1d104ae753d9cf8 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -692,3 +692,53 @@ does not extend the close button beyond the viewport. */
.text-tremor-content {
padding-bottom: 10px;
}
+
+.file-upload {
+ -webkit-animation: fadein 0.3s linear forwards;
+ animation: fadein 0.3s linear forwards;
+}
+
+.file-upload-fadeout {
+ -webkit-animation: fadeout 0.3s linear forwards;
+ animation: fadeout 0.3s linear forwards;
+}
+
+@-webkit-keyframes fadein {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadein {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes fadeout {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes fadeout {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}