Skip to content

Update error toast when user tries to drop open file into chat window #1491

Description

@Xeelee33

When a user tries to drop a file that's open in another app into the chat window, a vague error toast pops up in the upper right that doesn't provide enough information.

Image

Trying to upload the same file via the paperclip icon provides much more helpful error:

Image

Suggested fix - make changes similar to the below to application/single_app/static/js/chat/chat-input-actions.js to give the user a clearer message about what went wrong.)

More helpful error message:

Image

New async function

  const fileName = String(file?.name || "selected file").trim() || "selected file";

  try {
    await file.slice(0, Math.min(file.size, 1)).arrayBuffer();
  } catch (error) {
    throw new Error(
      `The browser could not read "${fileName}". Close the file in other apps then try again.`
    );
  }
}

Updated uploadFileToConversation function:

export async function uploadFileToConversation(file) {
  let uploadingIndicatorEl = null;

  try {
    await ensureUploadFileIsReadable(file);
    const groupUploadContext = await resolveGroupUploadContext();
    uploadingIndicatorEl = showFileUploadingMessage();

    // Update the file button to show "Uploading..." state
    const fileBtn = document.getElementById("choose-file-btn");
    if (fileBtn) {
      const fileBtnText = fileBtn.querySelector(".file-btn-text");
      if (fileBtnText) {
        fileBtnText.textContent = "Uploading...";
      }
    }

    const formData = new FormData();
    formData.append("file", file);
    formData.append("conversation_id", currentConversationId);
    if (groupUploadContext) {
      formData.append("group_upload_target_id", groupUploadContext.selectedGroupId);
      groupUploadContext.groupIds.forEach((groupId) => {
        formData.append("upload_scope_group_ids", groupId);
      });
    }

    let response;
    try {
      response = await fetch("/upload", {
        method: "POST",
        body: formData,
      });
    } catch (error) {
      if (error instanceof TypeError) {
        const fileName = String(file?.name || "selected file").trim() || "selected file";
        throw new Error(
          `The browser could not upload "${fileName}". The file may be open in another app, unavailable from cloud storage, or the network connection may have been interrupted. Ensure the file is closed and then try again.`
        );
      }
      throw error;
    }

    hideFileUploadingMessage(uploadingIndicatorEl);
    uploadingIndicatorEl = null;

    const data = await response.json();
    if (!response.ok) {
      console.error("Upload failed:", data.error || "Unknown error");
      throw new Error(data.error || "Upload failed");
    }

    if (data.conversation_id) {
      const uploadedConversationId = data.conversation_id;
      currentConversationId = uploadedConversationId;
      window.currentConversationId = uploadedConversationId;

      // If a title was returned and it's different from "New Conversation",
      // update the conversation title in the UI
      if (data.title && data.title !== "New Conversation") {
        const currentConversationTitleEl = document.getElementById("current-conversation-title");
        if (currentConversationTitleEl) {
          currentConversationTitleEl.textContent = data.title;
        }
      }

      const isCollaborationUpload = Boolean(
        data.is_collaboration_upload
        || window.chatCollaboration?.isCollaborationConversation?.(uploadedConversationId)
      );
      const loadMessagesPromise = isCollaborationUpload && window.chatCollaboration?.activateConversation
        ? window.chatCollaboration.activateConversation(uploadedConversationId)
        : loadMessages(uploadedConversationId);
      if (data.workspace_document_id) {
        registerConversationTaskDocument({
          ...(data.workspace_document || {}),
          id: data.workspace_document_id,
          conversation_id: uploadedConversationId,
          scope: data.workspace_scope,
          status: data.workspace_document?.status || 'Queued for processing',
          percentage_complete: data.workspace_document?.percentage_complete || 0,
          ready: false,
        });
        activateUserWorkspaceContextForChatUpload();
        Promise.resolve(loadMessagesPromise).finally(() => {
          watchChatWorkspaceUploadDocument(data.workspace_document_id, {
            autoSelect: true,
            workspaceScope: data.workspace_scope,
            groupId: data.workspace_document?.group_id || data.group_upload_target?.id || null,
          });
        });
      }
      loadConversations();
    } else {
      console.error("No conversation_id returned from server.");
      showToast("Error: No conversation ID returned from server.", "danger");
    }
    resetFileButton();
  } catch (error) {
    console.error("Error:", error);
    if (!error.isUploadSelectionCancelled) {
      showToast("Error uploading file: " + error.message, "danger");
    }
    resetFileButton();
    if (uploadingIndicatorEl) {
      hideFileUploadingMessage(uploadingIndicatorEl);
    }
  }
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions