Get started using Pinata with Remix
cd
into the project and install the pinata
SDK.
.env
file in the root of the project with the following variables:
utils
, and inside make a file called pinata.ts
with the following code:
app/routes
directory we can remove the boilerplate code and replace it with the code below.
Form
element provided by Remix which lets us make a submission to a server action. The most important piece to notice here is the encType="multipart/form-data"
, which is crucial to make file / multipart requests work in Remix!
Then we have our server action:
formData
, get the file
attached, and then we upload it to Pinata using pinata.upload.public.file()
. From that method we deconstruct the result and return the cid
which we can use in convert
. This will make a URL we can return to the client and make accessible to the user, and in our case the <a>
tag that links to the content.