feat: Transformed image names to image url while sending imported data

apps/api/src/app/shared/helpers/common.helper.ts

@@ -1,6 +1,6 @@
 import { BadRequestException } from '@nestjs/common';
 import { APIMessages } from '../constants';
-import { PaginationResult, Defaults } from '@impler/shared';
+import { PaginationResult, Defaults, FileMimeTypesEnum } from '@impler/shared';
 
 export function validateNotFound(data: any, entityName: 'upload' | 'template'): boolean {
   if (data) return true;
@@ -57,3 +57,10 @@ export function isDateString(date: string | number): boolean {
   // @ts-ignore
   return new Date(date) != 'Invalid Date' && !isNaN(new Date(date));
 }
+
+export function getAssetMimeType(name: string): string {
+  if (name.endsWith('.png')) return FileMimeTypesEnum.PNG;
+  else if (name.endsWith('.jpg')) return FileMimeTypesEnum.JPEG;
+  else if (name.endsWith('.jpeg')) return FileMimeTypesEnum.JPEG;
+  throw new Error('Unsupported file type');
+}

apps/api/src/app/template/usecases/download-sample/download-sample.usecase.ts

@@ -5,6 +5,7 @@ import { ColumnTypesEnum, FileMimeTypesEnum, FileNameService, ISchemaItem } from
 
 import { ExcelFileService } from '@shared/services/file';
 import { IExcelFileHeading } from '@shared/types/file.types';
+import { getAssetMimeType } from '@shared/helpers/common.helper';
 import { DownloadSampleDataCommand } from './download-sample.command';
 import { StorageService } from '@impler/shared/dist/services/storage';
 
@@ -76,7 +77,7 @@ export class DownloadSample {
           const file = zip.files[filename];
           const fileData = await file.async('base64');
           const storageFilename = this.fileNameService.getAssetFilePath(data.importId, filename);
-          await this.storageService.uploadFile(storageFilename, fileData, this.getAssetMimeType(filename));
+          await this.storageService.uploadFile(storageFilename, fileData, getAssetMimeType(filename));
         })
       );
     }
@@ -87,10 +88,4 @@ export class DownloadSample {
       type: hasMultiSelect ? FileMimeTypesEnum.EXCELM : FileMimeTypesEnum.EXCELX,
     };
   }
-  getAssetMimeType(name: string): string {
-    if (name.endsWith('.png')) return FileMimeTypesEnum.PNG;
-    else if (name.endsWith('.jpg')) return FileMimeTypesEnum.JPEG;
-    else if (name.endsWith('.jpeg')) return FileMimeTypesEnum.JPEG;
-    throw new Error('Unsupported file type');
-  }
 }

apps/api/src/app/upload/upload.controller.ts

@@ -19,11 +19,11 @@ import {
 } from '@nestjs/common';
 import { ApiTags, ApiSecurity, ApiConsumes, ApiOperation, ApiParam, ApiQuery, ApiOkResponse } from '@nestjs/swagger';
 
+import { GetUpload, GetAsset } from './usecases';
 import { JwtAuthGuard } from '@shared/framework/auth.gaurd';
-import { validateNotFound } from '@shared/helpers/common.helper';
+import { getAssetMimeType, validateNotFound } from '@shared/helpers/common.helper';
 import { validateUploadStatus } from '@shared/helpers/upload.helpers';
 import { PaginationResponseDto } from '@shared/dtos/pagination-response.dto';
-import { GetUpload } from '@shared/usecases/get-upload/get-upload.usecase';
 import { ValidateMongoId } from '@shared/validations/valid-mongo-id.validation';
 import { ValidImportFile } from '@shared/validations/valid-import-file.validation';
 import { GetUploadCommand } from '@shared/usecases/get-upload/get-upload.command';
