From 151855fc22f8dc32e1066e3906d15b53811e2c0a Mon Sep 17 00:00:00 2001
From: Steve <stevedsimkins@gmail.com>
Date: Wed, 11 Sep 2024 09:58:55 -0400
Subject: [PATCH] updated next example

---
 examples/next-starter/app/api/files/route.ts | 21 ++++++
 examples/next-starter/app/page.tsx           | 76 ++++++++++----------
 package-lock.json                            |  8 +--
 3 files changed, 63 insertions(+), 42 deletions(-)
 create mode 100644 examples/next-starter/app/api/files/route.ts

diff --git a/examples/next-starter/app/api/files/route.ts b/examples/next-starter/app/api/files/route.ts
new file mode 100644
index 0000000..4cea9c6
--- /dev/null
+++ b/examples/next-starter/app/api/files/route.ts
@@ -0,0 +1,21 @@
+import { NextResponse, NextRequest } from "next/server";
+import { pinata } from "@/utils/config";
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
+
+export async function POST(request: NextRequest) {
+  try {
+    const data = await request.formData();
+    const file: File | null = data.get("file") as unknown as File;
+    const uploadData = await pinata.upload.file(file);
+    const url = await pinata.gateways.convert(uploadData.IpfsHash);
+    return NextResponse.json(url, { status: 200 });
+  } catch (e) {
+    console.log(e);
+    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/examples/next-starter/app/page.tsx b/examples/next-starter/app/page.tsx
index 4b85fa1..1c7a1b9 100644
--- a/examples/next-starter/app/page.tsx
+++ b/examples/next-starter/app/page.tsx
@@ -1,46 +1,46 @@
 "use client";
 
-import { useState, useRef } from "react";
-import { pinata } from "@/utils/config";
+import { useState } from "react";
 
 export default function Home() {
-	const [file, setFile]: any = useState();
-	const [cid, setCid] = useState("");
-	const [uploading, setUploading] = useState(false);
+  const [file, setFile] = useState<File>();
+  const [url, setUrl] = useState("");
+  const [uploading, setUploading] = useState(false);
 
-	const inputFile = useRef(null);
+  const uploadFile = async () => {
+    try {
+      setUploading(true);
+      if (!file) {
+        alert("No file selected");
+        return;
+      }
+      const data = new FormData();
+      data.set("file", file);
+      const uploadRequest = await fetch("/api/files", {
+        method: "POST",
+        body: data,
+      });
+      const url = await uploadRequest.json();
+      setUrl(url);
+      setUploading(false);
+    } catch (e) {
+      console.log(e);
+      setUploading(false);
+      alert("Trouble uploading file");
+    }
+  };
 
-	const uploadFile = async () => {
-		try {
-			setUploading(true);
-			const keyRequest = await fetch("/api/key");
-			const keyData = await keyRequest.json();
-			const upload = await pinata.upload.file(file).key(keyData.JWT);
-			setCid(upload.IpfsHash);
-			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) => {
-		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" ref={inputFile} onChange={handleChange} />
-			<button disabled={uploading} onClick={uploadFile}>
-				{uploading ? "Uploading..." : "Upload"}
-			</button>
-			{cid && (
-				<img
-					src={`https://${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${cid}`}
-					alt="Image from IPFS"
-				/>
-			)}
-		</main>
-	);
+  return (
+    <main className="w-full min-h-screen m-auto flex flex-col justify-center items-center">
+      <input type="file" onChange={handleChange} />
+      <button disabled={uploading} onClick={uploadFile}>
+        {uploading ? "Uploading..." : "Upload"}
+      </button>
+      {url && <img src={url} alt="Image from Pinata" />}
+    </main>
+  );
 }
diff --git a/package-lock.json b/package-lock.json
index f98d238..4c83cf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
-	"name": "pinata",
-	"version": "0.4.0",
+	"name": "pinata-web3",
+	"version": "0.4.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "pinata",
-			"version": "0.4.0",
+			"name": "pinata-web3",
+			"version": "0.4.1",
 			"license": "MIT",
 			"dependencies": {
 				"is-ipfs": "^8.0.4",