June 07, 2021

How to integrate IPFS with Ethereum

Overview

It can be costly to store massive files on a blockchain mainnet, and this is where decentralized file storing systems like IPFS can come in handy. Sometimes, NFTs use IPFS as well. In this guide, we’ll cover how we can integrate IPFS with Ethereum.

What is IPFS?

The web that we use today is mostly centralized; Even the data stored on the cloud is centralized and is controlled by giant cloud providers. Imagine if the servers of Wikipedia were to go down; this can leave us with a significant loss of knowledge. Centralization doesn’t seem to be a good thing, so why do we keep using it? That’s because we want our pages, images, and other content to load fast with very little latency and in high quality. While using a centralized server, content delivery speed can be regulated. Plus, there was no foolproof alternative until IPFS. IPFS (short for InterPlanetary File System) is a file storing and sharing system appropriate for the next generation of the Internet; Web3. IPFS is a versioned file system at its core, which can store files and track versions over time, much like git. IPFS also defines how a file moves over the network, making it a distributed file system. It is very flexible and works with several transport layer protocols like TCP, uTP, UDT, QUIC, TOR, and even Bluetooth.

How does IPFS work?

Whenever someone wants to download a file from the internet, the user has to query the exact address of the file, which is mostly the IP address of a remote server called location-based addressing. But what if the server is down? That person won’t get the file. There can be another user who has already downloaded a copy of that file before, but still, the computer wouldn’t be able to grab that from another user. To fix this problem, IPFS uses content-based addressing instead of location-based addressing. Instead of saying where to find the file, you just say what file is to be found.  Every file uploaded with IPFS is associated with a unique hash, so when someone wants to download the file, they can query the network for the file hash, and someone from the IPFS network will provide it to the user. IPFS has built-in security as the hash of the requested file and supplied/downloaded file can always be verified. Another benefit of using hashes is avoiding duplication. When multiple users try to upload the same file, it will only be accepted once, making the network very efficient. 

IPFS and Ethereum

Blockchains like Ethereum provide us with timestamping data, which makes tampering with that data almost impossible, but to store a file on Ethereum can be very expensive given the amount of processing the Ethereum blockchain has to do, whereas the content-based addresses that IPFS returns are 46 bytes in size which is a tiny amount considering the size of files. So it is cheaper to publish a file on IPFS and store their content-based address on the Ethereum blockchain. In the following example, we’ll publish an image to IPFS, store its hash in a smart contract, and retrieve/view that image using ethers.js and QuickNode.

Publishing a file on IPFS

Our first step here would be to install IPFS and publish our file to IPFS. You can download and install IPFS CLI  based on your Operating system by following the installation guide in IPFS docs, creating a project directory, and changing the directory.

Open your terminal/cmd and Initialize the IPFS repo.

$ ipfs init

Now, open another window for your terminal/cmd and start the IPFS daemon. This will act as your local IPFS node.

$ ipfs daemon

Move your desired image into the project directory(image.jpg here) and go back to the previous terminal/cmd window, and publish the image to IPFS using:

$ ipfs add image.jpg

On success upload, it must give an output similar to this.



Save the generated hash, as we’ll need it to retrieve the image in the later steps.

Image.jpg


Getting test ETH

Now that we’ve published our file on IPFS, let’s store its hash on Ethereum using a smart contract.

We’ll deploy our contract on the Ropsten testnet. To get started, you will need the Metamask browser extension to create an ETH wallet and some test ETH, which you can get by going to the Ropsten faucet. You'll need to select Ropsten Test Network on your Metamask wallet and copy-paste the wallet address into the text field in the faucet, then click Send me test Ether.



Deploying our contract

Head over to the Ethereum Remix IDE and make a new Solidity file, for example - ipfs.sol
 
Paste the following code into your new Solidity script:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.3;
contract IPFS {
    string ipfsHash;
    
    function sendHash(string memory x) public {
        ipfsHash = x;
    }
    
    function getHash() public view returns (string memory) {
        return ipfsHash;
    }
}

Explanation of the code above: 
 
Line 1: Specifying SPDX license type, which is an addition after Solidity ^0.6.8. Whenever the source code of a smart contract is made available to the public, these licenses can help resolve/avoid copyright issues. If you do not wish to specify any license type, you can use a special value UNLICENSED or simply skip the whole comment (it won’t result in an error, just a warning).
 
Line 2: Declaring the solidity version.
 
Line 3: Starting our contract named IPFS.
 
