Get started using Pinata with Astro
cd
into the repo and install pinata
.
vercel
and svelte
for this tutorial, and you can install them like so.
astro.config.mjs
for us.
src
folder make a new folder called utils
, and inside there make a file called pinata.ts
with the following contents:
.env
with the following values:
src
folder make another folder called components
, then inside there make file called UploadForm.svelte
.
<form>
with a file <input>
as well as a <button>
to send it. The form will trigger the submit
function, which takes our form data and makes an API request to our server side code. Once complete the API will send response with a url
that we can use in the <img>
tag to display it on the page.
src/pages
folder make a new folder called api
and inside there make a file called upload.ts
. Paste the following code inside it:
formData
and get the file
we attached. If there isn’t a file attached we’ll send a error response. Otherwise we’ll upload the file using the SDK method pinata.upload.public.file
and deconstruct the response to get the cid
. With that cid
we can use the convert
method to create a URL, which we can then send back to the client.
src/pages/index.astro
file with our new component!