3

I'm trying to upload a file using graphql and graphene.

On frontend I have fetch request as follows:

fetch(
            '/graphql', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({query: MUTATION, variables: {file: file}})
            })
            .then(res => res.json())
            .then(res => {
                debugger;
            })
            .catch(error => {
                debugger;
            });

And mutation is as follows:

const MUTATION = `mutation UploadMutation($file: Upload!) { 
        uploadMutation(file: $file) { 
            ok                
            url
        }
    }`;

And on the backend side I have mutation as follows:

class UploadMutation(graphene.Mutation):
    class Arguments:
        file = Upload(required=True)

    ok = graphene.Boolean()
    url = graphene.String()

    def mutate(root, info, file, **kwargs):
        url = handle_upload_file(file)
        ok = True

        return UploadMutation(ok=ok, url=url)

The uploaded file is as follows:

lastModified: 1569487573753
lastModifiedDate: Thu Sep 26 2019 10:46:13 GMT+0200 (Central European Summer Time) {}
name: "1.png"
path: "1.png"
size: 138373
type: "image/png"
webkitRelativePath: ""

But in the mutate function I get:

{'path': '1.png'}

Any idea what am I doing wrong?

Boky
  • 11,554
  • 28
  • 93
  • 163
  • 2
    you're not searching ... explained many times ... upload needs multipart – xadm Jul 20 '20 at 18:47
  • @xadm Ok. And how to do that in this case? – Boky Jul 20 '20 at 18:48
  • 1
    as always ... search for postman example ... check/prepare backend ... recreate postman request with react – xadm Jul 20 '20 at 18:54
  • @xadm That is not any help. Thanks. I'll do as always. ;-) – Boky Jul 20 '20 at 18:55
  • 1
    to wide question .... should I search for duplicate and suggest closing it instead? or write next tutorial;as an answer? just follow hints, use earlier answers (many with react and python), google .... back with more detailed (but closer to standard solutions) problem ... or wait for someone else – xadm Jul 20 '20 at 19:34
  • @xamd Dude, you do not understand what I want to ask. And I ask it because I could not find it. Its not pure file upload with react and python. If you cant help you do not need to comment: that can be found somewhere on the internet or something else. If you can help, than help, otherwise you do not need to write something what nobody can use. Thanks but please do not "help" anymore. – Boky Jul 20 '20 at 19:46
  • 1
    I know exactly what you're searching for.... react+graphql+upload+python is quite popular problem, helped with many of them ... searching is the key... I just don't see which of `"graphql upload graphene-django"` google's result you're following? Separate problems, it won't be still "a special case" – xadm Jul 20 '20 at 20:13
  • You sending wrong header and not using FormData. https://flaviocopes.com/how-to-upload-files-fetch/ – Gennady Dogaev Jul 21 '20 at 13:44

0 Answers0