remix-run · kentcdodds · Feb 16, 2022 · Feb 5, 2022 · Feb 5, 2022 · Feb 13, 2022
diff --git a/contributors.yml b/contributors.yml
@@ -142,6 +142,7 @@
 - mantey-github
 - manzoorwanijk
 - marcomafessolli
+- marvinwu
 - matchai
 - matthew-burfield
 - Matthew-Mallimo
@@ -225,4 +226,3 @@
 - yesmeck
 - yomeshgupta
 - zachdtaylor
-- zainfathoni
diff --git a/examples/file-and-cloudinary-upload/.env.sample b/examples/file-and-cloudinary-upload/.env.sample
@@ -0,0 +1,3 @@
+CLOUD_NAME=
+API_KEY=
+API_SECRET=
diff --git a/examples/file-and-cloudinary-upload/.gitignore b/examples/file-and-cloudinary-upload/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+/public/build
diff --git a/examples/file-and-cloudinary-upload/README.md b/examples/file-and-cloudinary-upload/README.md
@@ -0,0 +1,37 @@
+# upload file and images
+
+This is a simple example of using the remix buildin [uploadHandler](https://remix.run/docs/en/v1/api/remix#uploadhandler) and Form with multipart data to upload an image file and display it,
+it also show a simple(though not efficient way) of integrate with cloudinary without writing custom handler.
+
+the relevent files are:
+
+```
+├── app
+│   ├── routes
+│   │   ├── cloudinary-upload.tsx // upload to cloudinary
+│   │   └── local-upload.tsx // local upload using build in [createfileuploadhandler](https://remix.run/docs/en/v1/api/remix#unstable_createfileuploadhandler)
+│   └── utils
+│       └── utils.server.ts  // init cloudinary nodejs client on server side
+|── .env // holds cloudinary credentails
+```
+
+## steps to set up cloudinary
+
+- sign up a free [cloudinary account](https://cloudinary.com/)
+- get the cloudname, api key and api secret from dashboard
+- copy the .env.sample to .env and populate the credentials
+
+
+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/remix/tree/main/examples/file-and-cloudinary-upload)
+
+## Example
+
+## Related Links
+
+### Remix Documentation
+
+- [Handle Multiple Part Forms(File Uplodas)](https://remix.run/docs/en/v1/api/remix#unstable_parsemultipartformdata-node)
+- [Upload Handler](https://remix.run/docs/en/v1/api/remix#uploadhandler)
+- [Custom Uploader](https://remix.run/docs/en/v1/api/remix#custom-uploadhandler)
diff --git a/examples/file-and-cloudinary-upload/app/entry.client.tsx b/examples/file-and-cloudinary-upload/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);
diff --git a/examples/file-and-cloudinary-upload/app/entry.server.tsx b/examples/file-and-cloudinary-upload/app/entry.server.tsx
@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}
diff --git a/examples/file-and-cloudinary-upload/app/root.tsx b/examples/file-and-cloudinary-upload/app/root.tsx
@@ -0,0 +1,27 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration
+} from "remix";
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/examples/file-and-cloudinary-upload/app/routes/cloudinary-upload.tsx b/examples/file-and-cloudinary-upload/app/routes/cloudinary-upload.tsx
@@ -0,0 +1,58 @@
+import {
+  Form,
+  unstable_parseMultipartFormData,
+  useActionData,
+  json
+} from "remix";
+import type { ActionFunction, UploadHandler } from "remix";
+
+import { uploadImage } from "~/utils/utils.server";
+
+type ActionData = {
+  errorMsg?: string;
+  imgSrc?: string;
+};
+
+export const action: ActionFunction = async ({ request }) => {
+  let uploadHandler: UploadHandler = async ({ name, stream }) => {
+    if (name !== "img") {
+      stream.resume();
+      return;
+    }
+    const uploadedImage = await uploadImage(stream);
+    return uploadedImage.secure_url;
+  };
+
+  const formData = await unstable_parseMultipartFormData(
+    request,
+    uploadHandler
+  );
+  const imgSrc = formData.get("img");
+  if (!imgSrc) {
+    return json({
+      error: "something wrong"
+    });
+  }
+  return json({
+    imgSrc
+  });
+};
+
+export default function Index() {
+  const data = useActionData<ActionData>();
+  return (
+    <>
+      <Form method="post" encType="multipart/form-data">
+        <input type="file" name="img" accept="image/*" />
+        <button type="submit">upload to cloudinary</button>
+      </Form>
+      {data?.errorMsg && <h2>{data.errorMsg}</h2>}
+      {data?.imgSrc && (
+        <>
+          <h2>uploaded image</h2>
+          <img src={data.imgSrc} />
+        </>
+      )}
+    </>
+  );
+}
diff --git a/examples/file-and-cloudinary-upload/app/routes/local-upload.tsx b/examples/file-and-cloudinary-upload/app/routes/local-upload.tsx
@@ -0,0 +1,52 @@
+import {
+  Form,
+  unstable_createFileUploadHandler,
+  unstable_parseMultipartFormData,
+  useActionData,
+  json
+} from "remix";
+import type { ActionFunction } from "remix";
+
+type ActionData = {
+  errorMsg?: string;
+  imgSrc?: string;
+};
+
+export const action: ActionFunction = async ({ request }) => {
+  const uploadHandler = unstable_createFileUploadHandler({
+    directory: "public",
+    maxFileSize: 30000
+  });
+  const formData = await unstable_parseMultipartFormData(
+    request,
+    uploadHandler
+  );
+  const image = formData.get("img");
+  if (!image) {
+    return json({
+      error: "something wrong"
+    });
+  }
+  return json({
+    imgSrc: image.name
+  });
+};
+
+export default function Index() {
+  const data = useActionData<ActionData>();
+  return (
+    <>
+      <Form method="post" encType="multipart/form-data">
+        <input type="file" name="img" accept="image/*" />
+        <button type="submit">upload image</button>
+      </Form>
+      {data?.errorMsg && <h2>{data.errorMsg}</h2>}
+      {data?.imgSrc && (
+        <>
+          <h2>uploaded image</h2>
+          <img alt="uploaded" src={data.imgSrc} />
+        </>
+      )}
+    </>
+  );
+}
diff --git a/examples/file-and-cloudinary-upload/app/utils/utils.server.ts b/examples/file-and-cloudinary-upload/app/utils/utils.server.ts
@@ -0,0 +1,30 @@
+import dotenv from "dotenv";
+import cloudinary from "cloudinary";
+import type { Stream } from "stream";
+
+dotenv.config();
+cloudinary.v2.config({
+  cloud_name: process.env.CLOUD_NAME,
+  api_key: process.env.API_KEY,
+  api_secret: process.env.API_SECRET
+});
+
+async function uploadImage(fileStream: Stream) {
+  return new Promise((resolve, reject) => {
+    const uploadStream = cloudinary.v2.uploader.upload_stream(
+      {
+        folder: "remix"
+      },
+      (error, result) => {
+        if (error) {
+          reject(error);
+        }
+        resolve(result);
+      }
+    );
+    fileStream.pipe(uploadStream);
+  });
+}
+
+console.log("configs", cloudinary.v2.config());
+export { uploadImage };