Is there a way to upload files directly from frontend to pinata cloud?

[jithujoshyjy]

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.

[stevedylandev]

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