File Uploads

Handling file uploads begins with your schema. First, define a scalar (we'll call it File) and define your mutation to receive a file as an input:

scalar File

type Mutation {
  uploadImage(file: File): UploadImageResult
}

As long as your server understands the GraphQL multipart request specification, you're done. Your mutation's resolver will receive an instance of a file that you can use however you want. For a list of servers that support this spec, you can visit this link.

Wiring a File Input

Pass a File directly as a mutation variable. Houdini detects it and switches to a multipart request automatically with no extra configuration needed:

import { graphql, useMutation } from '$houdini'

export function UploadForm() {
  const [mutate, pending] = useMutation(graphql(`
    mutation UploadFile($file: File!) {
      uploadImage(file: $file)
    }
  `))

  return (
    <input
      type="file"
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0]
        if (file) mutate({ variables: { file } })
      }}
    />
  )
}

import { graphql, useMutation } from '$houdini'

export function UploadForm() {
    const [mutate, pending] = useMutation(graphql(`
    mutation UploadFile($file: File!) {
      uploadImage(file: $file)
    }
  `))

    return (
        <input type="file" onChange={(e) => {
            const file = e.target.files?.[0]
            if (file)
                mutate({ variables: { file } })
        }}/>)
}