chore: Refacted next app to use signed urls for uploads

PinataCloud · Dec 17, 2024 · bfc218a · bfc218a
1 parent ca9eb56
commit bfc218a
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 95 deletions.
diff --git a/examples/next-starter/app/api/key/route.ts b/examples/next-starter/app/api/key/route.ts
diff --git a/examples/next-starter/app/api/url/route.ts b/examples/next-starter/app/api/url/route.ts
@@ -0,0 +1,19 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { pinata } from "@/utils/config";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest, res: NextResponse) {
+	try {
+		const url = await pinata.upload.createSignedURL({
+			expires: 30,
+		});
+		return NextResponse.json({ url: url }, { status: 200 });
+	} catch (error) {
+		console.log(error);
+		return NextResponse.json(
+			{ text: "Error creating API Key:" },
+			{ status: 500 },
+		);
+	}
+}
diff --git a/examples/next-starter/app/page.tsx b/examples/next-starter/app/page.tsx
@@ -4,78 +4,78 @@ import { useState } from "react";
 import { pinata } from "@/utils/config";
 
 export default function Home() {
-  const [file, setFile] = useState<File>();
-  const [url, setUrl] = useState("");
-  const [uploading, setUploading] = useState(false);
+	const [file, setFile] = useState<File>();
+	const [url, setUrl] = useState("");
+	const [uploading, setUploading] = useState(false);
 
-  // Client side upload
-  //
-  const uploadFile = async () => {
-    try {
-      if (!file) {
-        alert("No file selected");
-        return;
-      }
-      setUploading(true);
-      const keyRequest = await fetch("/api/key", {
-        method: "GET",
-      });
-      const keyData = await keyRequest.json();
-      const upload = await pinata.upload.file(file).key(keyData.JWT);
-      const urlReuest = await fetch("/api/sign", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ cid: upload.cid }),
-      });
-      const url = await urlReuest.json();
-      setUrl(url);
-      setUploading(false);
-    } catch (e) {
-      console.log(e);
-      setUploading(false);
-      alert("Trouble uploading file");
-    }
-  };
+	// Client side upload
+	//
+	const uploadFile = async () => {
+		try {
+			if (!file) {
+				alert("No file selected");
+				return;
+			}
+			setUploading(true);
+			const signedUrlReq = await fetch("/api/url", {
+				method: "GET",
+			});
+			const signedUrlRes = await signedUrlReq.json();
+			const upload = await pinata.upload.file(file).url(signedUrlRes.url);
+			const urlReuest = await fetch("/api/sign", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ cid: upload.cid }),
+			});
+			const url = await urlReuest.json();
+			setUrl(url);
+			setUploading(false);
+		} catch (e) {
+			console.log(e);
+			setUploading(false);
+			alert("Trouble uploading file");
+		}
+	};
 
-  // Server side Upload
+	// Server side Upload
 
-  // const uploadFile = async () => {
-  // 	try {
-  //    if (!file) {
-  //      alert("No file selected");
-  //      return;
-  //    }
-  // 		setUploading(true);
-  // 		const data = new FormData();
-  // 		data.set("file", file);
-  // 		const uploadRequest = await fetch("/api/files", {
-  // 			method: "POST",
-  // 			body: data,
-  // 		});
-  // 		const signedUrl = await uploadRequest.json();
-  // 		console.log(signedUrl);
-  // 		setUrl(signedUrl);
-  // 		setUploading(false);
-  // 	} catch (e) {
-  // 		console.log(e);
-  // 		setUploading(false);
-  // 		alert("Trouble uploading file");
-  // 	}
-  // };
+	// const uploadFile = async () => {
+	// 	try {
+	//    if (!file) {
+	//      alert("No file selected");
+	//      return;
+	//    }
+	// 		setUploading(true);
+	// 		const data = new FormData();
+	// 		data.set("file", file);
+	// 		const uploadRequest = await fetch("/api/files", {
+	// 			method: "POST",
+	// 			body: data,
+	// 		});
+	// 		const signedUrl = await uploadRequest.json();
+	// 		console.log(signedUrl);
+	// 		setUrl(signedUrl);
+	// 		setUploading(false);
+	// 	} catch (e) {
+	// 		console.log(e);
+	// 		setUploading(false);
+	// 		alert("Trouble uploading file");
+	// 	}
+	// };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFile(e.target?.files?.[0]);
-  };
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setFile(e.target?.files?.[0]);
+	};
 
-  return (
-    <main className="w-full min-h-screen m-auto flex flex-col justify-center items-center">
-      <input type="file" id="file" onChange={handleChange} />
-      <button disabled={uploading} onClick={uploadFile}>
-        {uploading ? "Uploading..." : "Upload"}
-      </button>
-      {url && <img src={url} alt="Image from Pinata" />}
-    </main>
-  );
+	return (
+		<main className="w-full min-h-screen m-auto flex flex-col justify-center items-center">
+			<input type="file" id="file" onChange={handleChange} />
+			<button disabled={uploading} onClick={uploadFile}>
+				{uploading ? "Uploading..." : "Upload"}
+			</button>
+			{url && <img src={url} alt="Image from Pinata" />}
+		</main>
+	);
 }