From 25aafc1e2018079430e219c64cdf2b8e450a7caf Mon Sep 17 00:00:00 2001
From: Jan <jan.hesters@rwth-aachen.de>
Date: Sun, 19 Feb 2023 13:57:58 +0100
Subject: [PATCH] add AWS SDK v3 upload example

---
 file-and-s3-upload-v2/.env.sample             |   4 +
 file-and-s3-upload-v2/.eslintrc.js            |   4 +
 file-and-s3-upload-v2/.gitignore              |   6 +
 file-and-s3-upload-v2/README.md               |  37 ++++++
 file-and-s3-upload-v2/app/entry.client.tsx    |  21 ++++
 file-and-s3-upload-v2/app/entry.server.tsx    | 110 ++++++++++++++++++
 file-and-s3-upload-v2/app/root.tsx            |  32 +++++
 .../app/routes/s3-upload.tsx                  |  68 +++++++++++
 file-and-s3-upload-v2/app/utils/s3.server.ts  |  50 ++++++++
 file-and-s3-upload-v2/package.json            |  30 +++++
 file-and-s3-upload-v2/public/favicon.ico      | Bin 0 -> 16958 bytes
 file-and-s3-upload-v2/remix.config.js         |  10 ++
 file-and-s3-upload-v2/remix.env.d.ts          |   2 +
 file-and-s3-upload-v2/sandbox.config.json     |   7 ++
 file-and-s3-upload-v2/tsconfig.json           |  22 ++++
 file-and-s3-upload/.env.sample                |   8 +-
 file-and-s3-upload/app/utils/s3.server.ts     |  45 ++++---
 file-and-s3-upload/package.json               |  23 ++--
 18 files changed, 450 insertions(+), 29 deletions(-)
 create mode 100644 file-and-s3-upload-v2/.env.sample
 create mode 100644 file-and-s3-upload-v2/.eslintrc.js
 create mode 100644 file-and-s3-upload-v2/.gitignore
 create mode 100644 file-and-s3-upload-v2/README.md
 create mode 100644 file-and-s3-upload-v2/app/entry.client.tsx
 create mode 100644 file-and-s3-upload-v2/app/entry.server.tsx
 create mode 100644 file-and-s3-upload-v2/app/root.tsx
 create mode 100644 file-and-s3-upload-v2/app/routes/s3-upload.tsx
 create mode 100644 file-and-s3-upload-v2/app/utils/s3.server.ts
 create mode 100644 file-and-s3-upload-v2/package.json
 create mode 100644 file-and-s3-upload-v2/public/favicon.ico
 create mode 100644 file-and-s3-upload-v2/remix.config.js
 create mode 100644 file-and-s3-upload-v2/remix.env.d.ts
 create mode 100644 file-and-s3-upload-v2/sandbox.config.json
 create mode 100644 file-and-s3-upload-v2/tsconfig.json

