Uploading Files

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
}

With that defined, the only thing that’s left is to have the user select a file with an <input type="file"/> element and pass it to the mutation.

UploadFile.tsx

import { graphql, useMutation } from '$houdini'

export function UploadFile() {
    const uploadFile = useMutation(graphql(`
        mutation UploadFile($file: File!) {
            uploadImage(file: $file)
        }
    `))

    return (
        <input
            type="file"
            onChange={(event) => {
                const file = event.currentTarget.files?.[0]

                if (file) {
                    uploadFile({ file })
                }
            }}
        />
    )
}

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.