Need help with Express api upload via Insomania

[viiiprock]

Thanks @jaydenseric for this plugin, I'm working on Express API (mongodb, apollo server off course ) and using Insomania to test all my features.

Here is my code

index.js

const helperMiddleware = [
  bodyParser.json(),
  bodyParser.urlencoded({ extended: true }),
  bodyParser.text({ type: 'application/graphql' }),
  (req, res, next) => {
    if (req.is('application/graphql')) {
      req.body = { query: req.body }
    }
    next()
  }
]

const buildOptions = async (req, res) => {
  res.removeHeader("X-Powered-By") // remove x power headers
  const mongo = await connectMongo()
  const user = await authentication(req, res, mongo.Users)
  return {
    schema,
    context: {
      mongo,
      dataloaders: buildDataloaders(mongo),
      user
    },
    // tracing: true
  }
}

app.use(
  '/api',
  ...helperMiddleware,
  apolloUploadExpress({
    maxFileSize: 5 * 1000,
    maxFiles: 5
  }),
  graphqlExpress(buildOptions)
)

schema

type Image {
  # upload
  id: ID!
  path: String!
  filename: String!
  mimetype: String!
  encoding: String!
  # data
  caption: String
  created_by: User!
  created_date: Datetime
  width: Int
  height: Int
  url: String
  album: Album
  variants: [ImageVariant]
}

mutation schema

uploadImage(files: [Upload!]!): [Image!]

resolver

const imgDir = './public/uploads'
const storeUpload = async ({ stream, filename }) => {
  const id = uuid.v4()
  const path = `${imgDir}/${id}-${filename}`
  return new Promise((resolve, reject) =>
    stream
      .pipe(createWriteStream(path))
      .on('finish', () => resolve({ id, path }))
      .on('error', reject)
  )
}

const processUpload = async (upload, Images) => {
  const { stream, filename, mimetype, encoding } = await upload
  const { id, path } = await storeUpload({ stream, filename })
  const newImage = { id, filename, mimetype, encoding, path }
  const response = await Images.insert(newImage)
  return Object.assign({ id: response.insertedIds[0] }, newImage)
}

export const uploadImage = async (root, data, { mongo: { Images }, user }) => processUpload(data.files, Images)

Insomania
Query

mutation Upload($files: [Upload!]!) { 
	uploadImg(files: $files) {
		filename
		encoding
		mimetype
		path
	}
}

Expected

• Upload multiple images within maximum 5 files (and maximum 5MB for each)
• Insert data to db

Result

Non-stop sending data request in Insomania

I don't know what I missed, would you please help me out, I'm kind of newbie.

Thank you.

[jaydenseric]

Most likely this will start working as expected once I merge and release this PR for better error handling.

Sorry for the confusion!

[viiiprock]

yay! nice to hear, keeping on waiting, thanks @jaydenseric :)

[jaydenseric]

apollo-upload-server v4.0.0-alpha.2 is out! Please give it a go and see if it resolves your issue 🙏

The apollo-upload-examples API has been updated accordingly, so perhaps take a look at the changes to error handling.

[viiiprock]

Nice!!! let me try.

[viiiprock]

failed, I used your example to test but seems it's not work with Insomnia (not supported - I guess), I might need a front-end.
Thanks @jaydenseric

[jaydenseric]

Oh, I looked at what you were actually trying to do, and it looks like you are sending the wrong structure for the multipart form which needs to match this spec.

The update mentioned should have given you an error explaining that though.

[viiiprock]

you're right, my misunderstood

query

mutation FileUpload($file: Upload!) {
	singleUpload(file: $file) {
		id
		filename
		encoding
		mimetype
		path
	}
}

variables

{
	file: null  // https://github.com/jaydenseric/graphql-multipart-request-spec/issues/4
}

map

{
	"1": ["variables.file"]
}

off course the response wrong structure as Misordered multipart fields, I'm trying to figure out how to set request payload correctly.

[jaydenseric]

You're getting closer 😛

The reason that did not work is because the query, operationName and variables multipart form fields don't exist in the spec, and the required operations field is missing.

You might find it useful to study the construction of the requests in the apollo-upload-server tests.

Most people never have to manually construct requests like this; everything is done for you by apollo-upload-client.

[viiiprock]

