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 lang="ts">
    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]})
    }
/>

<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.