Custom component from Store Debugging Help

[Del-tek]

Hello, I'm trying to use a custom component from the Langflow Store called Formatted Text File Generator that is meant to convert content into a text file and save it to the Downloads folder of a user's local storage. I'm using the browser version of Langflow, and I was previously getting a couple of errors (such as file is read only, and file not found) when I tried to run the component as is, so I made some code tweaks. Now there are no more error messages but nothing is being downloaded onto my PC, nor is anything being shown in the output of the playground, I'm simply getting a "Message Empty" output.

Can anyone please advise if there is a code update I need to make to enable this download to PC functionality, or if having a direct download to PC is even possible on a browser version of Langflow?

Providing screenshots of my flow and the "Message Empty" output I'm getting.

Also providing code of the custom component that I changed.

Details

from langflow.custom import Component
from langflow.io import MessageTextInput, Output
from langflow.schema import Data
import os
import textwrap
from datetime import datetime

class TextFileGeneratorComponent(Component):
display_name = "Compact Formatted Text File Generator with Timestamp"
description = "Generates a compact formatted text file from given content, adds current date and time to the filename, and saves it in the Downloads folder."
icon = "custom_components"

inputs = [
    MessageTextInput(
        name="file_title",
        display_name="File Title",
        info="Title of the generated file.",
    ),
    MessageTextInput(
        name="text_content",
        display_name="Text Content",
        info="The text content to be included in the file.",
    ),
]
outputs = [
    Output(display_name="File Creation Status", name="file_status", method="create_text_file"),
]

def create_text_file(self) -> Data:
    file_title = self._attributes.get("file_title", "Untitled")
    text_content = self._attributes.get("text_content", "")
    #downloads_folder = os.path.join(os.path.expanduser("~"), "Downloads")
    #downloads_folder = os.path.join(os.getcwd(), "generated_files")
    #os.makedirs(downloads_folder, exist_ok=True)
    import tempfile
    downloads_folder = tempfile.gettempdir()

    
    current_time = datetime.now().strftime("%Y%m%d_%H%M%S")
    file_name = f"{file_title.replace(' ', '_')}_{current_time}.txt"
    file_path = os.path.join(downloads_folder, file_name)

    def format_paragraph(text, width=80, indent=2):
        lines = textwrap.wrap(text, width=width-indent)
        formatted_lines = [" " * indent + line for line in lines]
        return "\n".join(formatted_lines)

    with open(file_path, 'w', encoding='utf-8') as file:
        file.write(f"{file_title}\n\n")
        paragraphs = text_content.split('\n')
        for i, paragraph in enumerate(paragraphs):
            if paragraph.strip():
                file.write(format_paragraph(paragraph.strip()))
                # Add a single blank line between paragraphs, except after the last one.
                if i < len(paragraphs) - 1:
                    file.write("\n")
            else:
                # Preserve intentional blank lines, but refrain from inserting superfluous spaces
                file.write("\n")

    try:
        os.startfile(file_path)
    except Exception as e:
        return Data(data={"status": f"Error: {str(e)}"})

    return Data(data={"status": f"Compact text file created successfully and opened: {file_path}"})

[dosubot[bot]]

Hello @Del-tek! I'm Dosu, your friendly bot here to help you tackle bugs, answer questions, and support you on your journey to becoming a contributor. I'm here while you wait for a human maintainer. How can I assist you today?

I found a similar open issue titled Download Data Component, which might be related to your problem. However, it doesn't have any comments or solutions provided yet ^[1].

To enable the download to PC functionality in the browser version of Langflow, you can use a code pattern that creates a downloadable link for files using a Blob and triggers a download in the browser. Here's a code snippet that demonstrates this approach:

const handleExport = () => {
  mutateDownloadMultipleFlows(
    {
      flow_ids: selectedFlowsComponentsCards,
    },
    {
      onSuccess: (data) => {
        const selectedFlow = flowsFromFolder.find(
          (flow) => flow.id === selectedFlowsComponentsCards[0],
        );

        const blobType =
          selectedFlowsComponentsCards.length > 1
            ? "application/zip"
            : "application/json";

        const fileNameSuffix =
          selectedFlowsComponentsCards.length > 1
            ? "_langflow_flows.zip"
            : `${selectedFlow!.name}.json`;

        const blob = new Blob([data], { type: blobType });

        const link = document.createElement("a");
        link.href = window.URL.createObjectURL(blob);

        let current_time = new Date().toISOString().replace(/[:.]/g, "");

        current_time = current_time
          .replace(/-/g, "")
          .replace(/T/g, "")
          .replace(/Z/g, "");

        link.download =
          selectedFlowsComponentsCards.length > 1
            ? `${current_time}${fileNameSuffix}`
            : `${fileNameSuffix}`;

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
    }
  );
};

This code creates a Blob from the data, generates a URL for it, and then creates a temporary anchor element to trigger the download. The filename includes a timestamp, ensuring that each download is uniquely named. This approach is suitable for direct downloads to a PC in a browser environment ^[2].

In your custom component, you might need to adjust the method of triggering the download to align with this approach, as direct file system access (like using os.startfile) is not possible in a browser environment. Instead, you should focus on generating the file content and then using the browser's capabilities to handle the download.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}