Account
Sign in to you account
Sign In Sign Up

How to Upload Images In Nest.js With Graphql?

7 minutes read

In order to upload images in Nest.js with GraphQL, you can start by creating a GraphQL scalar type for File. You can do this by using the graphql-upload package to enable file uploads in your GraphQL schema. Then, you can create a resolver function that handles the file upload and saves the image to a designated location on the server. Within this resolver function, you can access the file data and save it using libraries such as fs or multer. Finally, you can update your GraphQL schema to include a mutation that allows clients to upload images by sending them as a form-data request. By following these steps, you can successfully upload images in Nest.js with GraphQL.


How to handle image uploads securely in Nest.js with GraphQL?

There are several ways to handle image uploads securely in Nest.js with GraphQL. One common approach is to use a package like graphql-upload to handle file uploads and ensure that the files are stored securely on the server.


Here's a step-by-step guide on how to handle image uploads securely in Nest.js with GraphQL:

  1. Install the graphql-upload package:
1

npm install graphql-upload


  1. Create a custom GraphQL scalar for file uploads in your Nest.js application. You can create a new file called FileUpload.scalar.ts with the following code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import { Scalar, CustomScalar } from '@nestjs/graphql';
import { GraphQLUpload } from 'graphql-upload';

@Scalar('Upload', () => GraphQLUpload)
export class UploadScalar implements CustomScalar<any, any> {
  description = 'File upload scalar type';

  parseValue(value: any) {
    return value;
  }

  serialize(value: any) {
    return value;
  }

  parseLiteral(ast: any) {
    throw new Error('UploadScalar: The parseLiteral method is not implemented.');
  }
}


  1. Add the newly created scalar to your GraphQL module. For example, you can import the UploadScalar class in your graphql.module.ts file:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { UploadScalar } from './FileUpload.scalar';

@Module({
  imports: [
    GraphQLModule.forRoot({
      autoSchemaFile: true,
      context: ({ req }) => ({ req }),
      uploads: {
        maxFileSize: 10000000, // 10 MB
        maxFiles: 5,
      },
      resolvers: { Upload: UploadScalar },
    }),
  ],
})
export class MyGraphQLModule {}


  1. Create a GraphQL resolver to handle file uploads. For example, you can create a FileResolver class with a mutation for uploading images:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import { Resolver, Mutation, Args } from '@nestjs/graphql';
import { GraphQLUpload, FileUpload } from 'graphql-upload';
import { MyFileService } from './my-file.service';

@Resolver()
export class FileResolver {
  constructor(private readonly myFileService: MyFileService) {}

  @Mutation(() => String)
  async uploadFile(@Args({ name: 'file', type: () => GraphQLUpload }) file: FileUpload): Promise<string> {
    const result = await this.myFileService.uploadFile(file);
    return result;
  }
}


  1. Implement the MyFileService class to handle file uploads. The uploadFile function might look something like this:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { Injectable } from '@nestjs/common';
import { createWriteStream, ReadStream, unlink } from 'fs';
import { join } from 'path';

@Injectable()
export class MyFileService {
  async uploadFile(file: ReadStream) {
    // Store the file securely on the server
    const fileName = 'my-file.jpg';
    const fileStream = createWriteStream(join(__dirname, fileName));
    file.pipe(fileStream);

    return fileName;
  }
}


  1. Finally, test your image upload functionality by sending a GraphQL mutation with a file parameter. Here's an example using Apollo Client or Postman:
1
2
3

mutation uploadFile($file: Upload!) {
  uploadFile(file: $file)
}


  1. Ensure that you handle file uploads securely by validating the file size, file type, and implementing any necessary security measures to prevent malicious file uploads.


By following these steps, you can securely handle image uploads in Nest.js with GraphQL using the graphql-upload package.


How to handle image upload progress in Nest.js with GraphQL?

To handle image upload progress in Nest.js with GraphQL, you can use the 'graphql-upload' package provided by Apollo Server. Here's a step-by-step guide to implement image upload progress in Nest.js with GraphQL:

  1. Install required packages: First, install the 'graphql-upload' package by running the following command in your terminal:
1

npm install graphql-upload


  1. Update your GraphQL module: In the respective GraphQL module (e.g., upload.module.ts), import the required modules and extend the Apollo Server's configuration with the Upload scalar type to handle file uploads. Here's an example:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { upload } from 'graphql-upload';

@Module({
  imports: [
    GraphQLModule.forRoot({
      schema: buildSchemaSync({
        resolvers: [...],
        scalarsMap: [
          {
            type: GraphQLUpload,
            scalar: upload,
          },
        ],
      }),
    }),
  ],
})
export class UploadModule {}


  1. Handle file upload in your resolver: Next, in your resolver file (e.g., upload.resolver.ts), handle file uploads in your mutation resolver. Here's an example of how to handle file uploads and track the progress:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { Resolver, Mutation, Args, Context } from '@nestjs/graphql';
import { createReadStream } from 'fs';
import { GraphQLUpload, Upload } from 'graphql-upload';

