feat: add support to resize attachments

plugins/qeta-backend/package.json

@@ -71,6 +71,7 @@
     "knex": "^3.0.0",
     "lodash": "^4.17.21",
     "multiparty": "^4.2.3",
+    "sharp": "^0.33.5",
     "uuid": "^9.0.1",
     "zod": "^3.22.4"
   },

plugins/qeta-backend/src/service/routes/attachments.ts

@@ -9,6 +9,7 @@
 import { File, RouteOptions } from '../types';
 import { GetObjectCommand, GetObjectCommandOutput } from '@aws-sdk/client-s3';
 import { getS3Client } from '../util';
+import sharp from 'sharp';
 
 const DEFAULT_IMAGE_SIZE_LIMIT = 2500000;
 const DEFAULT_MIME_TYPES = [
@@ -18,6 +19,10 @@
   'image/gif',
 ];
 
+const resizeImage = (buffer: Buffer, width?: number, height?: number) => {
+  return sharp(buffer).resize(width, height).toBuffer();
+};
+
 export const attachmentsRoutes = (router: Router, options: RouteOptions) => {
   const { database, config } = options;
 
@@ -46,7 +51,7 @@
       }
 
       const fileRequest = files.image[0];
-      const fileBuffer = await fs.promises.readFile(`${fileRequest?.path}`);
+      let fileBuffer = await fs.promises.readFile(`${fileRequest?.path}`);
       const mimeType = await FileType.fromBuffer(fileBuffer);
 
       if (mimeType && !supportedFilesTypes.includes(mimeType.mime)) {
@@ -58,6 +63,22 @@
         return;
       }
 
+      if (request.query.width || request.query.height) {
+        const width = request.query.width
+          ? parseInt(request.query.width as string, 10)
+          : undefined;
+        const height = request.query.height
+          ? parseInt(request.query.height as string, 10)
+          : undefined;
+        if ((width && isNaN(width)) || (height && isNaN(height))) {
+          response.status(400).json({
+            errors: [{ message: `Width and height must be integers.` }],
+          });
+          return;
+        }
+        fileBuffer = await resizeImage(fileBuffer, width, height);
+      }
+
       if (fileBuffer.byteLength > maxSizeImage) {
         response.status(400).json({
           errors: [

plugins/qeta-common/src/api/QetaApi.ts

@@ -150,7 +150,10 @@ export interface QetaApi {
 
   postAnswer(answer: AnswerRequest): Promise<AnswerResponseBody>;
 
-  postAttachment(file: Blob): Promise<AttachmentResponseBody>;
+  postAttachment(
+    file: Blob,
+    options?: { width?: number; height?: number },
+  ): Promise<AttachmentResponseBody>;
 
   commentAnswer(
     questionId: number,

plugins/qeta-common/src/api/QetaClient.ts

@@ -592,8 +592,16 @@ export class QetaClient implements QetaApi {
     return response.ok;
   }
 
-  async postAttachment(file: Blob): Promise<AttachmentResponseBody> {
-    const qetaUrl = `${await this.getBaseUrl()}/attachments`;
+  async postAttachment(
+    file: Blob,
+    options?: { width?: number; height?: number },
+  ): Promise<AttachmentResponseBody> {
+    const query = this.getQueryParameters(options);
+
+    let qetaUrl = `${await this.getBaseUrl()}/attachments`;
+    if (query) {
+      qetaUrl += `?${query}`;
+    }
     const formData = new FormData();
 
     formData.append('image', file);

plugins/qeta-react/src/components/HeaderImageInput/HeaderImageInput.tsx

@@ -52,6 +52,7 @@ export const HeaderImageInput = (props: {
                 qetaApi,
                 errorApi,
                 onImageUpload,
+                options: { height: 500 },
               })(buffer).next();
               if (typeof uri.value === 'string') {
                 onChange(uri.value);

plugins/qeta-react/src/utils/utils.ts

@@ -8,15 +8,20 @@ export const imageUpload = (opts: {
   qetaApi: QetaApi;
   errorApi: ErrorApi;
   onImageUpload?: (id: number) => void;
+  options?: {
+    width?: number;
+    height?: number;
+  };
 }) => {
-  const { qetaApi, errorApi, onImageUpload } = opts;
+  const { qetaApi, errorApi, onImageUpload, options } = opts;
   // eslint-disable-next-line func-names
   return async function* (data: ArrayBuffer) {
     const fileType = await FileType.fromBuffer(data);
 
     const mimeType = fileType ? fileType.mime : 'text/plain';
     const attachment = await qetaApi.postAttachment(
       new Blob([data], { type: mimeType }),
+      options,
     );
     if ('errors' in attachment) {
       errorApi.post({