Firstly, thanks.
I'm trying to upload files through GraphQL to a Firebase Cloud Storage.
I've been using this in conjunction with Firebase Cloud Functions and an Apollo GraphQL Express Server. I am still getting the following error:
BadRequestError: Missing multipart field ‘operations’ (https://github.com/jaydenseric/graphql-multipart-request-spec).
with a 400 bad request
Here is my cURL
curl 'http://localhost:5000/my-app/us-central1/api' -H 'accept: */*' -H 'Referer: http://localhost:3001/' -H 'Origin: http://localhost:3001' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36' -H 'Sec-Fetch-Mode: cors' -H 'Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryBEn54vJZH3hg1sBm' --data-binary $'------WebKitFormBoundaryBEn54vJZH3hg1sBm\r\nContent-Disposition: form-data; name="operations"\r\n\r\n{"operationName":"SingleUpload","variables":{"file":null},"query":"mutation SingleUpload($file: Upload\u0021) {\\n singleUpload(file: $file) {\\n filename\\n mimetype\\n encoding\\n __typename\\n }\\n}\\n"}\r\n------WebKitFormBoundaryBEn54vJZH3hg1sBm\r\nContent-Disposition: form-data; name="map"\r\n\r\n{"1":["variables.file"]}\r\n------WebKitFormBoundaryBEn54vJZH3hg1sBm\r\nContent-Disposition: form-data; name="1"; filename="00n0n_bEJWcIpml9s_600x450.jpg"\r\nContent-Type: image/jpeg\r\n\r\n\r\n------WebKitFormBoundaryBEn54vJZH3hg1sBm--\r\n' --compressed
My server setup looks like this:
const express = require('express')
const cors = require('cors');
const { ApolloServer } = require('apollo-server-express')
const fileParser = require('express-multipart-file-parser')
const schema = require('./schema')
const resolvers = require('./resolvers')
const app = express();
// cors allows our server to accept requests from different origins
app.use(cors());
app.options('*', cors());
app.use(fileParser)
// setup server
const server = new ApolloServer({
typeDefs: schema,
resolvers,
introspection: true, // so we can access the playground in production reference: https://www.apollographql.com/docs/apollo-server/api/apollo-server/#constructor-options-lt-ApolloServer-gt
playground: true,
uploads: {
// Limits here should be stricter than config for surrounding
// infrastructure such as Nginx so errors can be handled elegantly by
// graphql-upload:
// https://github.com/jaydenseric/graphql-upload#type-processrequestoptions
maxFileSize: 10000000, // 10 MB
maxFiles: 1
},
})
server.applyMiddleware({ app, path: '/', cors: true })
I've logged throughout your NPM module and I do get to this part
busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
let fileBuffer = Buffer.from('')
file.on('data', (data) => { fileBuffer = Buffer.concat([fileBuffer, data]) })
console.log('here!!', file, filename)
console.log('fileBuffer', fileBuffer)
file.on('end', () => {
req.files.push({
fieldname,
originalname: filename,
encoding,
mimetype,
buffer: fileBuffer,
})
console.log('END!', fileBuffer)
})
})
busboy.on('finish', () => {
console.log( 'busboy finish')
next()
})
Am I missing some small thing in my setup that I've overlooked?