Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AmazonS3FileInterceptor only uses one MulterExtendedOptions property, even if two were passed #237

Open
jonasschultheiss opened this issue Sep 17, 2020 · 9 comments

Comments

@jonasschultheiss
Copy link

Hey, first of all, cool package. It's really easy to upload to a s3 with this.

One thing I noticed on my project was, that the second property of MulterExtendedOptions doesn't seem to make a difference in the AmazonS3FileInterceptor. What I'd like to have random file names and thumbnails, but it appears to ignore the second option.

  1. Example 1 -> thumbnail first:
    1.1. Code

    // image.controller.ts
    
    @Controller()
    export class ImageController {
      constructor(private imageService: ImageService) {}
    
      @Post('/users/:id/avatar')
      @UseInterceptors(
        AmazonS3FileInterceptor('file', {
          thumbnail: { suffix: 'thumb', width: 500, height: 500 },
          randomFilename: true,
        }),
      )
      async setAvatar(
        @Param('id', ParseIntPipe) userId: number,
        @UploadedFile() uploadedImage: UploadImageDto,
      ): Promise<Image> {
        console.log(
          'ImageController -> constructor -> uploadedImage',
          uploadedImage,
        );
        return this.imageService.setAvatar(userId, uploadedImage);
      }
    }

1.2 Console out

image -> Image {
  originalname: '5.png',
  mimetype: 'image/png',
  original: ImageData {
    ACL: 'public-read',
    Location: 'https://yxcvbnm.ams3.digitaloceanspaces.com/dev/5.png-original',
    key: 'dev/5.png-original',
    Key: 'dev/5.png-original',
    Bucket: 'yxcvbnm',
    format: 'png',
    width: 200,
    height: 200,
    channels: 4,
    premultiplied: false,
    size: 1593,
    ContentType: 'png',
    mimetype: 'image/png',
    id: 9
  },
  thumb: ImageData {
    ACL: 'public-read',
    Location: 'https://yxcvbnm.ams3.digitaloceanspaces.com/dev/5.png-thumb',
    key: 'dev/5.png-thumb',
    Key: 'dev/5.png-thumb',
    Bucket: 'yxcvbnm',
    format: 'png',
    width: 500,
    height: 500,
    channels: 4,
    premultiplied: true,
    size: 26997,
    ContentType: 'png',
    mimetype: 'image/png',
    id: 10
  }
}
  1. Example 2 -> randomFileName first
    2.1. Code

    // image.controller.ts
    
    @Controller()
    export class ImageController {
      constructor(private imageService: ImageService) {}
    
      @Post('/users/:id/avatar')
      @UseInterceptors(
        AmazonS3FileInterceptor('file', {
    	  randomFilename: true,
          thumbnail: { suffix: 'thumb', width: 500, height: 500 },
        }),
      )
      async setAvatar(
        @Param('id', ParseIntPipe) userId: number,
        @UploadedFile() uploadedImage: UploadImageDto,
      ): Promise<Image> {
        console.log(
          'ImageController -> constructor -> uploadedImage',
          uploadedImage,
        );
        return this.imageService.setAvatar(userId, uploadedImage);
      }
    }

2.2 Console out

image -> Image {
	fieldname: 'file',
  originalname: '5.png',
	encoding: '7bit',
	mimetype: 'image/png',
	ACL: 'public-read',
	ETag: '"6eb01f522a374f04a3d790bab8433f7f"',
	Location: 'https://frozenpants.ams3.digitaloceanspaces.com/dev/77945170-51e8-4190-944f-26d26669518c.png',
  key: 'dev/77945170-51e8-4190-944f-26d26669518c.png',
  Key: 'dev/77945170-51e8-4190-944f-26d26669518c.png',
  Bucket: 'frozenpants',
  width: 200,
  height: 200,
  premultiplied: false,
  size: 1593,
  ContentType: 'png'
}

As you can see, the first example creates a thumbnail but doesn't upload the file with a random name, while the second example does the oposite.

If I made a mistake in my code, feel free to tell me.

@jonasschultheiss
Copy link
Author

let storageOptions: S3StorageOptions;
const extendedOptionProperty = Object.keys(this.localOptions)[0];

switch (extendedOptionProperty) {

Could it be, that this part only takes the first property into account and then switches through it?

@jeffminsungkim
Copy link
Owner

Thanks for opening an issue @jonasschultheiss
First of all, sorry for the late response. Currently, we don't support the feature that you're trying to achieve. May I ask why you want this feature?

@jonasschultheiss
Copy link
Author

jonasschultheiss commented Oct 9, 2020

I'd like to have this feature, so I have a thumbnail and both have a unique name.

  • no problems on the s3 because of naming stuff
  • thumbnail for react frontend
  • reduces loading time, if a gallery of images should be shown

@jeffminsungkim
Copy link
Owner

@jonasschultheiss

Sounds fair to me. Would you like to create a PR for this?

@jonasschultheiss
Copy link
Author

sure, but make sure to review it, as I don't have that much experience with open source projects

@jeffminsungkim
Copy link
Owner

@jonasschultheiss
No worries! I can help you if you need anything 😀

@whather
Copy link

whather commented Nov 13, 2020

@jonasschultheiss are you still working on a PR for this?

@jonasschultheiss
Copy link
Author

No, the work and final phase at school are a bit stressful for me. I like to work on it at the beginning of the new year.

@denes16
Copy link

denes16 commented Sep 19, 2021

Any, news on this?.
I think we only need to add
randomFilename: this.localOptions.randomFilename like dynamicPath: this.localOptions.dynamicPath, in

on every siwtch statement

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants