NestJS, subir múltiples archivos utilizando GraphQL

Intenté subir varios archivos usando Nestjs Graphql pero no puedo…

Este código funciona bien con el controlador (Rest) exactamente en https://docs.nestjs.com/techniques/file-upload

@Post('upload') @UseInterceptors(FilesInterceptor('files',saveImageToStorage)) uploadImages(@UploadedFiles() files:Array<express.multer.file>, @Req() req:Request):any{ return ; }

Pero no funciona con Graphql, tal vez porque (FileInterceptor) no puede funcionar con graphql. ¿Cómo puedo implementar este código o esta forma con graphql para cargar imagenes múltiples?

Nota: Intenté muchas formas de cargar multiples imágenes usando nest graph (con multer y con graphql-upload) ¡pero todas las formas fallaron!

image-storage.ts

“`javascript
import { diskStorage } from "multer";
import { generate } from 'shortid';
import * as fs from 'fs';
import path = require('path');

type validFileExtension = 'png' | 'jpg' | 'jpeg';
type validMimeType = 'image/png' | 'image/jpg' | 'image/jpeg';

const validFileExtensions: validFileExtension[] = ['png' , 'jpg' , 'jpeg'];
const validMimeTypes: validMimeType[] = ['image/png' , 'image/jpg' , 'image/jpeg'];

export const saveImageToStorage = {
storage:diskStorage({
destination:'./images',
filename:(req,file,cb)=>{
const fileExtension:string = path.extname(file.originalname);
const fileName:string = generate() + fileExtension
cb(null,fileName)
}
}),
fileFilter: (req, file, cb) => {
const allowedMimeTypes: validMimeType[] = validMimeTypes;
allowedMimeTypes.includes(file.mimetype) ? cb(null,true) : cb(null,false)
}
}

export const removeFile = (fullFilePath:string):void => {
try{
fs.unlinkSync(fullFilePath);
} catch(err) {
console.log(err);
}
}
“`</express.multer.file>

davy.ai

July 29, 2023 at 6:25 am

Desafortunadamente, usar FileInterceptor con GraphQL puede ser complicado porque GraphQL se basa en una única solicitud HTTP. Sin embargo, existen bibliotecas alternativas que pueden ayudarte a lograr la carga de archivos con GraphQL en NestJS.

Una de esas bibliotecas es graphql-upload. Con esta biblioteca, puedes modificar tu resolvedor para aceptar cargas de archivos y luego transmitirlas a tu solución de almacenamiento elegida. Aquí tienes un ejemplo de resolvedor que utiliza graphql-upload:

import { GraphQLUpload } from 'graphql-upload';

@Injectable()
export class MyResolver {
  @Mutation(() => Boolean)
  async uploadFiles(
    @Args({ name: 'files', type: () => [GraphQLUpload] }) files: Array<fileupload>,
  ) {
    // Lógica para transmitir archivos al almacenamiento, por ejemplo, a través de `saveImageToStorage`
    // ...
    return true;
  }
}

En el código anterior, estamos utilizando el escalar GraphQLUpload para indicar que aceptamos cargas de archivos, y luego estamos pasando un array de objetos FileUpload al resolvedor. El resto del código sería similar a lo que ya tienes en saveImageToStorage: transmitir los archivos al almacenamiento, validar sus extensiones/tipos MIME, etc.

Para usar graphql-upload con NestJS, deberás agregar varios elementos de middleware. Aquí tienes un ejemplo de main.ts que configura graphql-upload junto con multer:

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Configurar multer + middleware de graphql-upload
  app.use(
    '/graphql',
    graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }),
    bodyParser.json(), // requerido para las solicitudes GraphQL
  );

  await app.listen(3000);
}
bootstrap();

Con este middleware en su lugar, ¡tu resolvedor debería poder manejar las cargas de archivos a través de GraphQL!

Espero que esto ayude, y buena suerte con tu implementación de carga de archivos.

Answer

davy.ai

July 29, 2023 at 6:25 am
Desafortunadamente, usar FileInterceptor con GraphQL puede ser complicado porque GraphQL se basa en una única solicitud HTTP. Sin embargo, existen bibliotecas alternativas que pueden ayudarte a lograr la carga de archivos con GraphQL en NestJS.

Una de esas bibliotecas es graphql-upload. Con esta biblioteca, puedes modificar tu resolvedor para aceptar cargas de archivos y luego transmitirlas a tu solución de almacenamiento elegida. Aquí tienes un ejemplo de resolvedor que utiliza graphql-upload:
```
import { GraphQLUpload } from 'graphql-upload';

@Injectable()
export class MyResolver {
  @Mutation(() => Boolean)
  async uploadFiles(
    @Args({ name: 'files', type: () => [GraphQLUpload] }) files: Array<fileupload>,
  ) {
    // Lógica para transmitir archivos al almacenamiento, por ejemplo, a través de `saveImageToStorage`
    // ...
    return true;
  }
}
```
En el código anterior, estamos utilizando el escalar GraphQLUpload para indicar que aceptamos cargas de archivos, y luego estamos pasando un array de objetos FileUpload al resolvedor. El resto del código sería similar a lo que ya tienes en saveImageToStorage: transmitir los archivos al almacenamiento, validar sus extensiones/tipos MIME, etc.

Para usar graphql-upload con NestJS, deberás agregar varios elementos de middleware. Aquí tienes un ejemplo de main.ts que configura graphql-upload junto con multer:
```
async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Configurar multer + middleware de graphql-upload
  app.use(
    '/graphql',
    graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }),
    bodyParser.json(), // requerido para las solicitudes GraphQL
  );

  await app.listen(3000);
}
bootstrap();
```
Con este middleware en su lugar, ¡tu resolvedor debería poder manejar las cargas de archivos a través de GraphQL!

Espero que esto ayude, y buena suerte con tu implementación de carga de archivos.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

NestJS, subir múltiples archivos utilizando GraphQL

Answer

davy.ai