Line 4: Declaring a var ipfsHash of type string to store our file’s hash.
 
Line 6-8: Declaring a function sendHash() of type public means it can be accessed from outside of this function by other contracts and programs. It takes a string x as input and stores the value of x to the ipfsHash variable.
 
Line 10-12: DEclaring a function getHash() also to type public and mutability view, which means it can only view, not modify the Ethereum blockchain’s state and returns the hash stored in the variable ipfsHash.
 
Compile the smart contract and deploy it using injected Web3 (make sure to select Ropsten testnet on Metamask before compiling the contract). Approve the transaction from metamask.

 
Locate your contract under the “Deployed Contracts” section in Remix, expand the deployed contract, and paste the hash (which we obtained in the above section after publishing our file to IPFS) in the input field near the sendHash button and click on sendHash; approve the transaction from Metamask.
 
 
Once the transaction is completed, our hash will be stored in the deployed contract. To verify, click on getHash, and it must output the hash of the file.
 
 
 
Copy and save the contract’s ABI from the compile tab and The contract’s address from the copy button under the deployed contract section. We'll need it later.
 
Learn more about ABI and how it’s generated in this guide on ABI.

 
 
Now, let’s see how we can retrieve the hash from the Ethereum blockchain and view the image using the hash.

Booting our Ethereum node

To query the Ethereum blockchain, we will need access to an Ethereum node for that we could use pretty much any Ethereum client, such as Geth or OpenEthereum (fka Parity). Since that is a bit too involved to fetch a single hash from a contract, we'll just grab a free endpoint from QuickNode to make this easy. We’ll need a Ropsten endpoint to get data from the chain as we’ve deployed our contract on the Ropsten testnet. After you've created your free ethereum endpoint, copy your HTTP Provider endpoint:

 
 

You'll need this later, so copy it and save it.

Installing dependencies

We’ll use ethers.js to write a short script to interact with our deployed smart contract and access our image using IPFS gateway and hash. Then we’ll use a package called browserify to use our node.js script in the browser.

We’ll install ethers and browserify using npm (Node Package Manager), which comes with node.js; learn more about ethers.js in the guide on How to connect to Ethereum network with ethers.js. Open your terminal/cmd and run the following command.

$ npm i ethers

Now to install browserify and one of its dependency.

$ npm i browserify

$ npm i uniq

The most common issue at this step is an internal failure with `node-gyp`. You can follow node-gyp installation instructions here.

Note: You will need to have your python version match one of the compatible versions listed in the instructions above if you encounter the node-gyp issue. 

Another common issue is a stale cache; clear your npm cache by simply typing the below into your terminal:

$ npm cache clean

If everything goes right, ethers and browserify will be installed.

Viewing the file stored on IPFS

Step 1: ipfs.js and bundle.js

Create a js file in your project directory called ipfs.js and copy-paste the following in it:

var ethers = require('ethers');
var url = 'ADD_YOUR_ETHEREUM_NODE_URL';
var provider = new ethers.providers.JsonRpcProvider(url);
var address  = 'CONTRACT_ADDRESS_FROM_REMIX';
var abi = [
	{
		"inputs": [
			{
				"internalType": "string",
				"name": "x",
				"type": "string"
			}
		],
		"name": "sendHash",
		"outputs": [],
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "getHash",
		"outputs": [
			{
				"internalType": "string",
				"name": "",
				"type": "string"
			}
		],
		"stateMutability": "view",
		"type": "function"
	}
];
var contract = new ethers.Contract(address,abi,provider);

contract.getHash().then((result) =>{
  document.getElementById("btn").onclick = function () {
		location.href = "https://ipfs.io/ipfs/"+result;
  	};
});

Go ahead and replace `ADD_YOUR_ETHEREUM_NODE_URL` with the ropsten HTTP provider and `CONTRACT_ADDRESS_FROM_REMIX` with the address of the deployed contract from the above section.

Explanation of the code above:

Line 1: Importing the ethers library.

Line 2: Storing our Quicknode’s URL in the url variable.

Line 3: Instantiating new ethers.providers.JsonRpcProvider instance and storing it in provider.

Line 4: Storing the contract address in the address variable.

Line 5-32: Storing the ABI we got from the previous step in the abi variable.

Line 33:Initializing a contract instance in ethers and connecting to our deployed contract using the address,abi, and provider.

Line 35: Calling the getHash method of our contract, which returns the hash of the image stored in the contract.

