docs: add save to file component example (#7651)

* save-to-file-component-example

* cleanup

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* add-tip-on-format

---------

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>
This commit is contained in:
Mendon Kissling 2025-04-17 11:04:14 -04:00 committed by GitHub
commit 057108afc6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 76 additions and 0 deletions

View file

@ -389,6 +389,82 @@ This component converts and extracts JSON fields using JQ queries.
|------|--------------|------|
| filtered_data | Filtered Data | Filtered data as list of [Data](/concepts-objects#data-object) objects. |
## Save to File
This component saves [DataFrames, Data, or Messages](/concepts-objects) to various file formats.
1. To use this component in a flow, connect a component that outputs [DataFrames, Data, or Messages](/concepts-objects) to the **Save to File** component's input.
The following example connects a **Webhook** component to two **Save to File** components to demonstrate the different outputs.
![Two Save-to File components connected to a webhook](/img/component-save-to-file.png)
2. In the **Save to File** component's **Input Type** field, select the expected input type.
This example expects **Data** from the **Webhook**.
3. In the **File Format** field, select the file type for your saved file.
This example uses `.md` in one **Save to File** component, and `.xlsx` in another.
4. In the **File Path** field, enter the path for your saved file.
This example uses `./output/employees.xlsx` and `./output/employees.md` to save the files in a directory relative to where Langflow is running.
The component accepts both relative and absolute paths, and creates any necessary directories if they don't exist.
:::tip
If you enter a format in the `file_path` that is not accepted, the component appends the proper format to the file.
For example, if the selected `file_format` is `csv`, and you enter `file_path` as `./output/test.txt`, the file will be saved as `./output/test.txt.csv` so the file is not corrupted.
:::
5. Send a POST request to the **Webhook** containing your JSON data.
Replace `YOUR_FLOW_ID` with your flow ID.
This example uses the default Langflow server address.
```text
curl -X POST "http://127.0.0.1:7860/api/v1/webhook/YOUR_FLOW_ID" \
-H 'Content-Type: application/json' \
-d '{
"Name": ["Alex Cruz", "Kalani Smith", "Noam Johnson"],
"Role": ["Developer", "Designer", "Manager"],
"Department": ["Engineering", "Design", "Management"]
}'
```
6. In your local filesystem, open the `outputs` directory.
You should see two files created from the data you've sent: one in `.xlsx` for structured spreadsheets, and one in Markdown.
```text
| Name | Role | Department |
|:-------------|:----------|:-------------|
| Alex Cruz | Developer | Engineering |
| Kalani Smith | Designer | Design |
| Noam Johnson | Manager | Management |
```
### File input format options
For `DataFrame` and `Data` inputs, the component can create:
- `csv`
- `excel`
- `json`
- `markdown`
- `pdf`
For `Message` inputs, the component can create:
- `txt`
- `json`
- `markdown`
- `pdf`
### Inputs
| Name | Display Name | Info |
|------|--------------|------|
| input_type | Input Type | Select the type of input to save.|
| df | DataFrame | The DataFrame to save. |
| data | Data | The Data object to save. |
| message | Message | The Message to save. |
| file_format | File Format | Select the file format to save the input. |
| file_path | File Path | The full file path including filename and extension. |
### Outputs
| Name | Display Name | Info |
|------|--------------|------|
| confirmation | Confirmation | Confirmation message after saving the file. |
## Select data
:::important

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 KiB