{"_id":"graphql-server-express-upload","_rev":"3-a3f5712e6acb68ddc92a869252d0e410","name":"graphql-server-express-upload","description":"GraphQL Server Express file upload middleware","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"graphql-server-express-upload","description":"GraphQL Server Express file upload middleware","main":"src/index.js","scripts":{"test":"echo \"No test specified\" && exit 0","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"repository":{"type":"git","url":"git+https://github.com/HriBB/graphql-server-express-upload.git"},"keywords":["apollo","graphql","server","express","file","upload","middleware"],"author":{"name":"Bojan Hribernik"},"license":"MIT","bugs":{"url":"https://github.com/HriBB/graphql-server-express-upload/issues"},"homepage":"https://github.com/HriBB/graphql-server-express-upload#readme","devDependencies":{"semantic-release":"^4.3.5"},"version":"1.0.0","gitHead":"fe7fa2329d85f1bb685ae4eb9e6f40aa934b7612","_id":"graphql-server-express-upload@1.0.0","_shasum":"0e91708b84d746fef0c93b5035ea9b9e473105f0","_from":".","_npmVersion":"2.15.11","_nodeVersion":"4.6.2","_npmUser":{"name":"hribb","email":"bojan.hribernik@gmail.com"},"dist":{"shasum":"0e91708b84d746fef0c93b5035ea9b9e473105f0","tarball":"https://registry.npmjs.org/graphql-server-express-upload/-/graphql-server-express-upload-1.0.0.tgz","integrity":"sha512-Tzi6xpcZqhHN3kuC4pp4CCkYDKi1w9IqPoK6WV1FLMBoAz6HtNFl12EDI0r6+vlcTLglVObBb60+t/PrM+9agQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHceLGL+lenTSDQkYzpfxULc5s44G/S2rO+KEX83CQwSAiEA2b29NE5MT2SjpU04tHelKW5bK7qj7JwX6POyEs7MPps="}]},"maintainers":[{"name":"hribb","email":"bojan.hribernik@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/graphql-server-express-upload-1.0.0.tgz_1479173440534_0.3956169548910111"}}},"readme":"# graphql-server-express-upload\n\nGraphql Server Express file upload middleware. Used together with [UploadNetworkInterface](https://github.com/HriBB/apollo-upload-network-interface/releases).\n\n## Usage\n\n#### 1. Add `graphqlExpressUpload` middleware to your Express GraphQL endpoint\n\n```\nimport { graphqlExpress, graphiqlExpress } from 'graphql-server-express'\nimport graphqlExpressUpload from 'graphql-server-express-upload'\nimport multer from 'multer'\n\nimport schema from './schema'\n\nconst upload = multer({\n  dest: config.tmp.path,\n})\n\napp.use('/graphql',\n  upload.array('files'),\n  // after multer and before graphqlExpress\n  graphqlExpressUpload({ endpointURL: '/graphql' }),\n  graphqlExpress((req) => {\n    return {\n      schema,\n      context: {}\n    }\n  })\n)\n\napp.use('/graphiql', graphiqlExpress({\n  endpointURL: '/graphql',\n}))\n```\n\n#### 2. Add `UploadedFile` scalar to your schema\n\n```\nscalar UploadedFile\n```\n\n#### 3. Add `UploadedFile` resolver\n\nFor now we simply use JSON. In the future we should improve this.\n\n```\nconst resolvers = {\n  UploadedFile: {\n    __parseLiteral: parseJSONLiteral,\n    __serialize: value => value,\n    __parseValue: value => value,\n  }\n  ...\n}\n\nfunction parseJSONLiteral(ast) {\n  switch (ast.kind) {\n    case Kind.STRING:\n    case Kind.BOOLEAN:\n      return ast.value;\n    case Kind.INT:\n    case Kind.FLOAT:\n      return parseFloat(ast.value);\n    case Kind.OBJECT: {\n      const value = Object.create(null);\n      ast.fields.forEach(field => {\n        value[field.name.value] = parseJSONLiteral(field.value);\n      });\n\n      return value;\n    }\n    case Kind.LIST:\n      return ast.values.map(parseJSONLiteral);\n    default:\n      return null;\n  }\n}\n```\n\n#### 4. Add mutation on the server\n\nSchema definition\n\n```\nuploadProfilePicture(id: Int!, files: [UploadedFile!]!): ProfilePicture\n```\n\nAnd the mutation function\n\n```\nasync uploadProfilePicture(root, { id, files }, context) {\n  // you can now access files parameter from variables\n  console.log('uploadProfilePicture', { id, files })\n  //...\n}\n```\n\n#### 5. Add mutation on the client\n\nExample using `react-apollo`. Don't forget that you need to be using [UploadNetworkInterface](https://github.com/HriBB/apollo-upload-network-interface/releases), because `apollo-client` does not support `multipart/form-data` out of the box.\n\n```\nimport React, { Component, PropTypes } from 'react'\nimport { graphql } from 'react-apollo'\nimport gql from 'graphql-tag'\n\nclass UploadProfilePicture extends Component {\n\n  onSubmit = (fields) => {\n    const { user, uploadProfilePicture } = this.props\n    // fields.files is an instance of FileList\n    uploadProfilePicture(user.id, fields.files)\n      .then(({ data }) => {\n        console.log('data', data);\n      })\n      .catch(error => {\n        console.log('error', error.message);\n      })\n  }\n\n  render() {\n    return (\n      //...\n    )\n  }\n\n}\n\nconst ADD_SALON_RESOURCE_PICTURE = gql`\n  mutation uploadProfilePicture($id: Int!, $files: [UploadedFile!]!) {\n    uploadProfilePicture(id: $id, files: $files) {\n      id url thumb square small medium large full\n    }\n  }`\n\nconst withFileUpload = graphql(ADD_SALON_RESOURCE_PICTURE, {\n  props: ({ ownProps, mutate }) => ({\n    uploadProfilePicture: (id, files) => mutate({\n      variables: { id, files },\n    }),\n  }),\n})\n\nexport default withFileUpload(UploadProfilePicture)\n```\n","maintainers":[{"name":"hribb","email":"bojan.hribernik@gmail.com"}],"time":{"modified":"2022-06-18T14:00:04.868Z","created":"2016-11-15T01:30:41.086Z","1.0.0":"2016-11-15T01:30:41.086Z"},"homepage":"https://github.com/HriBB/graphql-server-express-upload#readme","keywords":["apollo","graphql","server","express","file","upload","middleware"],"repository":{"type":"git","url":"git+https://github.com/HriBB/graphql-server-express-upload.git"},"author":{"name":"Bojan Hribernik"},"bugs":{"url":"https://github.com/HriBB/graphql-server-express-upload/issues"},"license":"MIT","readmeFilename":"README.md"}