Line 36-38: Creating onclick event listener on the ‘btn’ div of our HTML page, which we will create after this and adding our ipfs gateway with the hash as the hyperlink, so when the div is clicked, it will redirect to the image.

Now, save the file and use the browserify package to use the script above on our HTML page.

$ browserify ipfs.js -o bundle.js

Step 2: index.html

Following is a very basic index.html file that will help to view our image in the browser.

html
<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>IPFS with Ethereum</title>
    <style>
      #btn {
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -100px 0 0 -150px;
          font-size: 400%;
          font-family: serif;
          text-decoration: underline;
          text-decoration-style: double;
          color: #65b7ff;
          cursor: pointer;
      }

      body{
          background-color: #ffedf3;
      }
    </style>
  </head>

  <body>
    <div id="btn">View Nyan</div>
    
    <script src="bundle.js"></script>
  </body>
</html>

Explanation of the code above.

Line 1-7: Necessary basic HTML tags.

Line 8: Giving a title to our HTML page.

Line 9-26: Some CSS to make the webpage look a bit presentable.

Line 30: Creating a Div with id btn and adding View Nyan text to it.

Line 32: Adding our bundle.js file from the previous step to our HTML page.

Now, open the index.html file in your web browser, and If you used the above CSS. It must look something like this:


Click on View Nyan, and it will take you to the original Image which we published on IPFS.



Conclusion

So now that you know how to integrate IPFS and Ethereum, you can do cool projects like document versioning, verification systems, and more.

Subscribe to our newsletter for more articles and guides on Ethereum. If you have any feedback, feel free to reach out to us via Twitter. You can always chat with us on our Discord community server, featuring some of the coolest developers you’ll ever meet :)
Ready to try QuickNode? Start your 7-day free trial

Related articles 27

Jul 3, 2021 The Web3 Developer Stack

A developer stack is a bag of technologies a developer possesses. For example, MEAN (MongoDB, Express.js, AngularJS/Angular, and Node.js) and MERN (MongoDB, Express.js, React, and Node.js) are common web developer stacks. Similarly, today we will learn more about the web3...

Continue reading
Jun 8, 2021 How to generate a new Ethereum address in PHP

PHP is very popular in developing the backend of websites or web applications. PHP has a huge crowd of developers trusting it as their go-to language. In this guide, we will see how we can generate a new Ethereum address in...

Continue reading
Jun 8, 2021 Estimating gas price using pending transactions in Python

To send a transaction on the Ethereum network, you need to pay fees for including the transaction in a block as well as the computation necessary in the transaction; this fee is called gas. The transactions are accepted into the block based on the amount of gas they are...

Continue reading
Jun 8, 2021 How to connect to Ethereum network with ethers.js

When someone thinks of developing a dApp the first tool that comes to their mind is web3.js which is pretty common because of its popularity in the community and wide use cases, dApp development has been consistently growing and there are a lot of developers who want to...

Continue reading
Jun 8, 2021 How to connect to the Ethereum network using Ruby

Ruby has a huge fanbase. Ruby was developed by its creator with an intention to create a language people can have fun using. Ruby has been largely accepted by the developers all around the world since it’s launch, in fact, the biggest tech communities in many cities are...

Continue reading
Jun 8, 2021 How to re-send a transaction with higher gas price using ethers.js

Sometimes, you submit a transaction on Ethereum without enough gas due to network congestion or too many pending transactions offering a higher gas price than you have offered on your transaction. If you have a high priority transaction but low gas, you could end up...

Continue reading
Jun 17, 2021 How to get the balance of an ERC-20 token

When a new token is made on the Ethereum network, it usually follows a specification. The most popular of which is the ERC20 specification. To meet this ERC20 standard, one's token must have a multitude of...

Continue reading
Jun 8, 2021 How to connect to Ethereum network with Web3.js

Libraries and frameworks make the development process a lot easier and faster. When it comes to Ethereum development, Web3.js is the go to library. That's because Web3.js is the official library, from the

Continue reading
Jun 8, 2021 How to generate a new Ethereum address in Ruby

With high usage in web applications and straightforward syntax, Ruby is used by a vast number of people. This guide will cover creating an Ethereum address in Ruby using ruby-eth...

Continue reading
Jun 8, 2021 How to Fork Ethereum Blockchain with Ganache.

Forking and running a local simulated Ethereum environment is essential if you want to work with DeFi or do Ethereum development in general. In this guide, we’ll cover how to fork Ethereum Blockchain with

