Added: README.md, fixed image processing and updated README.md

Author: ironexdev

.env.example

@@ -1,6 +1,8 @@
 NODE_ENV=development
+
 NEXT_PUBLIC_AWS_S3_REGION=us-east-1
-NEXT_PUBLIC_AWS_S3_BUCKET_NAME=your-bucket-name
+NEXT_PUBLIC_AWS_S3_BUCKET_NAME=server-bucket-name
+NEXT_PUBLIC_AWS_S3_STORAGE_BUCKET_NAME=storage-bucket-name
 AWS_ACCESS_KEY_ID=key
 AWS_SECRET_ACCESS_KEY=secret
 AWS_CLOUDFRONT_DISTRIBUTION=abcdef12345678.cloudfront.net

README.md

@@ -1,17 +1,39 @@
-# S3 Asset Uploader with Sharp optimization
+# S3 Image Manager
 
-Simple S3 image asset uploader with Sharp optimization. It is very simple and barebones, but it does the job.
-- In future I plan to extend this to also support videos and documents.
+This simple S3 image manager allows you to:
+- Optimize images with Sharp
+   - Change quality
+   - Change format
+   - Resize
+   - Clone (to create multiple versions of the same image)
+- Download processed images
+- Upload images to S3
+- Search images in S3
+- Delete images in S3
 
 Run it on localhost to optimize and upload images to S3. Retrieved links of uploaded images point to Cloudfront and can be used in production.
 
 ## Preview
-<img src="assets/preview.png" alt="App Preview" width="800"/>
+
+### Modification
+![Modify](assets/modify.png)
+
+### Upload/Download
+![Upload/Download](assets/upload-download.png)
+
+### S3 for serving images
+![S3 Server](assets/s3-server.png)
+
+## S3 for storing images
+![S3 Storage](assets/s3-storage.png)
 
 ## Pre-requisites
 
-1) Setup S3 bucket with Cloudfront distribution in front of it. This app returns Cloudfront links after you upload the image. [This video](https://www.youtube.com/watch?v=kbI7kRWAU-w) can help you with that.
-2) Create IAM user with following policy (replace "your-bucket-name" with your actual bucket name)
+1) Setup two AWS S3 buckets - one is for serving images (server-bucket) via Cloudfront distribution (CDN) and second is for storing raw images (storage-bucket)
+   - <small>S3 bucket for storage is optional</small>
+   - <small>Make sure to enable versioning in your S3 buckets, otherwise you might accidentally delete your images</small>
+   - <small>[How to setup a Cloudfront distribution](https://www.youtube.com/watch?v=kbI7kRWAU-w)</small>
+2) Create IAM user with following policy (replace "server-bucket-name" and "storage-bucket-name" with your actual bucket name)
 ```
 {
     "Version": "2012-10-17",
@@ -25,8 +47,10 @@ Run it on localhost to optimize and upload images to S3. Retrieved links of uplo
                 "s3:ListBucket"
             ],
             "Resource": [
-                "arn:aws:s3:::blazing-peon-images",
-                "arn:aws:s3:::blazing-peon-images/*"
+                "arn:aws:s3:::server-bucket-name",
+                "arn:aws:s3:::server-bucket-name/*",
+                "arn:aws:s3:::storage-bucket-name/*",
+                "arn:aws:s3:::storage-bucket-name/*"
             ]
         }
     ]
@@ -50,3 +74,6 @@ Run it on localhost to optimize and upload images to S3. Retrieved links of uplo
 - <small>#2 Upload Form</small>
 5) **Fill in the new image name** (technically S3 namespace) <small>-> it will be automatically prefixed with assets/</small>
 6) **Click upload** <small>-> image will be uploaded to S3 bucket and Cloudfront link will be returned</small>
+
+## Notes
+1) Animations / GIFs are not supported

assets/modify.png

@@ -71,21 +71,35 @@ async function processImage(
     outputFormat = metadata.format;
     quality = 100;
   } else {
-    outputHeight = imageInfo.height ?? metadata.height;
-    outputWidth = imageInfo.width ?? metadata.width;
+    if (!imageInfo.height && !imageInfo.width) {
+      outputHeight = metadata.height;
+      outputWidth = metadata.width;
+    } else {
+      outputHeight =
+        imageInfo.height && imageInfo.height > 0 ? imageInfo.height : undefined;
+      outputWidth =
+        imageInfo.width && imageInfo.width > 0 ? imageInfo.width : undefined;
+    }
+
     outputFormat = imageInfo.format ?? metadata.format;
     quality = imageInfo.quality;
   }
 
-  // Process image with sharp
-  const processedImageBuffer = raw
-    ? await image.toBuffer()
-    : await image
-        .resize(outputWidth, outputHeight)
-        .toFormat(outputFormat as keyof sharp.FormatEnum, {
-          quality,
-        })
-        .toBuffer();
+  if (!raw) {
+    image
+      .resize(outputWidth, outputHeight)
+      .toFormat(outputFormat as keyof sharp.FormatEnum, {
+        quality,
+      });
+  }
+
+  const { data: processedImageBuffer, info } = await image.toBuffer({
+    resolveWithObject: true,
+  });
+
+  outputHeight = info.height;
+  outputWidth = info.width;
+  outputFormat = info.format;
 
   return {
     title: outputTitle,

assets/preview.png

@@ -11,7 +11,10 @@ const s3Client = new S3Client({
 
 export async function GET(request: Request) {
   const url = new URL(request.url);
-  const type = url.searchParams.get("type") ?? "server";
+  // NEXT_PUBLIC_AWS_S3_STORAGE_BUCKET_NAME is optional
+  const type = !process.env.NEXT_PUBLIC_AWS_S3_STORAGE_BUCKET_NAME
+    ? "server"
+    : (url.searchParams.get("type") ?? "server");
 
   let bucketName;
   let prefix;