Set up Pinata Cloud Storage Interaction Successfully (#98)

apps/web/.env.example

@@ -5,4 +5,7 @@ NODE_ENV="development"
 NEXT_PUBLIC_STARKNETKIT_PROJECT_ID=abc123
 NEXTAUTH_SECRET=secret
 NEXT_PUBLIC_BASE_URL=/
-NEXT_PUBLIC_SIGNER_ADDRESS=0x123
+NEXT_PUBLIC_SIGNER_ADDRESS=0x123
+
+PINATA_JWT=
+NEXT_PUBLIC_GATEWAY_URL=

apps/web/package.json

@@ -37,6 +37,7 @@
 		"i18next": "^23.15.1",
 		"next": "^14.2.4",
 		"next-auth": "^4.24.7",
+		"pinata-web3": "^0.5.3",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-i18next": "^15.0.2",

apps/web/src/app/api/files/route.ts

@@ -0,0 +1,18 @@
+import { NextResponse, type NextRequest } from "next/server";
+import { pinata } from '../../../utils/pinata'
+
+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 }
+    );
+  }
+}

apps/web/src/utils/pinata.ts

@@ -0,0 +1,15 @@
+"server only"
+
+import { PinataSDK } from 'pinata-web3'
+
+export const pinata = new PinataSDK({
+    pinataJwt: `${process.env.PINATA_JWT}`,
+    pinataGateway: `${process.env.NEXT_PUBLIC_GATEWAY_URL}`
+})
+
+// To get the client side form implementation of file uploads to pinata:
+// Visit the url: https://docs.pinata.cloud/frameworks/next-js-ipfs#create-client-side-form
+
+// If file size limitation is crossed consistently and there is need to upload more than the limit
+// then this implementation can be changed to follow the guide:
+// https://www.pinata.cloud/blog/how-to-upload-to-ipfs-from-the-frontend-with-signed-jwts/