Continue reading
Jun 8, 2021 How to fetch Ethereum event logs in Ruby

Ethereum log records are very useful to understand and keep track of smart contract events. In this guide, we are going to learn how to fetch ethereum event logs in Ruby using ethereum.rb ruby...

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in Go

Golang is very popular among backend developers for building infrastructures and microservices. Go is a procedural programming language. Developed in 2007 by Robert Griesemer, Rob Pike, and Ken Thompson at Google, then launched in 2009 as...

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in Python

Python is one of the most versatile programming languages out there with an abundance of use cases; We can build many applications with Python from client-side to back end. In this guide, we will cover creating an Ethereum address in Python using the

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in JavaScript

When it comes to programming, there’s hardly anyone who has not used or heard about JavaScript. JavaScript was initially created for client-side scripting but has become a full-featured Object-Oriented...

Continue reading
Jun 9, 2021 How to connect to Ethereum network using Go

Go helps you make faster scalable backends and this guide will show you how to connect your backend to Ethereum (and make it even faster, more reliable, and globally accessible, all thanks to QuickNode’s global infrastructure). What is...

Continue reading
Jun 9, 2021 How to connect to Ethereum network using Java / Web3j

We can say that Java is one of the most versatile languages out there, and it continues to be relevant in today's time. Java is so popular because of its massive user base and use cases. In this guide/tutorial, we'll learn how to connect to the Ethereum Blockchain network...

Continue reading
Jul 25, 2021 How to Create an Address in Solana using JavaScript

Hello reader! Welcome to QuickNode's first Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. You will walk through step-by-step how to create a Solana address using the @solana/web3.js...

Continue reading
Jun 9, 2021 How to connect to Ethereum using .NET (Nethereum)

Dotnet or .NET is very popular for the development of desktop applications, most Windows desktop applications are built using .NET, and it also contributes largely to web application’s tech stack. In this guide, let’s see how we can connect to Ethereum using .NET and

Continue reading
Jun 15, 2021 How to connect to Ethereum using PHP

PHP is a very popular choice among developers and has a vast community due to its long presence in web development. In this guide, we’ll cover how to connect to Ethereum with PHP using the web3.php...

Continue reading
Jul 15, 2021 How to Setup Local Development Environment for Solidity

The success story of blockchain started with Bitcoin and was given wings by Ethereum. Ethereum was the first blockchain to introduce programmable software to the immutable ledger; these programs that live on the blockchain are called smart contracts. Solidity is the...

Continue reading
Jun 9, 2021 How to use Subspace with QuickNode

In this guide, we'll understand a bit about reactive development and how to use Subspace with QuickNode.JavaScript is the programming language behind most of the internet apps and websites. JavaScript today has become one of the most used programming languages,...

Continue reading
Jun 9, 2021 How to connect to the Ethereum network using Python using Web3.py

You can build Ethereum applications in different programming languages. In this article, we will connect to the Ethereum network using Python.PrerequisiteEthereum Node (We will use QuickNode’s free...

Continue reading
Jul 24, 2021 How to deploy a smart contract with Brownie

Python is one of the most versatile programming languages; from researchers running their test models to developers using it in heavy production environments, it has use cases in every possible technical field. In today's guide, we will learn about Brownie, a Python-based...

Continue reading
Jul 13, 2021 How To Fork Ethereum Mainnet with Hardhat

Forking the chain at an older block of the blockchain is helpful if you want to simulate the blockchain’s state at that block; Hardhat has this functionality built in. In this guide, let’s go through the process of forking the Ethereum Mainnet at an older...

Continue reading
Jun 26, 2021 How to create and deploy a smart contract with Hardhat

Ethereum development environments like Truffle and Hardhat make it easier to work with smart contracts and Ethereum nodes. They provide a set of tools to seamlessly write, test, and deploy...

Continue reading
Jul 2, 2021 How to do a non-custodial transaction with QuickNode

Private keys are one of the most sensitive pieces of data when it comes to cryptography, cryptocurrencies, and blockchain. However, there has always been debate/confusion about choosing between custodial wallets (where the wallet provider has custody of the user’s private...

Continue reading
Jul 2, 2021 How to generate a new Bitcoin address in JavaScript

To do any type of transaction on the Bitcoin blockchain, you’ll need a public key or a Bitcoin address. In this guide, we’ll cover how to generate a new Bitcoin address in JavaScript using CyrptoCoinJS.

Continue reading