+ {uploadTasks.map((task) => {
+ const shouldShowProgress = [
+ 'preparing',
+ 'uploading',
+ 'training',
+ ].includes(task.status);
+ const rawProgress = Math.min(Math.max(task.progress ?? 0, 0), 100);
+ const formattedProgress = Math.round(rawProgress);
+ const progressOffset = PROGRESS_CIRCUMFERENCE * (1 - rawProgress / 100);
+ const isCollapsed = collapsedTasks[task.id] ?? false;
+
+ return (
+
+ );
+}
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 19170c2d..72e6a7f2 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
+import { nanoid } from '@reduxjs/toolkit';
import { useDropzone } from 'react-dropzone';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
@@ -24,6 +25,8 @@ import {
getIngestorSchema,
IngestorOption,
} from '../upload/types/ingestor';
+import { addUploadTask, updateUploadTask } from './uploadSlice';
+
import { FormField, IngestorConfig, IngestorType } from './types/ingestor';
import { FilePicker } from '../components/FilePicker';
@@ -259,15 +262,8 @@ function Upload({
config: {},
}));
- const [progress, setProgress] = useState<{
- type: 'UPLOAD' | 'TRAINING';
- percentage: number;
- taskId?: string;
- failed?: boolean;
- }>();
-
const { t } = useTranslation();
- const setTimeoutRef = useRef
+
+ );
+ })}
+
+ {uploadTasks.some(
+ (task) => task.status === 'completed' || task.status === 'failed',
+ ) && (
+
+ )}
+
+
+
+
+
+ + {getStatusHeading(task.status)} +
+
+
+ {(task.status === 'completed' ||
+ task.status === 'failed') && (
+
+ )}
+
+
+
+
+
+
+
+
+ {task.status === 'failed' && task.errorMessage && (
+
+ {task.errorMessage}
+
+ )}
+ + {task.fileName} +
+ +
+ {shouldShowProgress && (
+
+ )}
+
+ {task.status === 'completed' && (
+
+ )}
+
+ {task.status === 'failed' && (
+
+ )}
+
+
-
- );
- }
+ const handleTaskFailure = useCallback(
+ (clientTaskId: string, errorMessage?: string) => {
+ dispatch(
+ updateUploadTask({
+ id: clientTaskId,
+ updates: {
+ status: 'failed',
+ errorMessage: errorMessage || t('attachments.uploadFailed'),
+ },
+ }),
+ );
+ },
+ [dispatch, t],
+ );
- function Progress({
- title,
- isCancellable = false,
- isFailed = false,
- isTraining = false,
- }: {
- title: string;
- isCancellable?: boolean;
- isFailed?: boolean;
- isTraining?: boolean;
- }) {
- return (
-
-
-
-
-
- {progressPercent}%
-
-
-
-
- );
- }
+ const trackTraining = useCallback(
+ (backendTaskId: string, clientTaskId: string) => {
+ let timeoutId: number | null = null;
- function UploadProgress() {
- return ;
- }
-
- function TrainingProgress() {
- const dispatch = useDispatch();
-
- useEffect(() => {
- let timeoutID: number | undefined;
-
- if ((progress?.percentage ?? 0) < 100) {
- timeoutID = setTimeout(() => {
- userService
- .getTaskStatus(progress?.taskId as string, null)
- .then((data) => data.json())
- .then((data) => {
- if (data.status == 'SUCCESS') {
- if (data.result.limited === true) {
- getDocs(token).then((data) => {
- dispatch(setSourceDocs(data));
- dispatch(
- setSelectedDocs(
- Array.isArray(data) &&
- data?.find(
- (d: Doc) => d.type?.toLowerCase() === 'local',
- ),
- ),
- );
- });
- setProgress(
- (progress) =>
- progress && {
- ...progress,
- percentage: 100,
- failed: true,
- },
- );
- } else {
- getDocs(token).then((data) => {
- dispatch(setSourceDocs(data));
- const docIds = new Set(
- (Array.isArray(sourceDocs) &&
- sourceDocs?.map((doc: Doc) =>
- doc.id ? doc.id : null,
- )) ||
- [],
- );
- if (data && Array.isArray(data)) {
- data.map((updatedDoc: Doc) => {
- if (updatedDoc.id && !docIds.has(updatedDoc.id)) {
- // Select the doc not present in the intersection of current Docs and fetched data
- dispatch(setSelectedDocs(updatedDoc));
- return;
- }
- });
- }
- });
- setProgress(
- (progress) =>
- progress && {
- ...progress,
- percentage: 100,
- failed: false,
- },
- );
- setIngestor({ type: null, name: '', config: {} });
- setfiles([]);
- setProgress(undefined);
- setModalState('INACTIVE');
- onSuccessfulUpload?.();
- }
- } else if (data.status == 'PROGRESS') {
- setProgress(
- (progress) =>
- progress && {
- ...progress,
- percentage: data.result.current,
- },
- );
+ const poll = () => {
+ userService
+ .getTaskStatus(backendTaskId, null)
+ .then((response) => response.json())
+ .then(async (data) => {
+ if (data.status === 'SUCCESS') {
+ if (timeoutId !== null) {
+ clearTimeout(timeoutId);
+ timeoutId = null;
}
- });
- }, 5000);
- }
- // cleanup
- return () => {
- if (timeoutID !== undefined) {
- clearTimeout(timeoutID);
- }
+ const docs = await getDocs(token);
+ dispatch(setSourceDocs(docs));
+
+ if (Array.isArray(docs)) {
+ const existingDocIds = new Set(
+ (Array.isArray(sourceDocs) ? sourceDocs : [])
+ .map((doc: Doc) => doc?.id)
+ .filter((id): id is string => Boolean(id)),
+ );
+ const newDoc = docs.find(
+ (doc: Doc) => doc.id && !existingDocIds.has(doc.id),
+ );
+ if (newDoc) {
+ dispatch(setSelectedDocs(newDoc));
+ }
+ }
+
+ if (data.result?.limited) {
+ dispatch(
+ updateUploadTask({
+ id: clientTaskId,
+ updates: {
+ status: 'failed',
+ progress: 100,
+ errorMessage: t('modals.uploadDoc.progress.tokenLimit'),
+ },
+ }),
+ );
+ } else {
+ dispatch(
+ updateUploadTask({
+ id: clientTaskId,
+ updates: {
+ status: 'completed',
+ progress: 100,
+ errorMessage: undefined,
+ },
+ }),
+ );
+ onSuccessfulUpload?.();
+ }
+ } else if (data.status === 'FAILURE') {
+ if (timeoutId !== null) {
+ clearTimeout(timeoutId);
+ timeoutId = null;
+ }
+ handleTaskFailure(clientTaskId, data.result?.message);
+ } else if (data.status === 'PROGRESS') {
+ dispatch(
+ updateUploadTask({
+ id: clientTaskId,
+ updates: {
+ status: 'training',
+ progress: Math.min(100, data.result?.current ?? 0),
+ },
+ }),
+ );
+ timeoutId = window.setTimeout(poll, 5000);
+ } else {
+ timeoutId = window.setTimeout(poll, 5000);
+ }
+ })
+ .catch(() => {
+ if (timeoutId !== null) {
+ clearTimeout(timeoutId);
+ timeoutId = null;
+ }
+ handleTaskFailure(clientTaskId);
+ });
};
- }, [progress, dispatch]);
- return (
-
- );
- }
+
+ timeoutId = window.setTimeout(poll, 3000);
+ },
+ [dispatch, handleTaskFailure, onSuccessfulUpload, sourceDocs, t, token],
+ );
const onDrop = useCallback(
(acceptedFiles: File[]) => {
@@ -483,7 +411,7 @@ function Upload({
const doNothing = () => undefined;
- const uploadFile = () => {
+ const uploadFile = (clientTaskId: string) => {
const formData = new FormData();
files.forEach((file) => {
formData.append('file', file);
@@ -491,34 +419,89 @@ function Upload({
formData.append('name', ingestor.name);
formData.append('user', 'local');
+
const apiHost = import.meta.env.VITE_API_HOST;
const xhr = new XMLHttpRequest();
+
+ dispatch(
+ updateUploadTask({
+ id: clientTaskId,
+ updates: { status: 'uploading', progress: 0 },
+ }),
+ );
+
xhr.upload.addEventListener('progress', (event) => {
- const progress = +((event.loaded / event.total) * 100).toFixed(2);
- setProgress({ type: 'UPLOAD', percentage: progress });
+ if (!event.lengthComputable) return;
+ const progressPercentage = Number(
+ ((event.loaded / event.total) * 100).toFixed(2),
+ );
+ dispatch(
+ updateUploadTask({
+ id: clientTaskId,
+ updates: { progress: progressPercentage },
+ }),
+ );
});
+
xhr.onload = () => {
- const { task_id } = JSON.parse(xhr.responseText);
- setTimeoutRef.current = setTimeout(() => {
- setProgress({ type: 'TRAINING', percentage: 0, taskId: task_id });
- }, 3000);
+ if (xhr.status >= 200 && xhr.status < 300) {
+ try {
+ const parsed = JSON.parse(xhr.responseText) as { task_id?: string };
+ if (parsed.task_id) {
+ dispatch(
+ updateUploadTask({
+ id: clientTaskId,
+ updates: {
+ taskId: parsed.task_id,
+ status: 'training',
+ progress: 0,
+ },
+ }),
+ );
+ trackTraining(parsed.task_id, clientTaskId);
+ } else {
+ dispatch(
+ updateUploadTask({
+ id: clientTaskId,
+ updates: { status: 'completed', progress: 100 },
+ }),
+ );
+ onSuccessfulUpload?.();
+ }
+ } catch (error) {
+ handleTaskFailure(clientTaskId);
+ }
+ } else {
+ handleTaskFailure(clientTaskId, xhr.statusText || undefined);
+ }
};
- xhr.open('POST', `${apiHost + '/api/upload'}`);
+
+ xhr.onerror = () => {
+ handleTaskFailure(clientTaskId);
+ };
+
+ xhr.open('POST', `${apiHost}/api/upload`);
xhr.setRequestHeader('Authorization', `Bearer ${token}`);
xhr.send(formData);
};
- const uploadRemote = () => {
- if (!ingestor.type) return;
+ const uploadRemote = (clientTaskId: string) => {
+ if (!ingestor.type) {
+ handleTaskFailure(clientTaskId);
+ return;
+ }
+
const formData = new FormData();
formData.append('name', ingestor.name);
formData.append('user', 'local');
formData.append('source', ingestor.type as string);
- let configData: any = {};
-
const ingestorSchema = getIngestorSchema(ingestor.type as IngestorType);
- if (!ingestorSchema) return;
+ if (!ingestorSchema) {
+ handleTaskFailure(clientTaskId);
+ return;
+ }
+
const schema: FormField[] = ingestorSchema.fields;
const hasLocalFilePicker = schema.some(
(field: FormField) => field.type === 'local_file_picker',
@@ -530,11 +513,12 @@ function Upload({
(field: FormField) => field.type === 'google_drive_picker',
);
+ let configData: Record- {isTraining && - (progress?.percentage === 100 - ? t('modals.uploadDoc.progress.completed') - : title)} - {!isTraining && title} -
-{t('modals.uploadDoc.progress.wait')}
-- {t('modals.uploadDoc.progress.tokenLimit')} -
- {/*{progress?.percentage || 0}%
*/} -
{!ingestor.type && (
- );
- }
-
- return (
- @@ -816,23 +876,7 @@ function Upload({
{activeTab && ingestor.type && (