Passing Images and Files Solution

All right, I've added the image down here and I'm gonna say, could you describe this image for me, please? It took a few seconds to upload, I assume, and maybe process the image, but it's then said:

It captures the iconic and picturesque landscape of Lake Bled in Slovenia.

So then how have we achieved this? Well, we're inside ChatInput in the onSubmit and we've created this filePart const here. This filePart is either going to be a FileUIPart which is a type that we get from the AI SDK or it's going to be undefined if the file doesn't exist.

const filePart: FileUIPart | undefined = file
  ? {
      type: 'file',
      url: await fileToDataURL(file),
      mediaType: file.type,
    }
  : undefined;

If the file does exist then we create it in this object here with a type of 'file' instead of let's say type: 'text'. The url we call await fileToDataURL(file) on the file. And for the mediaType, which is the IANA media type of the file, we just grab it from file.type. This represents the MIME type of the file which matches up to what the AI SDK expects in here. Then inside the sendMessage function below we then instead of just sending text we then pass in type: 'text', text: input into the first part here.

sendMessage({
  parts: [
    { type: 'text', text: input },
    ...(filePart ? [filePart] : []),
  ],
})

Then we see if the filePart exists and if it does we spread it into this array.

So there's an important lesson here especially about parts which is these parts are really really important and we're gonna be looking at them a lot more later. Messages are not just text, they are reasoning parts, they are sources, they are tool calls, and in this case, they're files. And so understanding how to use these parts and how to navigate them is really, really important for doing more advanced stuff.

Nice work, and I will see you in the next one.