@Resolver()
export class UploadResolver {
  @Mutation(() => Boolean)
  async uploadFile(
    @Args({ name: 'file', type: () => GraphQLUpload }) file: Upload,
    @Context() { req }
  ) {
    const { filename, mimetype, createReadStream } = await file;
    
    // Track the progress of the upload
    const stream = createReadStream();
    stream.on('data', (chunk) => {
      // Handle data chunk
    });
    stream.on('end', () => {
      // Handle file upload completion
    });
    
    // Save the file and return true if successful
    await someFileService.saveFile(filename, createReadStream);
    return true;
  }
}


  1. Update your GraphQL schema: Finally, update your GraphQL schema to include a mutation that allows for file uploads. Here's an example of how to update your GraphQL schema:
1
2
3

type Mutation {
  uploadFile(file: Upload!): Boolean
}


This is how you can handle image upload progress in Nest.js with GraphQL by leveraging the 'graphql-upload' package provided by Apollo Server. Remember to adjust the code snippets based on your project structure and requirements.


How to resize and store uploaded images in Nest.js with GraphQL?

To resize and store uploaded images in Nest.js with GraphQL, you can follow these steps:

  1. Install necessary packages: You will need to install the following packages: graphql-upload, sharp, and fs-extra using npm or yarn.
1

npm install graphql-upload sharp fs-extra


  1. Set up GraphQL Upload scalar: In your app.module.ts file, import GraphQLUpload from graphql-upload and add it to the providers array in the @Module decorator. This will allow you to handle file uploads in your GraphQL schema.
1
2
3
4
5
6

import { GraphQLUpload } from 'graphql-upload';

@Module({
  providers: [GraphQLUpload],
})
export class AppModule {}


  1. Create a resolver for file uploads: Create a resolver that will handle file uploads and resizing. Here is an example of a resolver function that handles image uploads and resizes them using sharp:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { Resolver, Mutation, Args } from '@nestjs/graphql';
import { FileUpload } from 'graphql-upload';
import sharp from 'sharp';
import fs from 'fs-extra';

@Resolver('Image')
export class ImageResolver {

  @Mutation()
  async uploadImage(@Args({ name: 'image', type: () => FileUpload }) image: FileUpload): Promise<string> {
    const { createReadStream, filename } = await image;
    const path = `uploads/${filename}`;

    await new Promise((resolve, reject) =>
      createReadStream()
        .pipe(fs.createWriteStream(path))
        .on('finish', resolve)
        .on('error', reject)
    );

    // Resize image using Sharp
    await sharp(path).resize({ width: 200, height: 200 }).toFile(`uploads/resized-${filename}`);

    return `File uploaded and resized successfully: ${filename}`;
  }

}


  1. Update your GraphQL schema: Make sure to update your GraphQL schema with a new mutation for uploading images. Here is an example schema definition for uploading images:
1
2
3

type Mutation {
  uploadImage(image: Upload!): String
}


  1. Handle uploads in your resolver function: Now you can upload images through GraphQL by passing a file as an argument to the uploadImage mutation. The resolver function will save the uploaded image to the uploads directory and also create a resized version in the uploads directory with the prefix resized-.


That's it! You have now successfully resized and stored uploaded images in Nest.js with GraphQL.


What is the functionality of the @Mutation decorator in Nest.js with GraphQL for image uploads?

The @Mutation decorator in Nest.js with GraphQL is used to define a GraphQL mutation resolver in a GraphQL schema.


When used for image uploads, the @Mutation decorator can be used to create a resolver function that handles the uploading of images to the server. This resolver function can accept an image file as an argument, process the file (e.g., save it to a storage service like Amazon S3), and return information about the uploaded image (e.g., the URL to access the image).


By using the @Mutation decorator, you can define a clear and structured entry point for uploading images in your GraphQL API, making it easy for clients to interact with the server to upload images.

Facebook Twitter LinkedIn Telegram Whatsapp

Related Posts:

How to Bulk Upload Images In Laravel?
In Laravel, you can bulk upload images by first creating a form with a file input for selecting multiple images. Then, use the store() method on the request object to move each of the selected images to a specific directory on the server. To handle multiple fi...
How to Use Graphql on React.js?
GraphQL is a query language for APIs that allows you to request only the data you need, making it more efficient than traditional REST APIs. When using GraphQL with React.js, you first need to install the necessary packages such as GraphQL and Apollo Client.Af...
How to Use Custom Function For Uploading Files In Codeigniter?
To create a custom function for uploading files in CodeIgniter, you can start by defining a new function in your controller. This function should handle the file upload process using CodeIgniter&#39;s file uploading library.Within the custom function, you can ...
How to Upload an Image In Graphql In Flask?
To upload an image in GraphQL in Flask, you can use the GraphQLUpload scalar from the graphene_file_upload library. First, you need to set up a GraphQL mutation that accepts a file input. In the resolver function of this mutation, retrieve the file from the in...
How to Upload Images In Vue.js With Axios?
To upload images in Vue.js with Axios, you can use the FormData object to create a form data object and append the image file to it. You can then make a POST request using Axios to send the form data to the server.First, create a FormData object: const formDat...