How to use the Node.js axios library for making HTTP requests with interceptors for FormData and file uploads in Nest.js

  Arif Babu

         

  NodeJS



Image not found!!

To use the Axios library for making HTTP requests with interceptors for FormData and file uploads in Nest.js, you'll need to set up Axios within your Nest.js project and define the interceptors accordingly. Here's a step-by-step guide to accomplish this:

  1. Install Axios in your Nest.js project if you haven't already done so:
bash
npm install axios
  1. Import the Axios module and define your interceptor functions:
typescript
// src/common/axios.interceptor.ts

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

// Function to intercept FormData requests
export const formDataInterceptor = () => {
  axios.interceptors.request.use(
    (config: AxiosRequestConfig) => {
      if (config.data instanceof FormData) {
        config.headers['Content-Type'] = 'multipart/form-data';
      }
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );
};

// Function to intercept file uploads
export const fileUploadInterceptor = () => {
  axios.interceptors.request.use(
    (config: AxiosRequestConfig) => {
      if (config.method === 'post' || config.method === 'put') {
        if (config.data && config.data.file) {
          // Assuming 'file' is the key for the file in the FormData
          const formData = new FormData();
          formData.append('file', config.data.file);
          config.data = formData;
        }
      }
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );
};
  1. Register these interceptors in your Nest.js module:
typescript
// src/common/axios.module.ts

import { Module } from '@nestjs/common';
import { formDataInterceptor, fileUploadInterceptor } from './axios.interceptor';

@Module({
  providers: [],
  exports: [],
})
export class AxiosModule {
  constructor() {
    // Register your interceptors when this module is instantiated
    formDataInterceptor();
    fileUploadInterceptor();
  }
}
  1. Import and use the AxiosModule in your main application module:
typescript
// src/app.module.ts

import { Module } from '@nestjs/common';
import { AxiosModule } from './common/axios.module';

@Module({
  imports: [AxiosModule],
  controllers: [],
  providers: [],
})
export class AppModule {}
  1. Now, you can use Axios for making HTTP requests with FormData and file uploads in your Nest.js services:
typescript
// src/your-service.service.ts

import { Injectable } from '@nestjs/common';
import axios from 'axios';

@Injectable()
export class YourService {
  async uploadFile(file: any): Promise<any> {
    try {
      const response = await axios.post('your-upload-url', { file });
      return response.data;
    } catch (error) {
      throw error;
    }
  }
}

With these steps, you have set up Axios with interceptors for FormData and file uploads in your Nest.js project, allowing you to handle such requests seamlessly within your services. Make sure to adjust the interceptor logic according to your specific requirements and API configurations.

Category List