Uploading Files to IPFS from a Web Application

One of the most common interactions with IPFS is uploading files like images and videos from a client-side application, so I found it surprising that there were not a lot of straightforward tutorials showing how this is done.

In this tutorial you will learn just that in as few lines of code (and as simply) as possible using ipfs-http-client. The ideas here are implemented in React but should be fairly easily transferrable to doing the same thing in any other JavaScript framework, like Vue, Angular, or Svelte.

About IPFS

IPFS is a decentralized, peer to peer file sharing protocol.

There are various types of IPFS gateways available. Some are free, some are not. Some offer read-only access, and others offer both read and write access.

You can also run your own IPFS gateway.

Because we will be uploading / saving files, we need to be sure to choose a gateway that allows us write access. The gateway we will be using today is Infura. Other popular services are Pinata or Fleek.

For an example of how to pin a file to IPFS with Pinata, check out this repo.

Getting started

If you already have a React application created, you can skip this step.

First, create a new React app and change into the new directory:

npx create-react-app ipfs-example