File upload issue with GraphQL

[nathan-charles]

Issue Description

I'm trying to upload a file from React to parse server using GraphQL but i'm getting the below response back.

{
  "errors": [
    {
      "message": "Invalid file upload.",
      "locations": [
        {
          "line": 3,
          "column": 5
        }
      ],
      "path": [
        "files",
        "create"
      ],
      "extensions": {
        "code": 130,
        "exception": {
          "stacktrace": [
            "Error: Invalid file upload.",
            "    at toGraphQLError (/usr/src/app/node_modules/parse-server/lib/GraphQL/parseGraphQLUtils.js:25:10)",
            "    at ParseGraphQLSchema.handleError (/usr/src/app/node_modules/parse-server/lib/GraphQL/ParseGraphQLSchema.js:173:49)",
            "    at resolve (/usr/src/app/node_modules/parse-server/lib/GraphQL/loaders/filesMutations.js:77:28)",
            "    at processTicksAndRejections (internal/process/task_queues.js:89:5)",
            "    at async Promise.all (index 0)"
          ]
        }
      }
    }
  ],
  "data": {
    "files": null
  }
}

Here is my React code

import React from 'react';
import { ApolloProvider } from 'react-apollo';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { createUploadLink } from 'apollo-upload-client';
import { Mutation } from 'react-apollo';
import gql from 'graphql-tag';

const uploadLink = createUploadLink({
  uri: 'https://parseapi.back4app.com/graphql',
  headers: {
    'X-Parse-Application-Id': '####',
    'X-Parse-Client-Key': '###',
  },
});

const client = new ApolloClient({
  link: uploadLink,
  cache: new InMemoryCache(),
});

export const UPLOAD_FILE = gql`
  mutation uploadFile($file: Upload!) {
    files {
      create(file: $file) {
        name
        url
      }
    }
  }
`;

function App() {
  return (
    <ApolloProvider client={client}>
      <Mutation mutation={UPLOAD_FILE}>
        {uploadFile => (
          <input
            type="file"
            required
            onChange={({ target: { validity, files: [file] } }) =>
              validity.valid && uploadFile({ variables: { file } })
            }
          />
        )}
      </Mutation>
    </ApolloProvider>
  );
}

export default App;

Environment Setup

• Server
  • parse-server version : 3.7.2
  • Hosted on Back4App

[davimacedo]

@nathan-charles thanks for reporting. Do you mind to inspect the request in your web browser and share the headers and body that your react application is sending to the GraphQL API?

[nathan-charles]

@davimacedo

Headers

accept: */*
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryr8Qni2Y99X148u3u
Origin: http://localhost:3000
Referer: http://localhost:3000/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
X-Parse-Application-Id: ***
X-Parse-Client-Key: ***

Body

------WebKitFormBoundaryr8Qni2Y99X148u3u
Content-Disposition: form-data; name="operations"

{"operationName":"uploadFile","variables":{"file":null},"query":"mutation uploadFile($file: Upload!) {\n  files {\n    create(file: $file) {\n      name\n      url\n      __typename\n    }\n    __typename\n  }\n}\n"}
------WebKitFormBoundaryr8Qni2Y99X148u3u
Content-Disposition: form-data; name="map"

{"1":["variables.file"]}
------WebKitFormBoundaryr8Qni2Y99X148u3u
Content-Disposition: form-data; name="1"; filename="A2D7484E-6BAD-402E-AC7B-520313536669.jpeg"
Content-Type: image/jpeg


------WebKitFormBoundaryr8Qni2Y99X148u3u--

[nathan-charles]

@Moumouls According to this that should be correct: https://github.com/jaydenseric/graphql-multipart-request-spec/blob/master/readme.md#multipart-form-field-structure

This is just minimal example to demonstrate the problem but on my app it does have the file that is sent when i console log before posting

[Moumouls]

@davimacedo i'm probably wrong but it seems that the content is empty

We do not allow empty files ?

if (!data || !data.length) {
  throw new Parse.Error(
    Parse.Error.FILE_SAVE_ERROR,
    'Invalid file upload.'
  );
}

[davimacedo]

I think we have a bug here. I am trying to figure it out. I will keep you guys posted.

[davimacedo]

These two PRs should fix the issue.

[nathan-charles]

Thanks! @davimacedo When will this be available on back4app?

[davimacedo]

@nathan-charles as soon as we have a new release of Parse Server it should be also available at Back4App.

[nathan-charles]

Hi @davimacedo I just tested with the new release (3.8.0) on back4app for some reason i'm still getting an error. I also see this in the response headers "Error from cloudfront" not sure if this is parse server related or back4app issue. Thanks

[davimacedo]

@nathan-charles do you mind to open a ticket at Back4App sending your app id so they guys there can investigate your case? Tks.

[aacassandra]

hello @davimacedo , what version has this been fixed on parse-server? i, use 3.8.0-3.9.0 and still getting error for uploading file

[mtrezza]

@aacassandra Please try with the latest version of Parse Server (4.6.10 and/or 5.0-beta) to see whether the still exists. If the issue still exists, please open a new issue and reference this issue. We do not look into issues in old versions that may have been already fixed in newer versions.