Wagail / Graphene Mutation with image upload example

Here’s some example code of how to setup a mutation with an image file upload for a Wagtail Image field, then how to test in Postman (Postman is a useful tool for testing APIs etc)

It took me a while to figure out how to use Postman to send a mutation query with a file to graphene, so hopefully this will save someone some time.

This code is for Wagtail 1.13.1 and Graphene  2.0.1, graphene-django 2.0.0


from __future__ import unicode_literals

import graphene
from graphene_django import DjangoObjectType
from graphene import ObjectType, Field, Schema
from graphene.types.generic import GenericScalar

from myapp.models import MarketItem

from django.db import models
from django.core import serializers

from wagtail.wagtailcore.models import Collection
from wagtail.wagtailimages.models import Image

...

class Upload(graphene.Scalar):
    def serialize(self):
        pass

class CreateMarketItem(graphene.Mutation):

    id = graphene.Int()
    title = graphene.String()
    description = graphene.String()
    item_image = Upload()

    class Arguments:
        title = graphene.String()
        description = graphene.String()
        item_image = Upload()

    def mutate(self, info, title, description):
        marketitem = MarketItem(title=title, description=description)
        if info.context.FILES and info.context.method == 'POST':
            root_collection = Collection.get_first_root_node()
            thefile = info.context.FILES['itemImage']
            users_image = Image.objects.create(
            file=thefile,
            title=title,
            collection=root_collection
            )
            marketitem.item_image = users_image

        marketitem.save()

        return CreateMarketItem(
            id=marketitem.id,
            title=marketitem.title,
            description=marketitem.description
        )

...

class Mutation(ObjectType):
    create_marketitem = CreateMarketItem.Field()     

schema = graphene.Schema(query=Query,  mutation=Mutation,types=[Upload])

Testing with Postman

First setup a new POST request pointing to your GraphQL endpoint, then in the Body, under form-date add a key for the file and one for the query as below :

Then go to headers and add the following :

Advertisements

One thought on “Wagail / Graphene Mutation with image upload example

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.