Import feature broken?

[gitck-scch]

Bug Description

For me the import of json files (flows or components) does not work over the user interface of langflow. The system claims that upload was successful in the Notification dialog, but imported flows and components are not available/visible at the UI.

I tried to investigate the reasons for that and there seems to be some timing or focus issues when trying to import existing flows or components (I tried it with different browsers - same behavior, I tried direct installation of langflow and running as docker container - same behavior).

If I set the breakpoints as in the image below the probability that the import is available in the UI after selecting the file via the file explorer is much higher (it works at least sometimes).

Reproduction

I think it is not possible to reproduce this issue, if you do not have this behavior already.

I'm running langflow on:
Windows 10 Enterprise build 19045

1. Clicking on the Upload Folder icon opens file explorer to select a *.json file (and yes, I also tried it with different files).
   
2. Selecting a file and selection 'Open' closes file explorer.
3. Notification "Uploaded successfully" is show
4. But there is no 'flow' (or component) added to the UI, and also not persisted in the database

Expected behavior

The import feature should work realiable, or at least do not claim that upload was successful as long as it is not saved with a project sucessfully.

Who can help?

No response

Operating System

Windows 10

Langflow Version

1.0.18

Python Version

3.12

Screenshot

No response

Flow File

any flow or component file (does not depend on a specific file)

[dosubot]

Hello @gitck-scch! I'm here to help you with any issues you're experiencing. I'm a bot that can assist you in solving bugs, answering questions, and becoming a contributor. Let me know how I can assist you with the import feature issue you've encountered.

The issue you're experiencing with the import feature in Langflow might be related to a timing or focus problem during the file upload process. The error message you mentioned, Uncaught (in promise) NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node, suggests that there might be an issue with how the file input element is being handled in the DOM.

Here are a few things you could try to troubleshoot or mitigate the issue:

1. Check for Updates: Ensure you are using the latest version of Langflow, as updates might contain bug fixes for this issue.

2. Console Errors: Monitor the browser console for any additional errors or warnings that might provide more context.

3. Debugging: Since setting breakpoints seems to affect the behavior, it might be worth investigating if there are race conditions or asynchronous issues in the code handling the file upload.

4. Alternative Browsers: Although you've tried different browsers, ensure they are up-to-date, as browser-specific issues can sometimes cause unexpected behavior.

5. File Validation: Double-check that the JSON files are correctly formatted and compatible with Langflow.

If the issue persists, it might require a deeper dive into the codebase to identify and fix the underlying problem.

To continue talking to Dosu, mention @dosu.

[Cristhianzl]

hi @gitck-scch, hope you are doing well!

I tested the upload functionality for Flows, Components, and Folders, both locally and in Docker Compose, and everything worked as expected.

Are you downloading the Flow and Folder from Langflow? The JSON file needs to follow the required structure for it to work properly.

Could you share the JSON file you're trying to upload? This will help me investigate further.

Thanks!

[gitck-scch]

Hi @Cristhianzl,
yes, I use the orginal image v1.0.18 pulled from https://hub.docker.com/r/langflowai/langflow.
And this problem doesn't have anything to do with the used json-file, because I have tried different ones. For example I'm also not able to import the unchanged "Basic Prompt" example previously exported (but this exported flow can be imported on another system without any problem).

I think this problem won't be reproducable on your machine. Therefore I propose that someone with deep understanding of the code should take a look into this asynchronous calls, whether there might be the possibility of a race condition. At least in my point of view this might me a valid cause for the observed behaviour. Why it's just affecting my system, that is the interesting question.

Thanks for your help!

[Cristhianzl]

Hi @gitck-scch,

I understand the issue you're facing, and it does sound tricky. Ideally, the error should be reproducible for anyone, but it might be specific to your environment. What are your thoughts on that?

The error, "failed to execute 'RemoveChild' on 'Node': the node to be removed is not a child of this node," can occur when:

The input element is either not properly appended to the DOM, or
It's removed before removeChild is called.

Alternatively, the cleanup() function could be called multiple times, causing the issue.

To prevent this, we can add a check before attempting to remove the element to ensure it still exists in the DOM.
You can review the proposed improvement in PR #4114.

This fix will be available on the next release or on the nightly builds.

Thanks for your collaboration!

[nihirv]

I'm running into the same issue -- it's not unique to OP

[Cristhianzl]

@nihirv hi!

Please keep track of PR #4114 and monitor the upcoming releases for this fix :)

[nihirv]

hey @Cristhianzl. Thanks, I saw this -- but doesn't really unblock me right now.

I downloaded the nightly version but am still met with the same error!

EDIT: It suddenly just managed to import correctly? Might be a similar reason to OPs original message.