Error: upload.arrayBuffer is not a function

[VKlapan]

New Issue Checklist

• I am not disclosing a vulnerability.
• I am not just asking a question.
• I have searched through existing issues.
• I can reproduce the issue with the latest version of Parse Server.

Issue Description

When I try to upload a file (via Parse Dashboard GraphQL API Console) I receive an error:
"upload.arrayBuffer is not a function".
Do not understand - what is wrong?

Steps to reproduce

Try to check file uploading via Parse Dashboard GraphQL API Console.
Query:
mutation createFile($file: Upload!) { createFile(input: {upload:$file}) { fileInfo { name url } } }
Variables - base64 string:
{ "file":"V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE=" }

Actual Outcome

Response:
{ "errors": [ { "message": "upload.arrayBuffer is not a function", "locations": [ { "line": 2, "column": 3 } ], "path": [ "createFile" ] } ], "data": { "createFile": null } }

Expected Outcome

Environment

Server

• Parse Server version: 6.0.0
• Operating system: Linux Mint 20.2 Cinnamon and docker
• Local or remote host (AWS, Azure, Google Cloud, Heroku, Digital Ocean, etc): local

Database

• System (MongoDB or Postgres): MongoDB
• Database version: mongo:4
• Local or remote host (MongoDB Atlas, mLab, AWS, Azure, Google Cloud, etc): local

Client

• SDK (iOS, Android, JavaScript, PHP, Unity, etc): JavaScript
• SDK version: "@types/parse": "^2.18.13"

Logs

server config:

`
Successfully compiled 1 file with Babel (297ms).
SERVER CONFIG
Configuration loaded from /parse-server/config/server.js
warn: DeprecationWarning: The Parse Server option 'allowClientClassCreation' default will change to 'false' in a future version.
warn: DeprecationWarning: The Parse Server option 'allowExpiredAuthDataToken' default will change to 'false' in a future version.
RUN Parse Server Cloud
allowClientClassCreation: true
allowCustomObjectId: false
allowExpiredAuthDataToken: true
allowHeaders: ["X-Apollo-Tracing"]
appId: parse-template
appName: Parse Template
cacheMaxSize: 10000
cacheTTL: 5000
cloud: /parse-server/cloud-dist
collectionPrefix:
customPages: {"invalidLink":"http://localhost/invalid-link","invalidVerificationLink":"http://localhost/invalid-verification-link","passwordResetSuccess":"http://localhost/password-reset-success","choosePassword":"http://localhost/choose-password"}
databaseURI: mongodb://db/parse
defaultLimit: 100
directAccess: true
emailAdapter: {"options":{"service":"SMTP","fromAddress":"dev@.com","user":"dev@","password":"","host":"mail..com","port":587,"isSSL":false,"templates":{"resetPassword":{"path":"/parse-server/templates/reset-password","subject":"Password reset"},"verifyEmail":{"path":"/parse-server/templates/verify-email","subject":"Email verification"}}}}
emailVerifyTokenReuseIfValid: false
emailVerifyTokenValidityDuration: 7200
enableAnonymousUsers: true
enableExpressErrorHandler: false
enforcePrivateUsers: true
expireInactiveSessions: true
filesAdapter: {"_encryptionKey":null,"_filesDir":"/parse-server/files"}
fileUpload: {"enableForPublic":true,"enableForAnonymousUser":true,"enableForAuthenticatedUser":true}
graphQLPath: /graphql
graphQLSchema: /parse-server/schema.graphql
host: 0.0.0.0
idempotencyOptions: {"ttl":300,"paths":[]}
liveQuery: {"classNames":[]}
logLevel: warn
logLevels: {"triggerAfter":"info","triggerBeforeError":"error","triggerBeforeSuccess":"info"}
logsFolder: ./logs
maintenanceKeyIps: ["127.0.0.1","::1"]
masterKey: REDACTED
masterKeyIps: ["172.30.0.0/16"]
maxUploadSize: 4000mb
mountGraphQL: true
mountPath: /
mountPlayground: false
objectIdSize: 10
pages: {"enableRouter":false,"enableLocalization":false,"localizationFallbackLocale":"en","placeholders":{},"forceRedirect":false,"pagesPath":"./public","pagesEndpoint":"apps","customUrls":{},"customRoutes":[]}
passwordPolicy: {"doNotAllowUsername":true,"resetTokenValidityDuration":10800}
playgroundPath: /playground
port: 1337
preserveFileName: false
preventLoginWithUnverifiedEmail: false
protectedFields: {"_User":{"":["email"],"role:admin":[]}}
publicServerURL: http://localhost:1337
rateLimit: []
requestKeywordDenylist: [{"key":"_bsontype","value":"Code"},{"key":"constructor"},{"key":"proto"}]
restAPIKey: asd78sd897df09as87dfh09asd
revokeSessionOnPasswordReset: true
scheduledPush: false
security: {"enableCheck":false,"enableCheckLog":false}
sessionLength: 31536000
startLiveQueryServer: true
trustProxy: []
verbose: false
verifyUserEmails: true
jsonLogs: false
level: undefined
serverURL: http://localhost:1337/
state: initialized

`

[parse-github-assistant]

Thanks for opening this issue!

• 🚀 You can help us to fix this issue faster by opening a pull request with a failing test. See our Contribution Guide for how to make a pull request, or read our New Contributor's Guide if this is your first time contributing.

[Moumouls]

Hi @VKlapan,

Parse GraphQL server follow the multi part graphql upload spec. You can't simply call a mutation into the Dashboard GraphQL console. Parse GraphQL server does not support base 64 file upload ( it's also a really bad practice since it do not leverage streaming, multi part http systems)

