diff --git a/404.html b/404.html index 0961af4c48..dd056cc4a6 100644 --- a/404.html +++ b/404.html @@ -24,7 +24,7 @@ - +
diff --git a/agent-tutorial.html b/agent-tutorial.html index 5193c48493..cab3bae832 100644 --- a/agent-tutorial.html +++ b/agent-tutorial.html @@ -24,7 +24,7 @@ - + diff --git a/agents-tools.html b/agents-tools.html index 46dc0c3862..ef1d38e911 100644 --- a/agents-tools.html +++ b/agents-tools.html @@ -24,7 +24,7 @@ - + diff --git a/agents.html b/agents.html index 046b847ae5..59c91930a9 100644 --- a/agents.html +++ b/agents.html @@ -24,7 +24,7 @@ - + diff --git a/api-build.html b/api-build.html index b8d96be67b..b4e393aca4 100644 --- a/api-build.html +++ b/api-build.html @@ -24,7 +24,7 @@ - + diff --git a/api-files.html b/api-files.html index 5508450535..79d5fca753 100644 --- a/api-files.html +++ b/api-files.html @@ -24,7 +24,7 @@ - + diff --git a/api-flows-run.html b/api-flows-run.html index 154fcb23e5..cc91689262 100644 --- a/api-flows-run.html +++ b/api-flows-run.html @@ -24,7 +24,7 @@ - + diff --git a/api-flows.html b/api-flows.html index 1887577fc3..9a31e4b92a 100644 --- a/api-flows.html +++ b/api-flows.html @@ -24,7 +24,7 @@ - + diff --git a/api-keys-and-authentication.html b/api-keys-and-authentication.html index 60d5e4c75d..585973e781 100644 --- a/api-keys-and-authentication.html +++ b/api-keys-and-authentication.html @@ -24,7 +24,7 @@ - + diff --git a/api-logs.html b/api-logs.html index 6ab4a943e7..ac1773241d 100644 --- a/api-logs.html +++ b/api-logs.html @@ -24,7 +24,7 @@ - + diff --git a/api-monitor.html b/api-monitor.html index d20b378d68..fc76724478 100644 --- a/api-monitor.html +++ b/api-monitor.html @@ -24,7 +24,7 @@ - + diff --git a/api-openai-responses.html b/api-openai-responses.html index 36c0d780cf..5ab2d0adfb 100644 --- a/api-openai-responses.html +++ b/api-openai-responses.html @@ -24,7 +24,7 @@ - + diff --git a/api-projects.html b/api-projects.html index 4e8bc8259e..6b665a2cd3 100644 --- a/api-projects.html +++ b/api-projects.html @@ -24,7 +24,7 @@ - + diff --git a/api-reference-api-examples.html b/api-reference-api-examples.html index 42018b5243..227c629190 100644 --- a/api-reference-api-examples.html +++ b/api-reference-api-examples.html @@ -24,7 +24,7 @@ - + diff --git a/api-request.html b/api-request.html index 3ec9084afd..e8a32a0b01 100644 --- a/api-request.html +++ b/api-request.html @@ -24,7 +24,7 @@ - + diff --git a/api-users.html b/api-users.html index 7e1cb6a0d4..61d6717985 100644 --- a/api-users.html +++ b/api-users.html @@ -24,7 +24,7 @@ - + diff --git a/api.html b/api.html index 300647211c..493c61949b 100644 --- a/api.html +++ b/api.html @@ -24,7 +24,7 @@ - + diff --git a/api/openapi.json.html b/api/openapi.json.html index 89f56f62eb..075cd7587c 100644 --- a/api/openapi.json.html +++ b/api/openapi.json.html @@ -24,7 +24,7 @@ - + diff --git a/api/openapi.yaml.html b/api/openapi.yaml.html index 3ce856d999..0d5e0b2806 100644 --- a/api/openapi.yaml.html +++ b/api/openapi.yaml.html @@ -24,7 +24,7 @@ - + diff --git a/assets/js/755d162a.be1bbe87.js b/assets/js/755d162a.e04c4c2c.js similarity index 87% rename from assets/js/755d162a.be1bbe87.js rename to assets/js/755d162a.e04c4c2c.js index 935037e44d..95a8055a75 100644 --- a/assets/js/755d162a.be1bbe87.js +++ b/assets/js/755d162a.e04c4c2c.js @@ -1 +1 @@ -"use strict";(globalThis.webpackChunklangflow_docs=globalThis.webpackChunklangflow_docs||[]).push([[2102],{1258:(e,n,o)=>{o.r(n),o.d(n,{CH:()=>h,assets:()=>d,chCodeConfig:()=>p,contentTitle:()=>a,default:()=>g,frontMatter:()=>c,metadata:()=>t,toc:()=>u});const t=JSON.parse('{"id":"Develop/concepts-file-management","title":"Manage files","description":"Each Langflow server has a file management system where you can store files that you want to use in your flows.","source":"@site/docs/Develop/concepts-file-management.mdx","sourceDirName":"Develop","slug":"/concepts-file-management","permalink":"/concepts-file-management","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Manage files","slug":"/concepts-file-management"},"sidebar":"docs","previous":{"title":"Environment variables","permalink":"/environment-variables"},"next":{"title":"Manage memory","permalink":"/memory"}}');var s=o(74848),l=o(28453),r=o(24754),i=o(40619);const c={title:"Manage files",slug:"/concepts-file-management"},a=void 0,d={},h={annotations:r.hk,Code:r.Cy},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},u=[{value:"Use the file management UI",id:"use-the-file-management-ui",level:2},{value:"Upload and manage files with the Langflow API",id:"upload-and-manage-files-with-the-langflow-api",level:2},{value:"Set the maximum file size",id:"set-the-maximum-file-size",level:2},{value:"Use files in a flow",id:"use-files-in-a-flow",level:2},{value:"Load files at runtime",id:"load-files-at-runtime",level:3},{value:"Upload images",id:"upload-images",level:2},{value:"Work with video files",id:"work-with-video-files",level:2},{value:"Configure file storage",id:"configure-file-storage",level:2},{value:"File storage environment variables",id:"file-storage-environment-variables",level:2},{value:"See also",id:"see-also",level:2}];function f(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return h||x("CH",!1),h.Code||x("CH.Code",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="github-dark"] { --ch-t-colorScheme: dark;--ch-t-foreground: #c9d1d9;--ch-t-background: #0d1117;--ch-t-lighter-inlineBackground: #0d1117e6;--ch-t-editor-background: #0d1117;--ch-t-editor-foreground: #c9d1d9;--ch-t-editor-lineHighlightBackground: #6e76811a;--ch-t-editor-rangeHighlightBackground: #ffffff0b;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #264F78;--ch-t-focusBorder: #1f6feb;--ch-t-tab-activeBackground: #0d1117;--ch-t-tab-activeForeground: #c9d1d9;--ch-t-tab-inactiveBackground: #010409;--ch-t-tab-inactiveForeground: #8b949e;--ch-t-tab-border: #30363d;--ch-t-tab-activeBorder: #0d1117;--ch-t-editorGroup-border: #30363d;--ch-t-editorGroupHeader-tabsBackground: #010409;--ch-t-editorLineNumber-foreground: #6e7681;--ch-t-input-background: #0d1117;--ch-t-input-foreground: #c9d1d9;--ch-t-input-border: #30363d;--ch-t-icon-foreground: #8b949e;--ch-t-sideBar-background: #010409;--ch-t-sideBar-foreground: #c9d1d9;--ch-t-sideBar-border: #30363d;--ch-t-list-activeSelectionBackground: #6e768166;--ch-t-list-activeSelectionForeground: #c9d1d9;--ch-t-list-hoverBackground: #6e76811a;--ch-t-list-hoverForeground: #c9d1d9; }'}}),"\n","\n",(0,s.jsx)(n.p,{children:"Each Langflow server has a file management system where you can store files that you want to use in your flows."}),"\n",(0,s.jsxs)(n.p,{children:["Files uploaded to Langflow file management are stored in Langflow's ",(0,s.jsx)(n.a,{href:"/concepts-file-management#configure-file-storage",children:"storage backend (local or AWS S3)"}),", and they are available to all of your flows."]}),"\n",(0,s.jsx)(n.p,{children:"Uploading files to Langflow file management keeps your files in a central location, and allows you to reuse files across flows without repeated manual uploads."}),"\n",(0,s.jsx)(n.h2,{id:"use-the-file-management-ui",children:"Use the file management UI"}),"\n",(0,s.jsx)(n.p,{children:"You can use the file management UI to upload files from your local machine to your own Langflow server.\nYou can also manage all files that have been uploaded to your Langflow server."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Navigate to Langflow file management:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Langflow Desktop"}),": In Langflow, on the ",(0,s.jsxs)(n.a,{href:"/concepts-flows#projects",children:[(0,s.jsx)(n.strong,{children:"Projects"})," page"]})," page, click ",(0,s.jsx)(n.strong,{children:"My Files"})," below the list of projects."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Langflow OSS"}),": From a browser, navigate to your Langflow server's ",(0,s.jsx)(n.code,{children:"/files"})," endpoint, such as ",(0,s.jsx)(n.code,{children:"http://localhost:7860/files"}),". Modify the base URL as needed for your Langflow server."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Backend-only"}),": For programmatic file management, use the ",(0,s.jsx)(n.a,{href:"/api-files",children:"Langflow API files endpoints"}),". However, the following steps assume you're using the file management UI."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["On the ",(0,s.jsx)(n.strong,{children:"My Files"})," page, click ",(0,s.jsx)(n.strong,{children:"Upload"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Select one or more files to upload."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["After uploading files, you can rename, download, copy, or delete files within the file management UI.\nTo delete a file, hover over a file's icon, select it, and then click ",(0,s.jsx)(i.A,{name:"Trash2","aria-hidden":"true"})," ",(0,s.jsx)(n.strong,{children:"Delete"}),".\nYou can delete multiple files in a single action.\nTo download a file, hover over a file's icon, select it, and then click ",(0,s.jsx)(i.A,{name:"Download","aria-hidden":"true"})," ",(0,s.jsx)(n.strong,{children:"Download"}),".\nIf you download multiple files in a single action, they are saved together in a zip file."]}),"\n",(0,s.jsx)(n.h2,{id:"upload-and-manage-files-with-the-langflow-api",children:"Upload and manage files with the Langflow API"}),"\n",(0,s.jsx)(n.p,{children:"With the Langflow API, you can upload and manage files in Langflow file management, and you can send files to flows programmatically at runtime."}),"\n",(0,s.jsxs)(n.p,{children:["For more information and examples, see ",(0,s.jsx)(n.a,{href:"/api-files",children:"Files endpoints"})," and ",(0,s.jsx)(n.a,{href:"/chat-with-files",children:"Create a chatbot that can ingest files"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"set-the-maximum-file-size",children:"Set the maximum file size"}),"\n",(0,s.jsxs)(n.p,{children:["By default, the maximum file size is 1024 MB.\nTo modify this value, change the ",(0,s.jsx)(n.code,{children:"LANGFLOW_MAX_FILE_SIZE_UPLOAD"})," ",(0,s.jsx)(n.a,{href:"/environment-variables",children:"environment variable"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"use-files-in-a-flow",children:"Use files in a flow"}),"\n",(0,s.jsxs)(n.p,{children:["To use files in your Langflow file management system in a flow, add a component that accepts file input to your flow, such as the ",(0,s.jsx)(n.strong,{children:"Read File"})," component."]}),"\n",(0,s.jsxs)(n.p,{children:["For example, add a ",(0,s.jsx)(n.strong,{children:"Read File"})," component to your flow, click ",(0,s.jsx)(n.strong,{children:"Select files"}),", and then select files from the ",(0,s.jsx)(n.strong,{children:"My Files"})," list."]}),"\n",(0,s.jsxs)(n.p,{children:["This list includes all files in your server's file management system, but you can only select ",(0,s.jsxs)(n.a,{href:"/read-file",children:["file types that are supported by the ",(0,s.jsx)(n.strong,{children:"Read File"})," component"]}),".\nIf you need another file type, you must use a different component that supports that file type, or you need to convert it to a supported type before uploading it."]}),"\n",(0,s.jsxs)(n.p,{children:["For more information about the ",(0,s.jsx)(n.strong,{children:"Read File"})," component and other data loading components, see the ",(0,s.jsxs)(n.a,{href:"/read-file",children:[(0,s.jsx)(n.strong,{children:"Read file"})," component"]}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"load-files-at-runtime",children:"Load files at runtime"}),"\n",(0,s.jsx)(n.p,{children:"You can use preloaded files in your flows, and you can load files at runtime, if your flow accepts file input.\nTo enable file input in your flow, do the following:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Add a ",(0,s.jsxs)(n.a,{href:"/read-file",children:[(0,s.jsx)(n.strong,{children:"Read File"})," component"]})," to your flow."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Click ",(0,s.jsx)(n.strong,{children:"Share"}),", select ",(0,s.jsx)(n.strong,{children:"API access"}),", and then click ",(0,s.jsx)(n.strong,{children:"Input Schema"})," to add ",(0,s.jsx)(n.a,{href:"/concepts-publish#input-schema",children:(0,s.jsx)(n.code,{children:"tweaks"})})," to the request payload in the flow's automatically generated code snippets."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Expand the ",(0,s.jsx)(n.strong,{children:"File"})," section, find the ",(0,s.jsx)(n.strong,{children:"Files"})," row, and then enable ",(0,s.jsx)(n.strong,{children:"Expose Input"})," to allow the parameter to be set at runtime through the Langflow API."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Close the ",(0,s.jsx)(n.strong,{children:"Input Schema"})," pane to return to the ",(0,s.jsx)(n.strong,{children:"API access"})," pane.\nThe payload in each code snippet now includes ",(0,s.jsx)(n.code,{children:"tweaks"})," with your ",(0,s.jsx)(n.strong,{children:"Read File"})," component's ID and the ",(0,s.jsx)(n.code,{children:"path"})," key that you enabled in ",(0,s.jsx)(n.strong,{children:"Input Schema"}),":"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:'"tweaks"',props:{style:{color:"#A5D6FF"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "File-qYD5w"',props:{style:{color:"#7EE787"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:'\t "path"',props:{style:{color:"#7EE787"}}},{content:": []",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]}],lang:"json"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["When you run this flow programmatically, your script must upload a file to Langflow file management, and then pass the returned ",(0,s.jsx)(n.code,{children:"file_path"})," to the ",(0,s.jsx)(n.code,{children:"path"})," tweak in the ",(0,s.jsx)(n.code,{children:"/run"})," request:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:'"tweaks"',props:{style:{color:"#A5D6FF"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "FILE_COMPONENT_ID"',props:{style:{color:"#7EE787"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "path"',props:{style:{color:"#7EE787"}}},{content:": [ ",props:{style:{color:"#C9D1D9"}}},{content:'"file_path"',props:{style:{color:"#A5D6FF"}}},{content:" ]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]}],lang:"json"},annotations:[]}]}),"\n",(0,s.jsxs)(n.p,{children:["For a complete example see ",(0,s.jsx)(n.a,{href:"/chat-with-files",children:"Create a chatbot that can ingest files"})," and ",(0,s.jsx)(n.a,{href:"/api-files",children:"Files endpoints"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["If you want to upload multiple files, you can pass multiple ",(0,s.jsx)(n.code,{children:"file_path"})," values in the ",(0,s.jsx)(n.code,{children:"path"})," array, such as ",(0,s.jsx)(n.code,{children:'[ "path1", "path2" ]'}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"upload-images",children:"Upload images"}),"\n",(0,s.jsx)(n.p,{children:"Langflow supports base64 images in the following formats:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"PNG"}),"\n",(0,s.jsx)(n.li,{children:"JPG/JPEG"}),"\n",(0,s.jsx)(n.li,{children:"GIF"}),"\n",(0,s.jsx)(n.li,{children:"BMP"}),"\n",(0,s.jsx)(n.li,{children:"WebP"}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can upload images to the ",(0,s.jsx)(n.strong,{children:"Playground"})," chat interface and as runtime input with the Langflow API."]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["In the ",(0,s.jsx)(n.strong,{children:"Playground"}),", you can drag-and-drop images into the chat input area, or you can click the ",(0,s.jsx)(n.strong,{children:"Attach image"})," icon to select an image to upload."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["When you trigger a flow with the ",(0,s.jsx)(n.code,{children:"/api/v1/run/$FLOW_ID"})," endpoint, you can use the ",(0,s.jsx)(n.code,{children:"files"})," parameter to attach image data as a base64-encoded string:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"curl ",props:{style:{color:"#FFA657"}}},{content:"-X ",props:{style:{color:"#79C0FF"}}},{content:'POST "http://',props:{style:{color:"#A5D6FF"}}},{content:"$LANGFLOW_SERVER_ADDRESS",props:{style:{color:"#C9D1D9"}}},{content:"/api/v1/run/",props:{style:{color:"#A5D6FF"}}},{content:"$FLOW_ID",props:{style:{color:"#C9D1D9"}}},{content:'" ',props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"-H ",props:{style:{color:"#C9D1D9"}}},{content:'"Content-Type: application/json" ',props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"-H ",props:{style:{color:"#C9D1D9"}}},{content:'"x-api-key: ',props:{style:{color:"#A5D6FF"}}},{content:"$LANGFLOW_API_KEY",props:{style:{color:"#C9D1D9"}}},{content:'" ',props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"-d ",props:{style:{color:"#C9D1D9"}}},{content:"'{",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "session_id": "custom_session_123",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "input_value": "What is in this image?",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "input_type": "chat",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "output_type": "chat",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "files": ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."]',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"}'",props:{style:{color:"#A5D6FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["For more specialized image processing, browse ",(0,s.jsx)(i.A,{name:"Blocks","aria-hidden":"true"})," [",(0,s.jsx)(n.strong,{children:"Bundles"}),"] or ",(0,s.jsx)(n.a,{href:"/components-custom-components",children:"create your own components"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"work-with-video-files",children:"Work with video files"}),"\n",(0,s.jsxs)(n.p,{children:["For videos, see the ",(0,s.jsx)(n.strong,{children:"Twelve Labs"})," and ",(0,s.jsx)(n.strong,{children:"YouTube"})," ",(0,s.jsx)(i.A,{name:"Blocks","aria-hidden":"true"})," ",(0,s.jsx)(n.a,{href:"/components-bundle-components",children:(0,s.jsx)(n.strong,{children:"Bundles"})}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"configure-file-storage",children:"Configure file storage"}),"\n",(0,s.jsx)(n.p,{children:"Langflow supports two storage backends for file management:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Local storage"}),": Langflow's default storage backend. Files are stored locally in your ",(0,s.jsx)(n.a,{href:"/memory",children:"Langflow configuration directory"}),". Set ",(0,s.jsx)(n.code,{children:"LANGFLOW_STORAGE_TYPE=local"})," or leave it unset to use local storage."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"S3 storage"}),": Files are stored in an AWS S3 bucket.\nLangflow uses the ",(0,s.jsx)(n.a,{href:"https://boto3.amazonaws.com/v1/documentation/api/latest/index.html",children:"boto3"})," library to interact with S3."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["To use S3 as your file storage backend, add the following configuration to your ",(0,s.jsx)(n.code,{children:".env"})," file:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"# S3 Storage Configuration",props:{}}]},{tokens:[{content:"LANGFLOW_STORAGE_TYPE=s3",props:{}}]},{tokens:[{content:"LANGFLOW_OBJECT_STORAGE_BUCKET_NAME=S3_BUCKET_NAME",props:{}}]},{tokens:[{content:"LANGFLOW_OBJECT_STORAGE_PREFIX=S3_BUCKET_DIRECTORY",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"# AWS Credentials (required for S3)",props:{}}]},{tokens:[{content:"AWS_ACCESS_KEY_ID=S3_ACCESS_KEY",props:{}}]},{tokens:[{content:"AWS_SECRET_ACCESS_KEY=S3_ACCESS_SECRET_KEY",props:{}}]},{tokens:[{content:"AWS_DEFAULT_REGION=S3_REGION",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsx)(n.p,{children:"Replace the following placeholders with the actual values for your S3 instance:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_BUCKET_NAME"}),": The name of your S3 bucket."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_BUCKET_DIRECTORY"}),": An optional folder path within the bucket where files are stored, such as ",(0,s.jsx)(n.code,{children:"s3://S3_BUCKET_NAME/S3_BUCKET_DIRECTORY"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_ACCESS_KEY"}),": Your AWS Access Key ID."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_ACCESS_SECRET_KEY"}),": Your AWS Secret Access Key."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_REGION"}),": The AWS region where your bucket is located, such as ",(0,s.jsx)(n.code,{children:"us-east-2"}),"."]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Your AWS credentials must have the necessary permissions to perform the required S3 operations for your use case, such as reading, writing, and deleting files in S3.\nThis example policy allows basic CRUD operations on S3 objects."}),"\n",(0,s.jsx)(h.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Version"',props:{style:{color:"#7EE787"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"2012-10-17"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Statement"',props:{style:{color:"#7EE787"}}},{content:": [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Sid"',props:{style:{color:"#7EE787"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"LangflowS3StorageAccess"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Effect"',props:{style:{color:"#7EE787"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"Allow"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Action"',props:{style:{color:"#7EE787"}}},{content:": [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "s3:PutObject"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "s3:GetObject"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "s3:DeleteObject"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "s3:ListBucket"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "s3:PutObjectTagging"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ],",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Resource"',props:{style:{color:"#7EE787"}}},{content:": [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "arn:aws:s3:::S3_BUCKET_NAME"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "arn:aws:s3:::S3_BUCKET_NAME/S3_BUCKET_DIRECTORY/*"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" ]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]}],lang:"json"},annotations:[]}]}),"\n",(0,s.jsx)(n.p,{children:"Replace the following placeholders with the actual values for your IAM policy and S3 instance:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_BUCKET_NAME"}),": The name of your S3 bucket."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_BUCKET_DIRECTORY"}),": An optional folder path within the bucket where files are stored, such as ",(0,s.jsx)(n.code,{children:"s3://S3_BUCKET_NAME/S3_BUCKET_DIRECTORY"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["For more information, see the ",(0,s.jsx)(n.a,{href:"https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_change-permissions.html",children:"AWS documentation"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"file-storage-environment-variables",children:"File storage environment variables"}),"\n",(0,s.jsx)(n.p,{children:"The following environment variables configure file storage backends for Langflow's file management system:"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Variable"}),(0,s.jsx)(n.th,{children:"Format"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"LANGFLOW_STORAGE_TYPE"})}),(0,s.jsx)(n.td,{children:"String"}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"local"})}),(0,s.jsxs)(n.td,{children:["Set the file storage backend. Supported values: ",(0,s.jsx)(n.code,{children:"local"})," (files stored in the Langflow configuration directory) or ",(0,s.jsx)(n.code,{children:"s3"})," (files stored in AWS S3). For S3 storage, you must also configure AWS credentials and bucket settings."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"LANGFLOW_OBJECT_STORAGE_BUCKET_NAME"})}),(0,s.jsx)(n.td,{children:"String"}),(0,s.jsx)(n.td,{children:"Not set"}),(0,s.jsxs)(n.td,{children:["The name of the S3 bucket to use for file storage. Required when ",(0,s.jsx)(n.code,{children:"LANGFLOW_STORAGE_TYPE=s3"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"LANGFLOW_OBJECT_STORAGE_PREFIX"})}),(0,s.jsx)(n.td,{children:"String"}),(0,s.jsx)(n.td,{children:"Not set"}),(0,s.jsx)(n.td,{children:"Optional prefix/folder path within the S3 bucket where files will be stored. If not set, files are stored at the bucket root."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"LANGFLOW_OBJECT_STORAGE_TAGS"})}),(0,s.jsx)(n.td,{children:"JSON object"}),(0,s.jsx)(n.td,{children:"Not set"}),(0,s.jsxs)(n.td,{children:["Optional S3 object tags applied to stored files when ",(0,s.jsx)(n.code,{children:"LANGFLOW_STORAGE_TYPE=s3"}),". Ignored for local storage. Provided as a JSON map of string keys to string values, such as ",(0,s.jsx)(n.code,{children:'{"env": "prod", "owner": "data-team"}'}),"."]})]})]})]}),"\n",(0,s.jsx)(n.h2,{id:"see-also",children:"See also"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/concepts-components",children:"Components reference"})}),"\n"]})]})}function g(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(f,{...e})}):f(e)}function x(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]); \ No newline at end of file +"use strict";(globalThis.webpackChunklangflow_docs=globalThis.webpackChunklangflow_docs||[]).push([[2102],{1258:(e,n,o)=>{o.r(n),o.d(n,{CH:()=>h,assets:()=>d,chCodeConfig:()=>p,contentTitle:()=>a,default:()=>g,frontMatter:()=>c,metadata:()=>t,toc:()=>u});const t=JSON.parse('{"id":"Develop/concepts-file-management","title":"Manage files","description":"Each Langflow server has a file management system where you can store files that you want to use in your flows.","source":"@site/docs/Develop/concepts-file-management.mdx","sourceDirName":"Develop","slug":"/concepts-file-management","permalink":"/concepts-file-management","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Manage files","slug":"/concepts-file-management"},"sidebar":"docs","previous":{"title":"Environment variables","permalink":"/environment-variables"},"next":{"title":"Manage memory","permalink":"/memory"}}');var s=o(74848),l=o(28453),r=o(24754),i=o(40619);const c={title:"Manage files",slug:"/concepts-file-management"},a=void 0,d={},h={annotations:r.hk,Code:r.Cy},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:!0,showCopyButton:!0,themeName:"github-dark"},u=[{value:"Use the file management UI",id:"use-the-file-management-ui",level:2},{value:"Upload and manage files with the Langflow API",id:"upload-and-manage-files-with-the-langflow-api",level:2},{value:"Set the maximum file size",id:"set-the-maximum-file-size",level:2},{value:"Use files in a flow",id:"use-files-in-a-flow",level:2},{value:"Load files at runtime",id:"load-files-at-runtime",level:3},{value:"Upload images",id:"upload-images",level:2},{value:"Work with video files",id:"work-with-video-files",level:2},{value:"Configure file storage",id:"configure-file-storage",level:2},{value:"File storage environment variables",id:"file-storage-environment-variables",level:2},{value:"See also",id:"see-also",level:2}];function f(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return h||x("CH",!1),h.Code||x("CH.Code",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="github-dark"] { --ch-t-colorScheme: dark;--ch-t-foreground: #c9d1d9;--ch-t-background: #0d1117;--ch-t-lighter-inlineBackground: #0d1117e6;--ch-t-editor-background: #0d1117;--ch-t-editor-foreground: #c9d1d9;--ch-t-editor-lineHighlightBackground: #6e76811a;--ch-t-editor-rangeHighlightBackground: #ffffff0b;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #264F78;--ch-t-focusBorder: #1f6feb;--ch-t-tab-activeBackground: #0d1117;--ch-t-tab-activeForeground: #c9d1d9;--ch-t-tab-inactiveBackground: #010409;--ch-t-tab-inactiveForeground: #8b949e;--ch-t-tab-border: #30363d;--ch-t-tab-activeBorder: #0d1117;--ch-t-editorGroup-border: #30363d;--ch-t-editorGroupHeader-tabsBackground: #010409;--ch-t-editorLineNumber-foreground: #6e7681;--ch-t-input-background: #0d1117;--ch-t-input-foreground: #c9d1d9;--ch-t-input-border: #30363d;--ch-t-icon-foreground: #8b949e;--ch-t-sideBar-background: #010409;--ch-t-sideBar-foreground: #c9d1d9;--ch-t-sideBar-border: #30363d;--ch-t-list-activeSelectionBackground: #6e768166;--ch-t-list-activeSelectionForeground: #c9d1d9;--ch-t-list-hoverBackground: #6e76811a;--ch-t-list-hoverForeground: #c9d1d9; }'}}),"\n","\n",(0,s.jsx)(n.p,{children:"Each Langflow server has a file management system where you can store files that you want to use in your flows."}),"\n",(0,s.jsxs)(n.p,{children:["Files uploaded to Langflow file management are stored in Langflow's ",(0,s.jsx)(n.a,{href:"/concepts-file-management#configure-file-storage",children:"storage backend (local or AWS S3)"}),", and they are available to all of your flows."]}),"\n",(0,s.jsx)(n.p,{children:"Uploading files to Langflow file management keeps your files in a central location, and allows you to reuse files across flows without repeated manual uploads."}),"\n",(0,s.jsx)(n.h2,{id:"use-the-file-management-ui",children:"Use the file management UI"}),"\n",(0,s.jsx)(n.p,{children:"You can use the file management UI to upload files from your local machine to your own Langflow server.\nYou can also manage all files that have been uploaded to your Langflow server."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Navigate to Langflow file management:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Langflow Desktop"}),": In Langflow, on the ",(0,s.jsxs)(n.a,{href:"/concepts-flows#projects",children:[(0,s.jsx)(n.strong,{children:"Projects"})," page"]})," page, click ",(0,s.jsx)(n.strong,{children:"My Files"})," below the list of projects."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Langflow OSS"}),": From a browser, navigate to your Langflow server's ",(0,s.jsx)(n.code,{children:"/files"})," endpoint, such as ",(0,s.jsx)(n.code,{children:"http://localhost:7860/files"}),". Modify the base URL as needed for your Langflow server."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Backend-only"}),": For programmatic file management, use the ",(0,s.jsx)(n.a,{href:"/api-files",children:"Langflow API files endpoints"}),". However, the following steps assume you're using the file management UI."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["On the ",(0,s.jsx)(n.strong,{children:"My Files"})," page, click ",(0,s.jsx)(n.strong,{children:"Upload"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Select one or more files to upload."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["After uploading files, you can rename, download, copy, or delete files within the file management UI.\nTo delete a file, hover over a file's icon, select it, and then click ",(0,s.jsx)(i.A,{name:"Trash2","aria-hidden":"true"})," ",(0,s.jsx)(n.strong,{children:"Delete"}),".\nYou can delete multiple files in a single action.\nTo download a file, hover over a file's icon, select it, and then click ",(0,s.jsx)(i.A,{name:"Download","aria-hidden":"true"})," ",(0,s.jsx)(n.strong,{children:"Download"}),".\nIf you download multiple files in a single action, they are saved together in a zip file."]}),"\n",(0,s.jsx)(n.h2,{id:"upload-and-manage-files-with-the-langflow-api",children:"Upload and manage files with the Langflow API"}),"\n",(0,s.jsx)(n.p,{children:"With the Langflow API, you can upload and manage files in Langflow file management, and you can send files to flows programmatically at runtime."}),"\n",(0,s.jsxs)(n.p,{children:["For more information and examples, see ",(0,s.jsx)(n.a,{href:"/api-files",children:"Files endpoints"})," and ",(0,s.jsx)(n.a,{href:"/chat-with-files",children:"Create a chatbot that can ingest files"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"set-the-maximum-file-size",children:"Set the maximum file size"}),"\n",(0,s.jsxs)(n.p,{children:["By default, the maximum file size is 1024 MB.\nTo modify this value, change the ",(0,s.jsx)(n.code,{children:"LANGFLOW_MAX_FILE_SIZE_UPLOAD"})," ",(0,s.jsx)(n.a,{href:"/environment-variables",children:"environment variable"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"use-files-in-a-flow",children:"Use files in a flow"}),"\n",(0,s.jsxs)(n.p,{children:["To use files in your Langflow file management system in a flow, add a component that accepts file input to your flow, such as the ",(0,s.jsx)(n.strong,{children:"Read File"})," component."]}),"\n",(0,s.jsxs)(n.p,{children:["For example, add a ",(0,s.jsx)(n.strong,{children:"Read File"})," component to your flow, click ",(0,s.jsx)(n.strong,{children:"Select files"}),", and then select files from the ",(0,s.jsx)(n.strong,{children:"My Files"})," list."]}),"\n",(0,s.jsxs)(n.p,{children:["This list includes all files in your server's file management system, but you can only select ",(0,s.jsxs)(n.a,{href:"/read-file",children:["file types that are supported by the ",(0,s.jsx)(n.strong,{children:"Read File"})," component"]}),".\nIf you need another file type, you must use a different component that supports that file type, or you need to convert it to a supported type before uploading it."]}),"\n",(0,s.jsxs)(n.p,{children:["For more information about the ",(0,s.jsx)(n.strong,{children:"Read File"})," component and other data loading components, see the ",(0,s.jsxs)(n.a,{href:"/read-file",children:[(0,s.jsx)(n.strong,{children:"Read file"})," component"]}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"load-files-at-runtime",children:"Load files at runtime"}),"\n",(0,s.jsx)(n.p,{children:"You can use preloaded files in your flows, and you can load files at runtime, if your flow accepts file input.\nTo enable file input in your flow, do the following:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Add a ",(0,s.jsxs)(n.a,{href:"/read-file",children:[(0,s.jsx)(n.strong,{children:"Read File"})," component"]})," to your flow."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Click ",(0,s.jsx)(n.strong,{children:"Share"}),", select ",(0,s.jsx)(n.strong,{children:"API access"}),", and then click ",(0,s.jsx)(n.strong,{children:"Input Schema"})," to add ",(0,s.jsx)(n.a,{href:"/concepts-publish#input-schema",children:(0,s.jsx)(n.code,{children:"tweaks"})})," to the request payload in the flow's automatically generated code snippets."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Expand the ",(0,s.jsx)(n.strong,{children:"File"})," section, find the ",(0,s.jsx)(n.strong,{children:"Files"})," row, and then enable ",(0,s.jsx)(n.strong,{children:"Expose Input"})," to allow the parameter to be set at runtime through the Langflow API."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Close the ",(0,s.jsx)(n.strong,{children:"Input Schema"})," pane to return to the ",(0,s.jsx)(n.strong,{children:"API access"})," pane.\nThe payload in each code snippet now includes ",(0,s.jsx)(n.code,{children:"tweaks"})," with your ",(0,s.jsx)(n.strong,{children:"Read File"})," component's ID and the ",(0,s.jsx)(n.code,{children:"path"})," key that you enabled in ",(0,s.jsx)(n.strong,{children:"Input Schema"}),":"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:'"tweaks"',props:{style:{color:"#A5D6FF"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "File-qYD5w"',props:{style:{color:"#7EE787"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:'\t "path"',props:{style:{color:"#7EE787"}}},{content:": []",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]}],lang:"json"},annotations:[]}]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["When you run this flow programmatically, your script must upload a file to Langflow file management, and then pass the returned ",(0,s.jsx)(n.code,{children:"file_path"})," to the ",(0,s.jsx)(n.code,{children:"path"})," tweak in the ",(0,s.jsx)(n.code,{children:"/run"})," request:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:'"tweaks"',props:{style:{color:"#A5D6FF"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "FILE_COMPONENT_ID"',props:{style:{color:"#7EE787"}}},{content:": {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "path"',props:{style:{color:"#7EE787"}}},{content:": [ ",props:{style:{color:"#C9D1D9"}}},{content:'"file_path"',props:{style:{color:"#A5D6FF"}}},{content:" ]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]}],lang:"json"},annotations:[]}]}),"\n",(0,s.jsxs)(n.p,{children:["For a complete example see ",(0,s.jsx)(n.a,{href:"/chat-with-files",children:"Create a chatbot that can ingest files"})," and ",(0,s.jsx)(n.a,{href:"/api-files",children:"Files endpoints"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["If you want to upload multiple files, you can pass multiple ",(0,s.jsx)(n.code,{children:"file_path"})," values in the ",(0,s.jsx)(n.code,{children:"path"})," array, such as ",(0,s.jsx)(n.code,{children:'[ "path1", "path2" ]'}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"upload-images",children:"Upload images"}),"\n",(0,s.jsx)(n.p,{children:"Langflow supports base64 images in the following formats:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"PNG"}),"\n",(0,s.jsx)(n.li,{children:"JPG/JPEG"}),"\n",(0,s.jsx)(n.li,{children:"GIF"}),"\n",(0,s.jsx)(n.li,{children:"BMP"}),"\n",(0,s.jsx)(n.li,{children:"WebP"}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can upload images to the ",(0,s.jsx)(n.strong,{children:"Playground"})," chat interface and as runtime input with the Langflow API."]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["In the ",(0,s.jsx)(n.strong,{children:"Playground"}),", you can drag-and-drop images into the chat input area, or you can click the ",(0,s.jsx)(n.strong,{children:"Attach image"})," icon to select an image to upload."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["When you trigger a flow with the ",(0,s.jsx)(n.code,{children:"/api/v1/run/$FLOW_ID"})," endpoint, you can use the ",(0,s.jsx)(n.code,{children:"files"})," parameter to attach image data as a base64-encoded string:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"curl ",props:{style:{color:"#FFA657"}}},{content:"-X ",props:{style:{color:"#79C0FF"}}},{content:'POST "http://',props:{style:{color:"#A5D6FF"}}},{content:"$LANGFLOW_SERVER_ADDRESS",props:{style:{color:"#C9D1D9"}}},{content:"/api/v1/run/",props:{style:{color:"#A5D6FF"}}},{content:"$FLOW_ID",props:{style:{color:"#C9D1D9"}}},{content:'" ',props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"-H ",props:{style:{color:"#C9D1D9"}}},{content:'"Content-Type: application/json" ',props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"-H ",props:{style:{color:"#C9D1D9"}}},{content:'"x-api-key: ',props:{style:{color:"#A5D6FF"}}},{content:"$LANGFLOW_API_KEY",props:{style:{color:"#C9D1D9"}}},{content:'" ',props:{style:{color:"#A5D6FF"}}},{content:"\\",props:{style:{color:"#79C0FF"}}}]},{tokens:[{content:"-d ",props:{style:{color:"#C9D1D9"}}},{content:"'{",props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "session_id": "custom_session_123",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "input_value": "What is in this image?",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "input_type": "chat",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "output_type": "chat",',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:' "files": ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."]',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:"}'",props:{style:{color:"#A5D6FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["For more specialized image processing, browse ",(0,s.jsx)(i.A,{name:"Blocks","aria-hidden":"true"})," [",(0,s.jsx)(n.strong,{children:"Bundles"}),"] or ",(0,s.jsx)(n.a,{href:"/components-custom-components",children:"create your own components"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"work-with-video-files",children:"Work with video files"}),"\n",(0,s.jsxs)(n.p,{children:["For videos, see the ",(0,s.jsx)(n.strong,{children:"Twelve Labs"})," and ",(0,s.jsx)(n.strong,{children:"YouTube"})," ",(0,s.jsx)(i.A,{name:"Blocks","aria-hidden":"true"})," ",(0,s.jsx)(n.a,{href:"/components-bundle-components",children:(0,s.jsx)(n.strong,{children:"Bundles"})}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"configure-file-storage",children:"Configure file storage"}),"\n",(0,s.jsx)(n.p,{children:"Langflow supports two storage backends for file management."}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Local storage"}),": Langflow's default storage backend. Files are stored locally in your ",(0,s.jsx)(n.a,{href:"/memory",children:"Langflow configuration directory"}),". Set ",(0,s.jsx)(n.code,{children:"LANGFLOW_STORAGE_TYPE=local"})," or leave it unset to use local storage."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"S3 storage"}),": Files are stored in an AWS S3 bucket.\nLangflow uses the ",(0,s.jsx)(n.a,{href:"https://boto3.amazonaws.com/v1/documentation/api/latest/index.html",children:"boto3"})," library to interact with S3."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["To use S3 as your file storage backend, add the following configuration to your ",(0,s.jsx)(n.code,{children:".env"})," file:"]}),"\n",(0,s.jsx)(h.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"# S3 Storage Configuration",props:{}}]},{tokens:[{content:"LANGFLOW_STORAGE_TYPE=s3",props:{}}]},{tokens:[{content:"LANGFLOW_OBJECT_STORAGE_BUCKET_NAME=S3_BUCKET_NAME",props:{}}]},{tokens:[{content:"LANGFLOW_OBJECT_STORAGE_PREFIX=S3_BUCKET_DIRECTORY",props:{}}]},{tokens:[{content:"",props:{}}]},{tokens:[{content:"# AWS Credentials (required for S3)",props:{}}]},{tokens:[{content:"AWS_ACCESS_KEY_ID=S3_ACCESS_KEY",props:{}}]},{tokens:[{content:"AWS_SECRET_ACCESS_KEY=S3_ACCESS_SECRET_KEY",props:{}}]},{tokens:[{content:"AWS_DEFAULT_REGION=S3_REGION",props:{}}]}],lang:"text"},annotations:[]}]}),"\n",(0,s.jsx)(n.p,{children:"Replace the following placeholders with the actual values for your S3 instance:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_BUCKET_NAME"}),": The name of your S3 bucket."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_BUCKET_DIRECTORY"}),": An optional folder path within the bucket where files are stored, such as ",(0,s.jsx)(n.code,{children:"s3://S3_BUCKET_NAME/S3_BUCKET_DIRECTORY"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_ACCESS_KEY"}),": Your AWS Access Key ID."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_ACCESS_SECRET_KEY"}),": Your AWS Secret Access Key."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_REGION"}),": The AWS region where your bucket is located, such as ",(0,s.jsx)(n.code,{children:"us-east-2"}),"."]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Your AWS credentials must have the necessary permissions to perform the required S3 operations for your use case, such as reading, writing, and deleting files in S3.\nThis example policy allows basic CRUD operations on S3 objects."}),"\n",(0,s.jsx)(h.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Version"',props:{style:{color:"#7EE787"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"2012-10-17"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Statement"',props:{style:{color:"#7EE787"}}},{content:": [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" {",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Sid"',props:{style:{color:"#7EE787"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"LangflowS3StorageAccess"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Effect"',props:{style:{color:"#7EE787"}}},{content:": ",props:{style:{color:"#C9D1D9"}}},{content:'"Allow"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Action"',props:{style:{color:"#7EE787"}}},{content:": [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "s3:PutObject"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "s3:GetObject"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "s3:DeleteObject"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "s3:ListBucket"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "s3:PutObjectTagging"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ],",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "Resource"',props:{style:{color:"#7EE787"}}},{content:": [",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "arn:aws:s3:::S3_BUCKET_NAME"',props:{style:{color:"#A5D6FF"}}},{content:",",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:' "arn:aws:s3:::S3_BUCKET_NAME/S3_BUCKET_DIRECTORY/*"',props:{style:{color:"#A5D6FF"}}}]},{tokens:[{content:" ]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" }",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:" ]",props:{style:{color:"#C9D1D9"}}}]},{tokens:[{content:"}",props:{style:{color:"#C9D1D9"}}}]}],lang:"json"},annotations:[]}]}),"\n",(0,s.jsx)(n.p,{children:"Replace the following placeholders with the actual values for your IAM policy and S3 instance:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_BUCKET_NAME"}),": The name of your S3 bucket."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"S3_BUCKET_DIRECTORY"}),": An optional folder path within the bucket where files are stored, such as ",(0,s.jsx)(n.code,{children:"s3://S3_BUCKET_NAME/S3_BUCKET_DIRECTORY"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["For more information, see the ",(0,s.jsx)(n.a,{href:"https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_change-permissions.html",children:"AWS documentation"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Google Drive"})," storage is available through the ",(0,s.jsx)(n.a,{href:"/read-file",children:(0,s.jsx)(n.strong,{children:"Read File"})})," and ",(0,s.jsx)(n.a,{href:"/write-file",children:(0,s.jsx)(n.strong,{children:"Write file"})})," components, but you cannot use environment variables to configure it."]}),"\n",(0,s.jsx)(n.h2,{id:"file-storage-environment-variables",children:"File storage environment variables"}),"\n",(0,s.jsx)(n.p,{children:"The following environment variables configure file storage backends for Langflow's file management system:"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Variable"}),(0,s.jsx)(n.th,{children:"Format"}),(0,s.jsx)(n.th,{children:"Default"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"LANGFLOW_STORAGE_TYPE"})}),(0,s.jsx)(n.td,{children:"String"}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"local"})}),(0,s.jsxs)(n.td,{children:["Set the file storage backend. Supported values: ",(0,s.jsx)(n.code,{children:"local"})," (files stored in the Langflow configuration directory) or ",(0,s.jsx)(n.code,{children:"s3"})," (files stored in AWS S3). For S3 storage, you must also configure AWS credentials and bucket settings."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"LANGFLOW_OBJECT_STORAGE_BUCKET_NAME"})}),(0,s.jsx)(n.td,{children:"String"}),(0,s.jsx)(n.td,{children:"Not set"}),(0,s.jsxs)(n.td,{children:["The name of the S3 bucket to use for file storage. Required when ",(0,s.jsx)(n.code,{children:"LANGFLOW_STORAGE_TYPE=s3"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"LANGFLOW_OBJECT_STORAGE_PREFIX"})}),(0,s.jsx)(n.td,{children:"String"}),(0,s.jsx)(n.td,{children:"Not set"}),(0,s.jsx)(n.td,{children:"Optional prefix/folder path within the S3 bucket where files will be stored. If not set, files are stored at the bucket root."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"LANGFLOW_OBJECT_STORAGE_TAGS"})}),(0,s.jsx)(n.td,{children:"JSON object"}),(0,s.jsx)(n.td,{children:"Not set"}),(0,s.jsxs)(n.td,{children:["Optional S3 object tags applied to stored files when ",(0,s.jsx)(n.code,{children:"LANGFLOW_STORAGE_TYPE=s3"}),". Ignored for local storage. Provided as a JSON map of string keys to string values, such as ",(0,s.jsx)(n.code,{children:'{"env": "prod", "owner": "data-team"}'}),"."]})]})]})]}),"\n",(0,s.jsx)(n.h2,{id:"see-also",children:"See also"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/concepts-components",children:"Components reference"})}),"\n"]})]})}function g(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(f,{...e})}):f(e)}function x(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]); \ No newline at end of file diff --git a/assets/js/8bee5443.655e0843.js b/assets/js/8bee5443.655e0843.js new file mode 100644 index 0000000000..842531d17d --- /dev/null +++ b/assets/js/8bee5443.655e0843.js @@ -0,0 +1 @@ +"use strict";(globalThis.webpackChunklangflow_docs=globalThis.webpackChunklangflow_docs||[]).push([[879],{45783:(e,n,s)=>{s.d(n,{A:()=>a});var o,r,t=s(96540);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var n=1;ntweaks with your For videos, see the Twelve Labs and YouTube Bundles.
Langflow supports two storage backends for file management:
+Langflow supports two storage backends for file management.
Local storage: Langflow's default storage backend. Files are stored locally in your Langflow configuration directory. Set LANGFLOW_STORAGE_TYPE=local or leave it unset to use local storage.
S3_BUCKET_DIRECTORY: An optional folder path within the bucket where files are stored, such as s3://S3_BUCKET_NAME/S3_BUCKET_DIRECTORY.For more information, see the AWS documentation.
+Google Drive storage is available through the Read File and Write file components, but you cannot use environment variables to configure it.
The following environment variables configure file storage backends for Langflow's file management system:
| Variable | Format | Default | Description |
|---|---|---|---|
LANGFLOW_STORAGE_TYPE | String | local | Set the file storage backend. Supported values: local (files stored in the Langflow configuration directory) or s3 (files stored in AWS S3). For S3 storage, you must also configure AWS credentials and bucket settings. |
LANGFLOW_OBJECT_STORAGE_BUCKET_NAME | String | Not set | The name of the S3 bucket to use for file storage. Required when LANGFLOW_STORAGE_TYPE=s3. |
LANGFLOW_OBJECT_STORAGE_PREFIX | String | Not set | Optional prefix/folder path within the S3 bucket where files will be stored. If not set, files are stored at the bucket root. |
LANGFLOW_OBJECT_STORAGE_TAGS | JSON object | Not set | Optional S3 object tags applied to stored files when LANGFLOW_STORAGE_TYPE=s3. Ignored for local storage. Provided as a JSON map of string keys to string values, such as {"env": "prod", "owner": "data-team"}. |
You can add files to the Read File component in the visual editor or at runtime, and you can upload multiple files at once. For more information about uploading files and working with files in flows, see File management and Create a chatbot that can ingest files.
+The Read File component can read files from the local Langflow database, AWS S3, or Google Drive. +For more information, see Configure file storage.
By default, the maximum file size is 1024 MB.
To modify this value, change the LANGFLOW_MAX_FILE_SIZE_UPLOAD environment variable.
Changes to read/write file components
The Save File component was renamed to Write File, and it can now save to S3 and Google Drive. -The File component was renamed to Read File. +The File component was renamed to Read File, and it can now read from AWS S3 and Google Drive. Both components support Tool Mode.
Click Storage Location, and then select Local, AWS, or Google Drive. +If required, enter your cloud provider's credentials. +For more information, see Configure file storage.
+In File Name, enter a file name and an optional path.
The File Name parameter controls where the file is saved. It can contain a file name or an entire file path:
@@ -81,7 +86,7 @@ For example,~/Desktop/my_file saves my_file to the de
If you do, the extension is treated as part of the file name; it has no impact on the File Format parameter.
In the component's header menu, click Controls, select the desired file format, and then click Close.
+Select the desired file format, and then click Close.
The available File Format options depend on the input data type: