Is there a way to upload files directly from frontend to pinata cloud? #39
-
I want to avoid sending files to my backend and then to pinate, seems like a waste of bandwith. Can someone let me know how to upload files from the frontend directly to pinata? Supabase storage api has this feature, (AWS probably too🤷♂️); I'm looking for something similar from pinata.
Beta Was this translation helpful? Give feedback.
All reactions
Hey there! Yes absolutely! If you take a look at the Next.js quickstart or our uploading files doc we show how you can upload from the client side in a secure fashion. The TL;DR is you can issue a temporary JWT using the keys method on your SDK from your server and send it back to the client for uploading. For example you might have a server endpoint like this:
import { type NextRequest, NextResponse } from "next/server"; import { pinata } from "@/utils/config"; // Import the Pinata SDK instance export const dynamic = "force-dynamic"; export async function GET() { // Handle your auth here to protect the endpoint try { const uuid = crypto.randomUUID(); const keyData = await p...
Replies: 1 comment
-
Hey there! Yes absolutely! If you take a look at the Next.js quickstart or our uploading files doc we show how you can upload from the client side in a secure fashion. The TL;DR is you can issue a temporary JWT using the keys method on your SDK from your server and send it back to the client for uploading. For example you might have a server endpoint like this:
import { type NextRequest, NextResponse } from "next/server"; import { pinata } from "@/utils/config"; // Import the Pinata SDK instance export const dynamic = "force-dynamic"; export async function GET() { // Handle your auth here to protect the endpoint try { const uuid = crypto.randomUUID(); const keyData = await pinata.keys.create({ keyName: uuid.toString(), permissions: { endpoints: { pinning: { pinFileToIPFS: true, // Creates a key that can only upload a file }, }, }, maxUses: 1, }) return NextResponse.json(keyData, { status: 200 }); // Returns the key data } catch (error) { console.log(error); return NextResponse.json({ text: "Error creating API Key:" }, { status: 500 }); } }
And the client side code would look like this
const keyRequest = await fetch("/api/key"); // Fetches the temporary API key const keyData = await keyRequest.json(); // Parse response const upload = await pinata.upload.file(file).key(keyData.JWT); // Upload the file with temp key
Note
Currently the Files API shares some of the IPFS API endpoint scopes but soon they will be updated with the actual Files API endpoint scopes. i.e. For uploads you can just use pinFileToIPFS
Beta Was this translation helpful? Give feedback.