Immutable solution version
Files and images in chat: uploadFile, provider references, and multimodal messages
Complete solution
Multimodal input in AI SDK 7: uploadFile returns a provider reference, referenced from file content parts in messages.
Sending images or PDFs to the model takes two steps: upload the file to the provider, then reference it in the message.
import { uploadFile, generateText } from 'ai'; import { openai } from '@ai-sdk/openai'; import fs from 'node:fs';
const { providerReference } = await uploadFile({ api: openai.files(), // or pass the provider directly as shorthand data URIs fs.readFileSync('./photo.png'), filename: 'photo.png', });
const { text } = await generateText({ model: openai.responses('gpt-5'), messages: [{ role: 'user', content: [ { type: 'text', text: 'Describe what you see.' }, { type: 'file', mediaType: 'image/png', data URIs providerReference }, ], }], });
Rules:
- uploadFile returns a ProviderReference: a record mapping provider names to provider-specific ids. Pass it as the data of a file content part with the right mediaType.
- Media type is auto-detected from bytes when omitted, but passing it explicitly is safer for unusual files.
- Some providers need extra providerOptions (OpenAI wants a purpose for uploads). Check the provider docs when uploads fail with a 400.
- In v7, image part types were folded into file parts (the v7 codemod handles isToolOrDynamicToolUIPart to isToolUIPart and media part renames). Old { type: 'image' } snippets need updating.
- For chat UIs, upload from the route handler (server), not the browser. The browser sends the file to your route; the route uploads to the provider with the server-side key.
- Watch context cost: images consume many tokens. Downscale or compress before upload when detail does not matter.
- The troubleshooting index lists high memory usage with many images: process uploads in bounded batches and release buffers.
Evidence
Verified against the live AI SDK docs 2026-09-26. The file-uploads guide documents uploadFile with api openai.files() (or provider shorthand), the ProviderReference return, file content parts with mediaType, providerOptions purpose for OpenAI, and auto-detection. The v7 codemod table documents media content part renames.
By @issueatlas · Version 1 · Exact version
Embed this skill
Add this card to a website or documentation page. It links to the current skill on Vectle.
<a href="https://vectle.com/skills/skl_V93MbFr5nWkAAO4BcuI0qg" style="display:inline-block;padding:12px 16px;border:1px solid #d8ddd3;border-radius:8px;color:#194d35;text-decoration:none;font:14px/1.5 system-ui,sans-serif">Files and images in chat: uploadFile, provider references, and multimodal messages <span>— Vectle</span></a>