feat(edit-profile): adds image avatar upload

Adds ability to upload and change a users avatar

Author: anguspiv

next.config.js

@@ -1,4 +1,16 @@
+const path = require('path');
+
 /** @type {import('next').NextConfig} */
-module.exports = {
-  reactStrictMode: true,
-}
+const config = {};
+
+config.reactStrictMode = true;
+
+config.resolve = {
+  alias: {
+    'graphql-upload': path.join(__dirname, 'node_modules/graphql-upload/dist/graphql-upload.umd.js'),
+  },
+};
+
+console.log(config);
+
+module.exports = config;

package-lock.json

@@ -39,6 +39,7 @@
     "@types/bytes": "^3.1.1",
     "@types/graphql-upload": "^8.0.11",
     "apollo-server-micro": "^3.6.2",
+    "apollo-upload-client": "^17.0.0",
     "babel-plugin-macros": "^3.1.0",
     "bytes": "^3.1.2",
     "consola": "^2.15.3",
@@ -76,6 +77,7 @@
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
+    "@types/apollo-upload-client": "^17.0.0",
     "@types/graphql-iso-date": "^3.4.0",
     "@types/micro-cors": "^0.1.2",
     "@types/node": "16.11.7",

package.json

@@ -1,5 +1,6 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
+import { Flex } from '@chakra-ui/react';
 import PageHeader from '@components/layout/PageHeader';
 import EditProfile from '@components/account/EditProfile';
 
@@ -11,7 +12,15 @@ const Account: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <PageHeader title="User Account" />
-      <EditProfile />
+      <Flex
+        direction="column"
+        alignItems={{
+          base: 'center',
+          lg: 'flex-start',
+        }}
+      >
+        <EditProfile />
+      </Flex>
     </>
   );
 };

pages/account/index.tsx

@@ -3,6 +3,8 @@ import Cors from 'micro-cors';
 import { RequestHandler } from 'micro';
 import { withSentry } from '@sentry/nextjs';
 import { createContext } from '@graphql/context';
+import { processRequest } from 'graphql-upload';
+import logger from '@utils/logger';
 import schema from '../../schema';
 
 const cors = Cors();
@@ -36,6 +38,19 @@ const graphql = cors(async (req, res) => {
     return null;
   }
 
+  try {
+    const contentType = req.headers['content-type'];
+
+    if (contentType && contentType.startsWith('multipart/form-data')) {
+      // TypeScript is stupid
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      req.filePayload = await processRequest(req, res);
+    }
+  } catch (error) {
+    logger.error('processRequest', error);
+  }
+
   return handler(req, res);
 });
 

pages/api/graphql.ts

@@ -6,6 +6,7 @@ import path from 'path';
 import { UserInputError, AuthenticationError } from 'apollo-server-micro';
 import { isImageMimeType, MAX_IMAGE_SIZE, getFileSize, uploadFile } from '../../src/utils/cdn';
 import { FileTypeError, FileSizeError } from '../../src/errors/file';
+import logger from '../../src/utils/logger';
 
 interface ImageWhere {
   id?: string;
@@ -20,6 +21,8 @@ const uploadImage = async (
   { filename, mimetype, encoding, createReadStream }: FileUpload,
   { filename: rename, path: subpath }: StorageFileOptions,
 ) => {
+  logger.debug(`Uploading image:`, { filename, mimetype, encoding, createReadStream });
+
   const isImage = isImageMimeType(mimetype);
 
   if (!isImage) {
@@ -108,7 +111,9 @@ export const ImageMutation = extendType({
       args: {
         file: arg({ type: 'Upload' }),
       },
-      resolve: async (_parent, { file }, { prisma, token }) => {
+      resolve: async (_parent, args, { prisma, token }) => {
+        const file = await args.file;
+        logger.debug('uploadImage', { file });
         const guid = uuid();
         const userId = token?.sub || '';
 

schema/types/Image.ts

@@ -42,6 +42,7 @@ export const ProfileInput = inputObjectType({
     t.string('lastName', { description: "The User Profile's Last Name" });
     t.string('nickname', { description: "The User Profile's Nickname" });
     t.string('bio', { description: 'A 250 character description of the User' });
+    t.string('avatarId', { description: 'The ID of the User Profile Avatar' });
   },
 });
 
@@ -84,7 +85,7 @@ export const ProfileMutation = extendType({
       args: { input: ProfileInput },
       async resolve(_parent, args, { prisma, token }) {
         const authId = token?.sub;
-        const { id, firstName, lastName, nickname, bio } = args.input || {};
+        const { id, firstName, lastName, nickname, bio, avatarId } = args.input || {};
 
         const where: ProfileWhere = {};
 
@@ -102,7 +103,7 @@ export const ProfileMutation = extendType({
           throw new UserInputError('profile not found');
         }
 
-        const data = { firstName, lastName, nickname, bio };
+        const data = { firstName, lastName, nickname, bio, avatarId };
 
         const result = await prisma.profile.update({
           where,

schema/types/Profile.ts

@@ -1,3 +1,11 @@
+import { scalarType } from 'nexus';
 import { GraphQLUpload } from 'graphql-upload';
 
-export const Upload = GraphQLUpload;
+export const Upload = scalarType({
+  name: GraphQLUpload.name,
+  asNexusMethod: 'upload', // We set this to be used as a method later as `t.upload()` if needed
+  description: GraphQLUpload.description,
+  serialize: GraphQLUpload.serialize,
+  parseValue: GraphQLUpload.parseValue,
+  parseLiteral: GraphQLUpload.parseLiteral,
+});

schema/types/Upload.ts

@@ -1,5 +1,6 @@
 import { Story } from '@storybook/react';
 import { GET_PROFILE, UPDATE_PROFILE } from '@graphql/queries';
+import { UPLOAD_IMAGE } from '@components/form/ImageUpload';
 import { EditProfileProps, EditProfile } from './EditProfile';
 
 export default {
@@ -27,6 +28,17 @@ Default.parameters = {
               id: '1',
               userId: '1',
               firstName: 'John',
+              lastName: 'Doe',
+              nickname: 'JD',
+              bio: 'Somewhere over the rainbow...',
+              avatar: {
+                id: '1',
+                filename: 'angus-perkerson.jpeg',
+                filepath: '/images',
+                mimeType: 'image/jpeg',
+                title: 'Angus Perkerson',
+                description: 'Angus Perkerson',
+              },
             },
           },
         },
@@ -43,6 +55,23 @@ Default.parameters = {
           },
         },
       },
+      {
+        request: {
+          query: UPLOAD_IMAGE,
+        },
+        result: {
+          data: {
+            uploadImage: {
+              id: '1',
+              filename: 'angus-perkerson.jpeg',
+              filepath: '/images',
+              mimeType: 'image/jpeg',
+              title: 'Angus Perkerson Saved',
+              description: 'Angus Perkerson Saved',
+            },
+          },
+        },
+      },
     ],
   },
 };