@@ -45,6 +45,7 @@ import {
 @UseGuards(JwtAuthGuard)
 export class UploadController {
   constructor(
+    private getAsset: GetAsset,
     private getUpload: GetUpload,
     private terminateUpload: TerminateUpload,
     private makeUploadEntry: MakeUploadEntry,
@@ -138,6 +139,21 @@ export class UploadController {
     content.pipe(res);
   }
 
+  @Get(':uploadId/asset/:name')
+  @ApiOperation({
+    summary: 'Get uploaded asset file',
+  })
+  async getUploadedAsset(
+    @Param('uploadId', ValidateMongoId) uploadId: string,
+    @Param('name') assetName: string,
+    @Res() res: Response
+  ) {
+    const content = await this.getAsset.execute(uploadId, assetName);
+    res.setHeader('Content-Type', getAssetMimeType(assetName));
+    res.setHeader('Content-Disposition', 'attachment; filename=' + assetName);
+    content.pipe(res);
+  }
+
   @Get(':uploadId/rows/valid')
   @ApiOperation({
     summary: 'Get valid rows of the uploaded file',

apps/api/src/app/upload/usecases/get-asset/get-asset.usecase.ts

@@ -0,0 +1,28 @@
+import { Readable } from 'stream';
+import { Injectable } from '@nestjs/common';
+import { UploadRepository } from '@impler/dal';
+import { FileNameService } from '@impler/shared';
+import { StorageService } from '@impler/shared/dist/services/storage';
+import { DocumentNotFoundException } from '@shared/exceptions/document-not-found.exception';
+
+@Injectable()
+export class GetAsset {
+  constructor(
+    private uploadRepository: UploadRepository,
+    private storageService: StorageService,
+    private fileNameService: FileNameService
+  ) {}
+
+  async execute(_uploadId: string, name: string): Promise<Readable> {
+    const upload = await this.uploadRepository.findById(_uploadId, '_id');
+    if (!upload) {
+      throw new DocumentNotFoundException('Upload', _uploadId);
+    }
+
+    try {
+      return await this.storageService.getFileStream(this.fileNameService.getAssetFilePath(_uploadId, name));
+    } catch (error) {
+      throw new DocumentNotFoundException('Asset', name);
+    }
+  }
+}

apps/api/src/app/upload/usecases/index.ts

@@ -1,3 +1,4 @@
+import { GetAsset } from './get-asset/get-asset.usecase';
 import { GetUploadColumns } from './get-columns/get-columns.usecase';
 import { GetUpload } from '@shared/usecases/get-upload/get-upload.usecase';
 import { TerminateUpload } from './terminate-upload/terminate-upload.usecase';
@@ -7,6 +8,7 @@ import { GetOriginalFileContent } from './get-original-file-content/get-original
 import { GetUploadProcessInformation } from './get-upload-process-info/get-upload-process-info.usecase';
 
 export const USE_CASES = [
+  GetAsset,
   GetUpload,
   TerminateUpload,
   MakeUploadEntry,
@@ -18,6 +20,7 @@ export const USE_CASES = [
 ];
 
 export {
+  GetAsset,
   GetUpload,
   MakeUploadEntry,
   TerminateUpload,

apps/queue-manager/src/.example.env

@@ -1,4 +1,5 @@
 NODE_ENV=local
+API_BASE_URL=http://localhost:4200
 RABBITMQ_CONN_URL=amqp://guest:guest@localhost:5672
 MONGO_URL=mongodb://localhost:27017/impler-db
 

apps/queue-manager/src/consumers/send-webhook-data.consumer.ts

@@ -63,6 +63,7 @@ export class SendWebhookDataConsumer extends BaseConsumer {
         recordFormat: cachedData.recordFormat,
         chunkFormat: cachedData.chunkFormat,
         totalRecords: allDataJson.length,
+        imageHeadings: cachedData.imageHeadings,
         multiSelectHeadings: cachedData.multiSelectHeadings,
       });
 
@@ -115,18 +116,27 @@ export class SendWebhookDataConsumer extends BaseConsumer {
     chunkFormat,
     recordFormat,
     extra = '',
+    imageHeadings,
     multiSelectHeadings,
   }: IBuildSendDataParameters): { sendData: Record<string, unknown>; page: number } {
     const defaultValuesObj = JSON.parse(defaultValues);
     let slicedData = data.slice(
       Math.max((page - DEFAULT_PAGE) * chunkSize, MIN_LIMIT),
       Math.min(page * chunkSize, data.length)
     );
-    if (Array.isArray(multiSelectHeadings) && multiSelectHeadings.length > 0) {
+    if ((Array.isArray(multiSelectHeadings) && multiSelectHeadings.length > 0) || imageHeadings?.length > 0) {
       slicedData = slicedData.map((obj) => {
-        multiSelectHeadings.forEach((heading) => {
-          obj.record[heading] = obj.record[heading] ? obj.record[heading].split(',') : [];
-        });
+        if (multiSelectHeadings.length > 0)
+          multiSelectHeadings.forEach((heading) => {
+            obj.record[heading] = obj.record[heading] ? obj.record[heading].split(',') : [];
+          });
+
+        if (imageHeadings?.length > 0)
+          imageHeadings.forEach((heading) => {
+            obj.record[heading] = obj.record[heading]
+              ? `${process.env.API_BASE_URL}/v1/upload/${uploadId}/asset/${obj.record[heading]}`
+              : '';
+          });
 
         return obj;
       });
@@ -167,11 +177,13 @@ export class SendWebhookDataConsumer extends BaseConsumer {
 
     const defaultValueObj = {};
     const multiSelectHeadings = [];
+    const imageHeadings = [];
     const customSchema = JSON.parse(uploadata.customSchema) as ITemplateSchemaItem[];
     if (Array.isArray(customSchema)) {
       customSchema.forEach((item: ITemplateSchemaItem) => {
         if (item.defaultValue) defaultValueObj[item.key] = item.defaultValue;
         if (item.type === ColumnTypesEnum.SELECT && item.allowMultiSelect) multiSelectHeadings.push(item.key);
+        if (item.type === ColumnTypesEnum.IMAGE) imageHeadings.push(item.key);
       });
     }
 
@@ -190,6 +202,7 @@ export class SendWebhookDataConsumer extends BaseConsumer {
       recordFormat: uploadata.customRecordFormat,
       chunkFormat: uploadata.customChunkFormat,
       multiSelectHeadings,
+      imageHeadings,
     };
   }
 

apps/queue-manager/src/types/env.d.ts

@@ -3,14 +3,15 @@ declare namespace NodeJS {
   export interface ProcessEnv {
     MONGO_URL: string;
     RABBITMQ_CONN_URL: string;
+    API_BASE_URL: string;
     S3_LOCAL_STACK: string;
     S3_REGION: string;
     S3_BUCKET_NAME: string;
 
     PAYMENT_API_BASE_URL: string;
     PAYMENT_AUTH_KEY: string;
     PAYMENT_AUTH_VALUE: string;
-    
+
     SENTRY_DSN: string;
   }
 }

apps/queue-manager/src/types/file-processing.types.ts

@@ -23,6 +23,7 @@ export interface IBuildSendDataParameters extends IBaseSendDataParameters {
   recordFormat?: string;
   chunkFormat?: string;
   multiSelectHeadings?: string[];
+  imageHeadings?: string[];
 }
 export interface ISendDataResponse {
   statusCode: number;

apps/widget/src/hooks/Phase0/usePhase0.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
 import { IErrorObject } from '@impler/shared';
@@ -14,19 +15,18 @@ export function usePhase0({ goNext }: IUsePhase0Props) {
   const { schema, showWidget } = useAppState();
   const { projectId, templateId } = useImplerState();
 
-  const { error, isLoading } = useQuery<boolean, IErrorObject, any, (string | undefined)[]>(
+  const { data, error, isLoading } = useQuery<unknown, IErrorObject, { success: boolean }, (string | undefined)[]>(
     ['valid', projectId, templateId, schema],
-    () => api.checkIsRequestvalid(projectId, templateId, schema) as Promise<boolean>,
+    () => api.checkIsRequestvalid(projectId, templateId, schema) as Promise<{ success: boolean }>,
     {
-      onSuccess(valid) {
-        if (valid) {
-          goNext();
-        }
-      },
       refetchOnWindowFocus: true,
     }
   );
 
+  useEffect(() => {
+    if (data?.success) goNext();
+  }, [data]);
+
   return {
     error,
     isLoading,

docker/docker-compose.yml

@@ -59,6 +59,7 @@ services:
       MONGO_URL: ${MONGO_URL}
       RABBITMQ_CONN_URL: ${RABBITMQ_CONN_URL}
       S3_REGION: ${S3_REGION}
+      API_BASE_URL: ${API_BASE_URL}
       S3_LOCAL_STACK: ${S3_LOCAL_STACK}
       S3_BUCKET_NAME: ${S3_BUCKET_NAME}
       AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}

libs/shared/src/types/upload/upload.types.ts

@@ -58,6 +58,7 @@ export type SendWebhookCachedData = {
   chunkFormat?: string;
   defaultValues: string;
   multiSelectHeadings?: string[];
+  imageHeadings?: string[];
 };
 
 export type SendBubbleCachedData = {