0

I am creating a CRUD service with Angular, Nest Js, and MongoDB.

When I send FormData from Angular(frontend) to Nest Js(backend) but FormData is empty.

Why doesn't FormData send any data?

>>> image Angular console <<<

enter image description here enter image description here

>>> image Nest Js console <<< enter image description here

>>> Angular file

project.service.ts

interface Form {
  nameForm:string;
  detailForm:string
}


@Injectable({
  providedIn: 'root'
})

export class ProjectService {

  REST_API:string = 'http://localhost:3000/api';

  constructor(private http:HttpClient) { }

  createProject(projectForm:Form){
    const projectData = new FormData();
    projectData.append('name',projectForm.nameForm)
    projectData.append('detail',projectForm.detailForm)
    
    // FormData has name and detail data.
    projectData.forEach((value,key) => {
      console.log(key+" "+value)
    });
    
    let API_URL = `${this.REST_API}/projects`

    this.http.post(API_URL,projectData).subscribe()
  }
}

>>> Nest js file

projects.controller.ts

@Controller('projects')
export class ProjectsController {
  constructor(private readonly projectsService: ProjectsService) {}

  @Post()
  create(@Body() createProjectDto: CreateProjectDto) {
    console.log('in controller',createProjectDto)
    return this.projectsService.create(createProjectDto);
  }
}

create-project.dto.ts

export class CreateProjectDto {
    name:string;
    detail:string
}

projects.service.ts

@Injectable()
export class ProjectsService {
  constructor(@InjectModel(Project.name) private projectModel:Model<ProjectDocument>) {}

  create(createProjectDto: CreateProjectDto) {
    const createdProject = new this.projectModel(createProjectDto)
    return createdProject.save()
    
  }
}
Naphat
  • 13
  • 5
  • Why do you think it's empty? It's seen on the first screenshot that correct values are logged to console from formData object – vitaliy kotov Aug 01 '22 at 10:21
  • Yes, FormData is not empty but in nest js doesn’t has any data in third screenshot. I use {name:”inputname”;detail:”inputdetail”} instead and it work normally. But I will create a file upload in my work so I want to use FormData. – Naphat Aug 01 '22 at 13:19
  • Have you tried [this](https://stackoverflow.com/a/63908341/11900833)? – vitaliy kotov Aug 02 '22 at 12:35

2 Answers2

0

If you must pass a formData object, you can use nestjs-form-data module. A more convenient solution is to pass a json object

Cody Tseng
  • 190
  • 4
0
@UseInterceptors(AnyFilesInterceptor())

use this on upload request nestjs

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Omer Naeem
  • 1