Handling multipart/form-data POST with Nest in Cloud Functions - Firebase

Question

I have a problem similar to the following post. However, I was unable to solve it as indicated in that post because it does not work for me (or I don't know what I'm doing wrong) with busboy.

This is my code that runs my Nest application and then embeds it within a firebase function:

import * as functions from 'firebase-functions';
import { NestFactory } from '@nestjs/core';
import { ExpressAdapter } from '@nestjs/platform-express';
import { AppModule } from './app.module';
import * as express from 'express';
import { ValidationPipe } from '@nestjs/common';
import * as cors from 'cors';
import * as morgan from 'morgan'; // Import morgan middleware

import { config } from 'dotenv';

config();

const server = express();
server.use(cors());
server.use(express.json({ limit: '50mb' }));
server.use(express.urlencoded({ extended: false, limit: '50mb' }));
server.use(morgan('dev')); // Use morgan middleware with 'dev' format

const createNestServer = async (expressInstance) => {
  const app = await NestFactory.create(
    AppModule,
    new ExpressAdapter(expressInstance),
  );

  app.useGlobalPipes(
    new ValidationPipe({
      whitelist: true,
      forbidNonWhitelisted: true,
    }),
  );

  return app.init();
};

createNestServer(server)
  .then((v) => console.log('Nest Ready'))
  .catch((err) => console.error('Nest broken', err));

// Listen on localhost:3000
if (process.env.DEV == 'nest') {
  server.listen(3001, () => {
    console.log('Server listening on http://localhost:3001');
  });
}

export const api = functions.https.onRequest(server);

This is my test file controller:

import {
  Body,
  Controller,
  Get,
  HttpException,
  Post,
  Req,
  UploadedFile,
  UseInterceptors,
} from '@nestjs/common';
import { AppService } from './app.service';
import { FileInterceptor } from '@nestjs/platform-express';
import { imageMulterOption } from 'utils/interceptors/image.multerOption';
import { StorageService } from 'infrastructure/storage/storage.service';

@Controller()
export class AppController {
  constructor(
    private readonly storageService: StorageService,
  ) {}

  ....

  @Post('file')
  @UseInterceptors(FileInterceptor('file', imageMulterOption))
  public async uploadFile(
    @UploadedFile() file: Express.Multer.File,
    @Req() req: Request,
  ): Promise<string | HttpException> {
    console.log(req.headers);
    return await this.storageService.uploadFile(file);
  }
}

When I run an http request with the DEV environment variable set to "nest" using Postman, it allows me to test the Nest core application and the file upload works correctly. However, when DEV is set to "firebase", the firebase emulator runs and I get the following error with the same request:

{ "statusCode": 400, "message": "Multipart: Unexpected end of form", "error": "Bad Request" }

I need help with this bug that has been driving me crazy for a while...

This is my http request:

POST /gymbro-27bb2/us-central1/api/file HTTP/1.1 Host: localhost:5001 Content-Length: 176 Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

----WebKitFormBoundary7MA4YWxkTrZu0gW Content-Disposition: form-data; name="file"; filename="nest js.png" Content-Type: image/png

(data) ----WebKitFormBoundary7MA4YWxkTrZu0gW

I expect the next response:

"File uploaded"

Handling multipart/form-data POST with Nest in Cloud Functions - Firebase

0 Answers0