npm create
cd
into the repo and install pinata
tailwindcss
with typography plugin. Follow other CSS Framework guides respectively.
.env.local
file in the root of the project and put in the following variables:
JWT
from the API key creation in the previous step as well as the Gateway Domain
. The format of the Gateway domain should be mydomain.mypinata.cloud
.
server
in the src/lib
folder of the project and then make a file called pinata.ts
inside of it. In that file we’ll export an instance of the Files SDK that we can use throughout the rest of the app.
server
directory prevents it being used client side.src/routes/+page.svelte
file take out the boiler plate code and use the following.
Lets also restrict the allowed extensions for the file. (e.g. jpg, jpeg, png, webp).
src/routes/+page.server.ts
, so that we can add a form action to use.
Since this demo and page only has 1 form, we will keep the default
action.
form
prop on our +page.svelte
. Now, after submitting the form,
the form
prop will be updated and we can conditionally render the image we just uploaded.