updated next example

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 });
+  }
+}

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>
+  );
 }