Function code needs to be updated for a bug

Followed the instruction in the development guide below

https://docs.aws.amazon.com/solutions/latest/serverless-image-handler/appendix-d.html

Trying to convert my image with filter, it works fine if there is no prefix in my image uploaded in S3 bucket. (no prefix means that my image is not under a folder. any folder structure means only a prefix to an object due to S3 is an object storage without folder concept)

However, it does not work if there is a prefix in my object (image file)

##Works

https://d3q88at0v19ygp.cloudfront.net/fit-in/300x400/filters:fill(00ff00):rotate(90)/<example>.jpg

##Not works

https://d3q88at0v19ygp.cloudfront.net/fit-in/300x400/filters:fill(00ff00):rotate(90)/<object prefix>/<example>.jpg

After checked the source code provided by the solution, the function code listed below which requires modification. Otherwise, it cannot work if there is a prefix in customer’s s3 object when using the scenario mentioned in[1]

https://github.com/awslabs/serverless-image-handler/blob/master/source/image-handler/image-request.js#L141

According to the function, it always returned only object key without prefix ( ==> return key[key.length - 1]; ), which is the reason why filter cannot work especially when I enter an object key with prefix from a S3 bucket.

Suggest to remove following syntax

const key = (event["path"]).split("/");
return key[key.length - 1];

Replace with following code, the repack the code deployment package and re-upload to the function. I will submit the feedback to the doc

var path = event["path"];
const match_reg1 = new RegExp(/^(\/?)((fit-in)\/\d+x\d+\/(filters:.+)(unsafe)?).*(.+jpg|.+png|.+webp|.+tiff|.+jpeg)$/);
const match_reg2 = new RegExp(/^(\/?)((fit-in)\/\d+x\d+\/(smart)(unsafe)?).*(.+jpg|.+png|.+webp|.+tiff|.+jpeg)$/);


 var updatedKey = '';
 const key = path.split("/");
 
if (match_reg1.test(path) || match_reg2.test(path)) {

   for (i = 4; i < key.length; i++) { 
     updatedKey += key[i];
     if (i != key.length-1){
       updatedKey += '/';
     }
   }
   console.log(updatedKey);
   return updatedKey;
 }
 
 else{
   for (i = 3; i < key.length; i++) { 
     updatedKey += key[i];
     if (i != key.length-1){
       updatedKey += '/';
     }
   }
   
   console.log(updatedKey);
   return updatedKey;
 }

[damien-monni]

I also have the exact same problem. It doesn’t work with the Thumbor syntax, but it does with the image request syntax as JSON.

Working with images nested in subfolders is only supported using the v4.0.0 image request syntax

@hayesry, there are 2 problems for me using the encoded JSON object:

1. SEO: original filename doesn’t appear in URL anymore
2. SSR : I wanted to use it on a React application with Server Side Rendering (using Next.js), so I need a polyfill for btoa() function.

[beomseoklee]

We are closing this issue, but please feel free to open the issue again if you any other support.