diff --git a/file-and-s3-upload-v2/.env.sample b/file-and-s3-upload-v2/.env.sample
new file mode 100644
index 00000000..17b368d3
--- /dev/null
+++ b/file-and-s3-upload-v2/.env.sample
@@ -0,0 +1,4 @@
+STORAGE_ACCESS_KEY=
+STORAGE_SECRET=
+STORAGE_REGION=
+STORAGE_BUCKET=
\ No newline at end of file
diff --git a/file-and-s3-upload-v2/.eslintrc.js b/file-and-s3-upload-v2/.eslintrc.js
new file mode 100644
index 00000000..2061cd22
--- /dev/null
+++ b/file-and-s3-upload-v2/.eslintrc.js
@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};
diff --git a/file-and-s3-upload-v2/.gitignore b/file-and-s3-upload-v2/.gitignore
new file mode 100644
index 00000000..3f7bf98d
--- /dev/null
+++ b/file-and-s3-upload-v2/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/file-and-s3-upload-v2/README.md b/file-and-s3-upload-v2/README.md
new file mode 100644
index 00000000..9fc13b1c
--- /dev/null
+++ b/file-and-s3-upload-v2/README.md
@@ -0,0 +1,37 @@
+# Upload images to S3 with AWS SDK v2
+
+> **Note:** This example is for the old AWS SDK v2. For the updated with the AWS SDK v3 example, see [file-and-s3-upload](https://github.com/remix-run/examples/tree/main/file-and-s3-upload).
+
+This is a simple example of using the remix built-in [uploadHandler](https://remix.run/utils/parse-multipart-form-data#uploadhandler) and Form with multipart data to upload a file with the built-in local uploader and upload an image file to S3 with a custom uploader and display it. You can test it locally by running the dev server and opening the path `/s3-upload` in your browser.
+
+The relevent files are:
+
+```
+├── app
+│   ├── routes
+│   │   ├── s3-upload.tsx // upload to S3
+│   └── utils
+│       └── s3.server.ts  // init S3 client on server side
+|── .env // holds AWS S3 credentails
+```
+
+## Steps to set up an S3 bucket
+
+- Sign up for an [AWS account](https://portal.aws.amazon.com/billing/signup) - this will require a credit card
+- Create an S3 bucket in your desired region
+- Create an access key pair for an IAM user that has access to the bucket
+- Copy the .env.sample to .env and fill in the S3 bucket, the region as well as the access key and secret key from the IAM user
+
+Note: in order for the image to be displayed after being uploaded to your S3 bucket in this example, the bucket needs to have public access enabled, which is potentially dangerous.
+
+> :warning: Lambda imposes a [limit of 6MB](https://docs.aws.amazon.com/lambda/latest/dg/gettingstarted-limits.html) on the invocation payload size. If you use this example with Remix running on Lambda, you can only update files with a size smaller than 6MB.
+
+Open this example on [CodeSandbox](https://codesandbox.com):
+
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/examples/tree/main/file-and-s3-upload)
+
+## Related Links
+
+- [Handle Multiple Part Forms (File Uploads)](https://remix.run/utils/parse-multipart-form-data-node)
+- [Upload Handler](https://remix.run/utils/parse-multipart-form-data#uploadhandler)
+- [Custom Uploader](https://remix.run/guides/file-uploads)
diff --git a/file-and-s3-upload-v2/app/entry.client.tsx b/file-and-s3-upload-v2/app/entry.client.tsx
new file mode 100644
index 00000000..852a7928
--- /dev/null
+++ b/file-and-s3-upload-v2/app/entry.client.tsx
@@ -0,0 +1,21 @@
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+const hydrate = () =>
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>
+    );
+  });
+
+if (typeof requestIdleCallback === "function") {
+  requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1);
+}
diff --git a/file-and-s3-upload-v2/app/entry.server.tsx b/file-and-s3-upload-v2/app/entry.server.tsx
new file mode 100644
index 00000000..dc6248a2
--- /dev/null
+++ b/file-and-s3-upload-v2/app/entry.server.tsx
@@ -0,0 +1,110 @@
+import { PassThrough } from "stream";
+
+import type { EntryContext } from "@remix-run/node";
+import { Response } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import isbot from "isbot";
+import { renderToPipeableStream } from "react-dom/server";
+
+const ABORT_DELAY = 5000;
+
+const handleRequest = (
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) =>
+  isbot(request.headers.get("user-agent"))
+    ? handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      )
+    : handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      );
+export default handleRequest;
+
+const handleBotRequest = (
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) =>
+  new Promise((resolve, reject) => {
+    let didError = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onAllReady: () => {
+          const body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError: (error: unknown) => {
+          reject(error);
+        },
+        onError: (error: unknown) => {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+
+const handleBrowserRequest = (
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) =>
+  new Promise((resolve, reject) => {
+    let didError = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onShellReady: () => {
+          const body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError: (error: unknown) => {
+          reject(error);
+        },
+        onError: (error: unknown) => {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
diff --git a/file-and-s3-upload-v2/app/root.tsx b/file-and-s3-upload-v2/app/root.tsx
new file mode 100644
index 00000000..927a0f74
--- /dev/null
+++ b/file-and-s3-upload-v2/app/root.tsx
@@ -0,0 +1,32 @@
+import type { MetaFunction } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "New Remix App",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/file-and-s3-upload-v2/app/routes/s3-upload.tsx b/file-and-s3-upload-v2/app/routes/s3-upload.tsx
new file mode 100644
index 00000000..b6fbce86
--- /dev/null
+++ b/file-and-s3-upload-v2/app/routes/s3-upload.tsx
@@ -0,0 +1,68 @@
+import type { ActionArgs, UploadHandler } from "@remix-run/node";
+import {
+  json,
+  unstable_composeUploadHandlers as composeUploadHandlers,
+  unstable_createMemoryUploadHandler as createMemoryUploadHandler,
+  unstable_parseMultipartFormData as parseMultipartFormData,
+} from "@remix-run/node";
+import { useFetcher } from "@remix-run/react";
+
+import { s3UploadHandler } from "~/utils/s3.server";
+
+type ActionData = {
+  errorMsg?: string;
+  imgSrc?: string;
+  imgDesc?: string;
+};
+
+export const action = async ({ request }: ActionArgs) => {
+  const uploadHandler: UploadHandler = composeUploadHandlers(
+    s3UploadHandler,
+    createMemoryUploadHandler()
+  );
+  const formData = await parseMultipartFormData(request, uploadHandler);
+  const imgSrc = formData.get("img");
+  const imgDesc = formData.get("desc");
+  console.log(imgDesc);
+  if (!imgSrc) {
+    return json({
+      errorMsg: "Something went wrong while uploading",
+    });
+  }
+  return json({
+    imgSrc,
+    imgDesc,
+  });
+};
+
+export default function Index() {
+  const fetcher = useFetcher<ActionData>();
+  return (
+    <>
+      <fetcher.Form method="post" encType="multipart/form-data">
+        <label htmlFor="img-field">Image to upload</label>
+        <input id="img-field" type="file" name="img" accept="image/*" />
+        <label htmlFor="img-desc">Image description</label>
+        <input id="img-desc" type="text" name="desc" />
+        <button type="submit">Upload to S3</button>
+      </fetcher.Form>
+      {fetcher.type === "done" ? (
+        fetcher.data.errorMsg ? (
+          <h2>{fetcher.data.errorMsg}</h2>
+        ) : (
+          <>
+            <div>
+              File has been uploaded to S3 and is available under the following
+              URL (if the bucket has public access enabled):
+            </div>
+            <div>{fetcher.data.imgSrc}</div>
+            <img
+              src={fetcher.data.imgSrc}
+              alt={fetcher.data.imgDesc || "Uploaded image from S3"}
+            />
+          </>
+        )
+      ) : null}
+    </>
+  );
+}
diff --git a/file-and-s3-upload-v2/app/utils/s3.server.ts b/file-and-s3-upload-v2/app/utils/s3.server.ts
new file mode 100644
index 00000000..5c2a0dba
--- /dev/null
+++ b/file-and-s3-upload-v2/app/utils/s3.server.ts
@@ -0,0 +1,50 @@
+import { PassThrough } from "stream";
+
+import AWS from "aws-sdk";
+import type { UploadHandler } from "@remix-run/node";
+import { writeAsyncIterableToWritable } from "@remix-run/node";
+
+const { STORAGE_ACCESS_KEY, STORAGE_SECRET, STORAGE_REGION, STORAGE_BUCKET } =
+  process.env;
+
+if (
+  !(STORAGE_ACCESS_KEY && STORAGE_SECRET && STORAGE_REGION && STORAGE_BUCKET)
+) {
+  throw new Error(`Storage is missing required configuration.`);
+}
+
+const uploadStream = ({ Key }: Pick<AWS.S3.Types.PutObjectRequest, "Key">) => {
+  const s3 = new AWS.S3({
+    credentials: {
+      accessKeyId: STORAGE_ACCESS_KEY,
+      secretAccessKey: STORAGE_SECRET,
+    },
+    region: STORAGE_REGION,
+  });
+  const pass = new PassThrough();
+  return {
+    writeStream: pass,
+    promise: s3.upload({ Bucket: STORAGE_BUCKET, Key, Body: pass }).promise(),
+  };
+};
+
+export async function uploadStreamToS3(data: any, filename: string) {
+  const stream = uploadStream({
+    Key: filename,
+  });
+  await writeAsyncIterableToWritable(data, stream.writeStream);
+  const file = await stream.promise;
+  return file.Location;
+}
+
+export const s3UploadHandler: UploadHandler = async ({
+  name,
+  filename,
+  data,
+}) => {
+  if (name !== "img") {
+    return undefined;
+  }
+  const uploadedFileLocation = await uploadStreamToS3(data, filename!);
+  return uploadedFileLocation;
+};
diff --git a/file-and-s3-upload-v2/package.json b/file-and-s3-upload-v2/package.json
new file mode 100644
index 00000000..86b79f36
--- /dev/null
+++ b/file-and-s3-upload-v2/package.json
@@ -0,0 +1,30 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "start": "remix-serve build",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/node": "*",
+    "@remix-run/react": "*",
+    "@remix-run/serve": "*",
+    "aws-sdk": "^2.1152.0",
+    "isbot": "^3.6.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "*",
+    "@remix-run/eslint-config": "*",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.27.0",
+    "typescript": "^4.6.2"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}
diff --git a/file-and-s3-upload-v2/public/favicon.ico b/file-and-s3-upload-v2/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..8830cf6821b354114848e6354889b8ecf6d2bc61
GIT binary patch
literal 16958
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
EKbET!0{{R3

literal 0
HcmV?d00001

diff --git a/file-and-s3-upload-v2/remix.config.js b/file-and-s3-upload-v2/remix.config.js
new file mode 100644
index 00000000..260b82c7
--- /dev/null
+++ b/file-and-s3-upload-v2/remix.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
+module.exports = {
+  ignoredRouteFiles: ["**/.*"],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "build/index.js",
+  // publicPath: "/build/",
+};
diff --git a/file-and-s3-upload-v2/remix.env.d.ts b/file-and-s3-upload-v2/remix.env.d.ts
new file mode 100644
index 00000000..dcf8c45e
--- /dev/null
+++ b/file-and-s3-upload-v2/remix.env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node" />
diff --git a/file-and-s3-upload-v2/sandbox.config.json b/file-and-s3-upload-v2/sandbox.config.json
new file mode 100644
index 00000000..f92e0250
--- /dev/null
+++ b/file-and-s3-upload-v2/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+  "hardReloadOnChange": true,
+  "template": "remix",
+  "container": {
+    "port": 3000
+  }
+}
diff --git a/file-and-s3-upload-v2/tsconfig.json b/file-and-s3-upload-v2/tsconfig.json
new file mode 100644
index 00000000..20f8a386
--- /dev/null
+++ b/file-and-s3-upload-v2/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}
diff --git a/file-and-s3-upload/.env.sample b/file-and-s3-upload/.env.sample
index 17b368d3..6b14abc5 100644
--- a/file-and-s3-upload/.env.sample
+++ b/file-and-s3-upload/.env.sample
@@ -1,4 +1,4 @@
-STORAGE_ACCESS_KEY=
-STORAGE_SECRET=
-STORAGE_REGION=
-STORAGE_BUCKET=
\ No newline at end of file
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+S3_STORAGE_REGION=
+S3_STORAGE_BUCKET=
\ No newline at end of file
diff --git a/file-and-s3-upload/app/utils/s3.server.ts b/file-and-s3-upload/app/utils/s3.server.ts
index 5c2a0dba..40b10df4 100644
--- a/file-and-s3-upload/app/utils/s3.server.ts
+++ b/file-and-s3-upload/app/utils/s3.server.ts
@@ -1,30 +1,42 @@
 import { PassThrough } from "stream";
 
-import AWS from "aws-sdk";
+import type { PutObjectCommandInput } from '@aws-sdk/client-s3';
+import { S3Client } from '@aws-sdk/client-s3';
+import { Upload } from '@aws-sdk/lib-storage';
 import type { UploadHandler } from "@remix-run/node";
 import { writeAsyncIterableToWritable } from "@remix-run/node";
 
-const { STORAGE_ACCESS_KEY, STORAGE_SECRET, STORAGE_REGION, STORAGE_BUCKET } =
-  process.env;
+const {
+  AWS_ACCESS_KEY_ID,
+  AWS_SECRET_ACCESS_KEY,
+  S3_STORAGE_BUCKET,
+  S3_STORAGE_REGION,
+} = process.env;
 
 if (
-  !(STORAGE_ACCESS_KEY && STORAGE_SECRET && STORAGE_REGION && STORAGE_BUCKET)
+  !(
+    AWS_ACCESS_KEY_ID &&
+    AWS_SECRET_ACCESS_KEY &&
+    S3_STORAGE_BUCKET &&
+    S3_STORAGE_REGION
+  )
 ) {
   throw new Error(`Storage is missing required configuration.`);
 }
 
-const uploadStream = ({ Key }: Pick<AWS.S3.Types.PutObjectRequest, "Key">) => {
-  const s3 = new AWS.S3({
-    credentials: {
-      accessKeyId: STORAGE_ACCESS_KEY,
-      secretAccessKey: STORAGE_SECRET,
-    },
-    region: STORAGE_REGION,
-  });
+const uploadStream = ({ Key }: Pick<PutObjectCommandInput, "Key">) => {
+  const client = new S3Client({ region: S3_STORAGE_REGION });
   const pass = new PassThrough();
   return {
     writeStream: pass,
-    promise: s3.upload({ Bucket: STORAGE_BUCKET, Key, Body: pass }).promise(),
+    promise: new Upload({
+      client,
+      params: {
+        Body: pass,
+        Bucket: S3_STORAGE_BUCKET,
+        Key,
+      },
+    }).done(),
   };
 };
 
@@ -34,7 +46,12 @@ export async function uploadStreamToS3(data: any, filename: string) {
   });
   await writeAsyncIterableToWritable(data, stream.writeStream);
   const file = await stream.promise;
-  return file.Location;
+
+  if ('Location' in file) {
+    return file.Location;
+  }
+
+  throw new Error('Upload to S3 aborted');
 }
 
 export const s3UploadHandler: UploadHandler = async ({
diff --git a/file-and-s3-upload/package.json b/file-and-s3-upload/package.json
index 86b79f36..6a268d39 100644
--- a/file-and-s3-upload/package.json
+++ b/file-and-s3-upload/package.json
@@ -1,17 +1,10 @@
 {
-  "private": true,
-  "sideEffects": false,
-  "scripts": {
-    "build": "remix build",
-    "dev": "remix dev",
-    "start": "remix-serve build",
-    "typecheck": "tsc"
-  },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.272.0",
+    "@aws-sdk/lib-storage": "^3.272.0",
     "@remix-run/node": "*",
     "@remix-run/react": "*",
     "@remix-run/serve": "*",
-    "aws-sdk": "^2.1152.0",
     "isbot": "^3.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -26,5 +19,13 @@
   },
   "engines": {
     "node": ">=14"
-  }
-}
+  },
+  "private": true,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "start": "remix-serve build",
+    "typecheck": "tsc"
+  },
+  "sideEffects": false
+}
\ No newline at end of file