how do I get the Files/Images in my Next.js project?

[Boby900]

I am able to upload the images/files with the upload button, but I am finding it hard to get those images back and display them using the </img> element.
how do I do that with this data which I am getting from the Pinata.

 {
      id: '01925bf9-a199-7ca1-a77c-6f015bc054b5',
      name: 'Screenshot (569).png',
      cid: 'bafkreihtr7sk3ai4u6q6coaap2feckejs4auwjravb4gwzejhqmrqqzx4m',
      size: 83457,
      number_of_files: 1,
      mime_type: 'image/png',
      group_id: null,
      keyvalues: {},
      created_at: '2024-10-05T09:19:02.125793Z'
    },

TIA

[stevedylandev]

Great question! If you're using the Files API all files are by default private, so in order to access them you need to create a signed URL. You can do this using the cid from the file upload like so:

import { PinataSDK } from "pinata";

const pinata = new PinataSDK({
  pinataJwt: process.env.PINATA_JWT!,
  pinataGateway: "example-gateway.mypinata.cloud",
});

const url = await pinata.gateways.createSignedURL({
	cid: "bafkreib4pqtikzdjlj4zigobmd63lig7u6oxlug24snlr6atjlmlza45dq",
	expires: 30, // Number of seconds link is valid for
});

Alternatively, if you want the file to be publicly accessible, you can do the following:

1. Create a public Group

import { PinataSDK } from "pinata";

const pinata = new PinataSDK({
  pinataJwt: process.env.PINATA_JWT!,
  pinataGateway: "example-gateway.mypinata.cloud",
});

const group = await pinata.groups.create({
	name: "My New Group",
	isPublic: true
});

2. Upload the file to that group

const upload = await pinata.upload
  .file(file)
  .group(group.id)

3. Access the file without a signed URL

https://example.mypinata.cloud/files/:cid

If you follow the Next.js guide it goes over a flow for uploading and creating a signed url in one step which you can check out here!

[Boby900]

thanks @stevedylandev it's working,
I also used this blog for the refrence