Implemented user profile upload and show on web/mobile (#191)

* Update mobile dependencies

* Added image picker

* Added mechanism to upload profile image

* Added image type to send to web

* Added styling for circle avatar

* Fixxed issue with sharp cannot resize image properly

* Finished displaying and uploading user profile

* Added user profile to web

server/src/api-v1/user/user.service.ts

@@ -7,7 +7,7 @@ import { UpdateUserDto } from './dto/update-user.dto';
 import { UserEntity } from './entities/user.entity';
 import * as bcrypt from 'bcrypt';
 import sharp from 'sharp';
-import { createReadStream } from 'fs';
+import { createReadStream, unlink, unlinkSync } from 'fs';
 import { Response as Res } from 'express';
 
 @Injectable()
@@ -129,25 +129,14 @@ export class UserService {
 
   async createProfileImage(authUser: AuthUserDto, fileInfo: Express.Multer.File) {
     try {
-      // Convert file to jpeg
-      let filePath = ''
-      const convertImageInfo = await sharp(fileInfo.path).webp().resize(512, 512).toFile(fileInfo.path + '.webp')
+      await this.userRepository.update(authUser.id, {
+        profileImagePath: fileInfo.path
+      })
 
-      if (convertImageInfo) {
-        filePath = fileInfo.path + '.webp';
-        await this.userRepository.update(authUser.id, {
-          profileImagePath: filePath
-        })
-      } else {
-        filePath = fileInfo.path;
-        await this.userRepository.update(authUser.id, {
-          profileImagePath: filePath
-        })
-      }
 
       return {
         userId: authUser.id,
-        profileImagePath: filePath
+        profileImagePath: fileInfo.path
       };
     } catch (e) {
       Logger.error(e, 'Create User Profile Image');
@@ -156,10 +145,22 @@ export class UserService {
   }
 
   async getUserProfileImage(userId: string, res: Res) {
-    const user = await this.userRepository.findOne({ id: userId })
-    res.set({
-      'Content-Type': 'image/webp',
-    });
-    return new StreamableFile(createReadStream(user.profileImagePath));
+    try {
+      const user = await this.userRepository.findOne({ id: userId })
+      if (!user.profileImagePath) {
+        console.log("empty return")
+        throw new BadRequestException('User does not have a profile image');
+      }
+
+      res.set({
+        'Content-Type': 'image/jpeg',
+      });
+
+      const fileStream = createReadStream(user.profileImagePath)
+      return new StreamableFile(fileStream);
+    } catch (e) {
+      console.log("error getting user profile")
+    }
+
   }
 }

server/src/config/profile-image-upload.config.ts

@@ -19,6 +19,7 @@ export const profileImageUploadOption: MulterOptions = {
     destination: (req: Request, file: Express.Multer.File, cb: any) => {
       const basePath = APP_UPLOAD_LOCATION;
       const profileImageLocation = `${basePath}/${req.user['id']}/profile`;
+
       if (!existsSync(profileImageLocation)) {
         mkdirSync(profileImageLocation, { recursive: true });
       }
@@ -28,9 +29,10 @@ export const profileImageUploadOption: MulterOptions = {
     },
 
     filename: (req: Request, file: Express.Multer.File, cb: any) => {
+
       const userId = req.user['id'];
 
-      cb(null, `${userId}`);
+      cb(null, `${userId}${extname(file.originalname)}`);
     },
   }),
 };