You can see some client side examples: https://github.com/jaydenseric/graphql-multipart-request-spec
If you need to upload an image using the dashboard i can suggest you to just use the "Browser" section.

Or you can give a try to https://altairgraphql.dev/ that support multi part file upload.

[mtrezza]

I'm closing this as it does not seem to be a Parse Server issue.

• For help with Parse Platform we recommend our community forum or our community chat
• For general coding questions we recommend Stack Overflow using the parse-platform tag
• For network and server questions we recommend ServerFault using the parse-server tag

[VKlapan]

Hi @VKlapan,

Parse GraphQL server follow the multi part graphql upload spec. You can't simply call a mutation into the Dashboard GraphQL console. Parse GraphQL server does not support base 64 file upload ( it's also a really bad practice since it do not leverage streaming, multi part http systems)

You can see some client side examples: https://github.com/jaydenseric/graphql-multipart-request-spec If you need to upload an image using the dashboard i can suggest you to just use the "Browser" section.

Or you can give a try to https://altairgraphql.dev/ that support multi part file upload.

Thanks.
I'll try to use your tips.

[VKlapan]

So...
I've tried to use information from examples: https://github.com/jaydenseric/graphql-multipart-request-spec
but with zero result (

For example, I have a question:
Is this example correct and it has to work?
https://github.com/jaydenseric/graphql-multipart-request-spec#curl-request

But I have error: {"error":"Unexpected token - in JSON at position 0"}
Why?

[VKlapan]

a few more details:

I have this error on my parse server 6.0.0 :

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Does anybody know how to fix it ?

[Moumouls]

Hi @VKlapan we can't help here until you provide more details to reproduce the error, can you share a failing test or a reproduction repository.

I use the alpha release of Parse Server in production with file upload, my team has a lot of upload tests we don't have any issue.

[VKlapan]

Hi @Moumouls
I just try to learn Parse Server now so I don't have either any tests or reproduction repository. I have the simplest code to use base mutation createFile - createFile(input: CreateFileInput!): CreateFilePayload :

on web app

const [file, setFile] = useState<File | undefined>(undefined);

  const MUTATION = gql'
    mutation createFile($file: Upload!) {
      createFile(input: {upload: $file}) {
        fileInfo {
          name
          url
        }
      }
    }
  ';

  const [mutate] = useMutation(MUTATION);

  const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target && event.target.files) {
      const inputedFile = event.target.files[0];
      setFile(inputedFile);
    }
  };

  const onClickHandler = () => {
    console.log('onClick \n', file);
    mutate({variables: {file}});
  };

Payload on DevTools/Neywork:
https://monosnap.com/direct/PjTfG1Uh4kwucPQhnFDVQc3k0Nj2Tm

response:
{"error":"Unexpected token - in JSON at position 0"}

server log:

[47] parse-server running on http://localhost:1337/ [47] GraphQL running on http://localhost:1337/graphql Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client at new NodeError (node:internal/errors:400:5) at ServerResponse.setHeader (node:_http_outgoing:663:11) at ServerResponse.header (/parse-server/node_modules/express/lib/response.js:794:10) at ServerResponse.send (/parse-server/node_modules/express/lib/response.js:174:12) at ServerResponse.json (/parse-server/node_modules/express/lib/response.js:278:15) at handleParseErrors (/parse-server/lib/middlewares.js:398:9) at Layer.handle_error (/parse-server/node_modules/express/lib/router/layer.js:71:5) at trim_prefix (/parse-server/node_modules/express/lib/router/index.js:326:13) at /parse-server/node_modules/express/lib/router/index.js:286:9 at Function.process_params (/parse-server/node_modules/express/lib/router/index.js:346:12) at next (/parse-server/node_modules/express/lib/router/index.js:280:10) at Layer.handle_error (/parse-server/node_modules/express/lib/router/layer.js:67:12) at trim_prefix (/parse-server/node_modules/express/lib/router/index.js:326:13) at /parse-server/node_modules/express/lib/router/index.js:286:9 at Function.process_params (/parse-server/node_modules/express/lib/router/index.js:346:12) at next (/parse-server/node_modules/express/lib/router/index.js:280:10)

[Moumouls]

Hi @VKlapan , you have may be forgot to use a compatible upload client ?

Like: https://www.apollographql.com/docs/react/data/file-uploads/

[VKlapan]

@Moumouls
Hm...
I think that I do it, don't I?:
package.json:

"dependencies": {
"@ant-design/icons": "^4.0.2",
"@apollo/client": "^3.7.12",
"@apollo/react-hooks": "^4.0.0",
"@umijs/hooks": "^1.8.0",
"antd": "^4.0.0",
"apollo-upload-client": "^17.0.0",
"graphql": "^16.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-infinite-scroller": "^1.2.4",
"react-router-dom": "^6.10.0",
"react-scripts": "5.0.1",
"styled-components": "^5.0.1"
},

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});
client.defaultOptions = defaultOptions;

const Provider: React.FC<PropsWithChildren> = ({children}) => (
  <ApolloProvider client={client}>{children}</ApolloProvider>
);

export default Provider;

[Moumouls]

Did you setup correctly the Apollo upload link ?

[VKlapan]

@Moumouls

Did you setup correctly the Apollo upload link ?

I'm not sure((((
Can you give me some hints?

UPD:
Is it correct?

import {createUploadLink} from 'apollo-upload-client';

const httpLink = createUploadLink({
  uri: GRAPHQL_URI,
});

[Moumouls]

import { createUploadLink } from 'apollo-upload-client'
import {
	InMemoryCache,
	ApolloClient,
} from '@apollo/client'

const options = const options = {
			uri: graphQLUrl,
		}
const client = new ApolloClient({
				cache: new InMemoryCache(),
				link: createUploadLink(options),
			})

You client should be initialized like this @VKlapan