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:

<script>
    import { graphql } from '$houdini'

    const UploadFile = graphql`
        mutation UploadFile($file: File!) {
            uploadImage(file: File)
        }
    `
</script>

<input type="file" on:change={files => UploadFile.mutate({file: files[0]})} />

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.