yes, follow your example and use apollo-upload-client is more easier for me to make it work, I'll learn more about the test case, thanks in advance @jaydenseric

[aarabmed]

@viiiprock , im newbie and im confused on how you did accomplish to upload files, therefore for more guidance i would like to read your full code to understand the work flow, could you please provide me your full code or its repository ?
THANK YOU =)

[viiiprock]

Well, the document is quite clear, you can read it, if you use Apollo can read the docs at here
https://www.apollographql.com/docs/apollo-server/features/file-uploads/

My team has moved to Go & gRPC so I my code is not updated for a while, just post a snippet here in if it helpful

Graphql type

type Image {
  # upload
  id: ID!
  filename: String!
  mimetype: String!
  encoding: String!
  path: String!
  pathM: String!
  pathS: String!
  pathXS: String!
  # data
  caption: String
  created_by: User!
  created_date: Datetime
  updated_date: Datetime
  album: Album
}

type Mutation {
 uploadImage(album: String, images: [Upload!]!): [Image!]
}

Sharp middleware for image preprocessor

import { createWriteStream, unlinkSync } from 'fs'
import mkdirp from 'mkdirp'
import sharp from 'sharp'
import uuid from 'uuid'

const uploadDir = './public/uploads'
// Ensure upload directory exists
mkdirp.sync(`${uploadDir}/large`)
mkdirp.sync(`${uploadDir}/medium`)
mkdirp.sync(`${uploadDir}/small`)
mkdirp.sync(`${uploadDir}/thumb`)

const storeFS = ({ stream, filename }) => {
  const id = uuid.v4()
  const outputName = `${id}_${filename}`
  const path = `${uploadDir}/large/${outputName}`

  const imgResizer = sharp()
    .resize(1080, 1080)
    .withMetadata()
    .max()

  return new Promise((resolve, reject) => {
    stream
      // Upload Error message handle
      .on('error', error => {
        if (error || stream.truncated)
          unlinkSync(path)
        reject(error)
      })
      .pipe(imgResizer)
      .on('error', error => reject(error))
      .pipe(createWriteStream(path))
      .on('error', error => reject(error))
      .on('finish', () => resolve({ id, path, outputName }))
  })
}

export const processUpload = async upload => {
  const { stream, filename, mimetype, encoding } = await upload
  const { id, path, outputName } = await storeFS({ stream, filename })

  const pathM = `${uploadDir}/medium/${outputName}`
  const pathS = `${uploadDir}/small/${outputName}`
  const pathXS = `${uploadDir}/thumb/${outputName}`

  const sizes = [
    { path: pathM, xy: 800 },
    { path: pathS, xy: 400 },
    { path: pathXS, xy: 100 }
  ]

  await Promise.all(sizes.map(size => sharp(path)
    .resize(size.xy, size.xy)
    .withMetadata()
    .max()
    .toFile(size.path, error => {
      if (error) {
        throw new Error(error)
      }
    })
  ))

  return { id, filename, mimetype, encoding, path, pathM, pathS, pathXS }
}

Upload resolver

import { ObjectID } from 'mongodb'
import { all } from 'promises-all'
import { processUpload } from '../../../middleware/image'

...

export const uploadImage = async (root, data, { mongo: { Albums, Images }, user }) => {
  await requiredAuth(user)
  const { resolve, reject } = await all(data.images.map(processUpload))

  if (reject.length) {
    reject.forEach(({ name, message }) => {
      throw new Error(`${name}: ${message}`)
    })
  }

  resolve.forEach(async info => {
    const newImage = {
      _id: info.id,
      filename: info.filename,
      mimetype: info.mimetype,
      encoding: info.encoding,
      path: info.path,
      pathM: info.pathM,
      pathS: info.pathS,
      pathXS: info.pathXS,
      created_at: new Date(),
      created_by: user._id
    }
    const response = await Images.insert(newImage)

    // Update album
    const album = await Albums.findOne({ _id: ObjectID(data.album) })
    if (album) {
      for (let i = 0; i < resolve.length; i++) {
        await Albums.updateOne(
          album,
          { $set: { images_count: +i } }
        )
      }
    }

    return Object.assign({ id: response.insertedIds[0] }, newImage)
  })
}

Remember to add scalar Upload