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
cd ipfs-example
Next, install the ipfs-http-client library using either NPM or Yarn:
npm install ipfs-http-client
Base code
The basic functionality can be summed up in only 3 lines of code, but I'll also be building out an entire UI to show how it all fits together.
The basic code for getting this to work is here:
/* import the ipfs-http-client library */
import { create } from 'ipfs-http-client';
/* Create an instance of the client */
const client = create('https://ipfs.infura.io:5001/api/v0')
/* upload the file */
const added = await client.add(file)
/* or a string */
const added = await client.add('hello world')
Full code
Let's now look at how the above code would be used to actually implement file upload functionality in our app for uploading and viewing images.
In your project, open src/App.js and update it with the following code:
/* src/App.js */
import './App.css'
import { useState } from 'react'
import { create } from 'ipfs-http-client'
const client = create('https://ipfs.infura.io:5001/api/v0')
function App() {
const [fileUrl, updateFileUrl] = useState(``)
async function onChange(e) {
const file = e.target.files[0]
try {
const added = await client.add(file)
const url = `https://ipfs.infura.io/ipfs/${added.path}`
updateFileUrl(url)
} catch (error) {
console.log('Error uploading file: ', error)
}
}
return (
<div className="App">
<h1>IPFS Example</h1>
<input
type="file"
onChange={onChange}
/>
{
fileUrl && (
<img src={fileUrl} width="600px" />
)
}
</div>
);
}
export default App
Next, run the app:
npm start
When the app loads, you should see a file upload button.
Once a file has been successfully uploaded, you should see it rendered in the UI.
Discussion (20)
Hi there, great article, I am doing the same thing, but this error pops up, do you have any idea why?
I am using react and not electron, that's weird for me.
node_modules/electron-fetch/lib/index.es.js:1257:21: error: Could not resolve "electron" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
Im getting the same error using vite. Any luck solving this?
My error is Uncaught SyntaxError: The requested module '/node_modules/merge-options/index.js?v=7ace0d54' does not provide an export named 'default'
Can anyone help me ,, I use vite and react , seems
import { create } from 'ipfs-http-client';doesn't work fine in this case ??Hey, I ended up switching to Web3Storage, I also used vite.
web3.storage/
github.com/Lschulzes/photo_blockch...
Just delete 'electron-fetch' from 'node_modules'. I think it should work.
This is fire! I'm glad I've got friends like you. Definitely layering this into my graphql api. What I also find interesting is that you can run your own node locally but it still connects to the ipfs network. 🤯
💙
I use vite and react to develop,, after implementing this method,, I got some errors ->
Uncaught SyntaxError: The requested module '/node_modules/merge-options/index.js?v=7ace0d54' does not provide an export named 'default'Really dont know how to solve this? are there some problems like curly braces in
import { create } from 'ipfs-http-client';???@dabit3 Thx~~
Could someone tell me how to do this for 10000 NFTs? as I need to upload the arts as well as the metadata on ipfs. Also, when the arts are going to be uploaded? The moment the buyers mint the NFTs or before that all the NFTs need to be upload? Thanks
Hi, there was an update on IPFS and your code does not work anymore...
Failed to load resource: the server responded with a status of 401 (Unauthorized)
Can you update your code please
Thanks in advance
Getting error Unhandled Runtime Error
TypeError: debug__default.default is not a function.
Seeing the same issue. Were you able to resolve it?
My error was due to ipfs and it got fixed using command
npm i ethers@5.5.1 ipfs-http-client@50.1.2 @babel /core --save
Hi @dabit3 I am facing issue when running the code. I followed your YouTube tutorial and tried this snippet as well, but seeing below error for both Infura and pinata.
Please help.
Error: Unhandled Runtime Error
TypeError: debug__default.default is not a function.
No worries. I figured it out. It was due to deprecated debug package. I've updated the package in package.json and run npm install --save, it started working.
Doesn't the infura gateway need PROJECT_ID key?
Thx @dabit3
This worked like a Charm! Thanks a Lot 😄
I don't even know where to put the
"In your project, open src/App.js and update it with the following code:"
Good work just wish I knew how to implement it