How to add images to IPFS with NodeJS and IPFS-core

#ipfs #nodejs #web3 #javascript

What is IPFS?

IPFS stands for InterPlanetary File System, is a p2p protocol for storing and sharing data in a distributed file system.

IPFS don't rely on a server so it makes it decentralized. so it is easy to deploy and use. which is a good thing for web3 as it is a decentralized protocol.

IPFS is not jut for blockchain developers, its also for web developers, content creators, etc.

There are some terms that are used in IPFS:

• node -> think of it as a server, every node is a server and every user is running a node.

• pin -> you need to pin the files to guarantee the content access is always available to the user, there are pinning services like Pinata or Infura, if you don't pin your files, they will be deleted after a certain time.

• CID (Content ID) -> is a unique identifier for a file, think of it as a hash/fingerprint of the file.

I encourage you to read the IPFS documentation to learn more about IPFS.

You can clone the repo if you want.

Prerequisites

• Node.js installed

• Basic understanding of IPFS

• Install IPFS CLI

Creating Our Project

1. open your terminal and type the following

2. mkdir node-ipfs-tutorial

3. cd node-ipfs-tutorial

4. npm init --y

5. code .

Dependencies

• ipfs-core

To install dependencies go to your project folder open a terminal and type the following.https://nodejs.org/en/download/

npm i ipfs-core

Now go to your package.json and add this, we will be using import so we will add "type" : "module"

"type" : "module",
"scripts": {
  "start": "node ./src index.js"
},

Project File Structure

node-ipfs-tutorial/
├── node_modules/
├── src/
│ └── index.js
└── package.json

Table of Contents

1. Hello World

2. Adding Images

3. Retrieving Data

4. Conclusion

1. Hello World

Let's start with the example from the ipfs-core documentation.

import * as IPFS from 'ipfs-core'

const ipfs = await IPFS.create()
const { cid } = await ipfs.add('Hello world')
console.log(cid)

Now type npm start in your terminal and you will see something like this.

Open your browser and type https://ipfs.io/ipfs/<cid> and you will see the content of the file.

2. Adding Images

Now we're going to add some images, for this example I will use free images from unsplash.

So will create a folder named images and put the images in it, I added 3 images.

So I will import fs because will work with files and another directory, then will specify in a const where is the images folder and read it.

After that will use a for loop read each file inside the images folder and add it to the IPFS.

This time I am using result to show all the properties of the added file

import * as IPFS from 'ipfs-core'
import fs from 'fs'

const imagesDir = './src/images'

const files = fs.readdirSync(imagesDir)

const ipfs = await IPFS.create()

for(let file of files) {
  const buffer = fs.readFileSync(`${imagesDir}/${file}`)
  const result = await ipfs.add(buffer)
  console.log(result)
}

You will see something similar to this.

3. Retrieving Data

To simplify the tedious task of copying the cid and pasting it into the browser, and add https://ipfs.io/ipfs/.

Let's create a const gateway with https://ipfs.io/ipfs/, and then after get the result console.log(gateway+result.path) like this.

import * as IPFS from 'ipfs-core'
import fs from 'fs'

const imagesDir = './src/images'

const files = fs.readdirSync(imagesDir)
const gateway = 'https://ipfs.io/ipfs/'
const ipfs = await IPFS.create()


for(let file of files) {
  const buffer = fs.readFileSync(`${imagesDir}/${file}`)
  const result = await ipfs.add(buffer)
  console.log(result)
  console.log(gateway+result.path)
}

Now to visit the images you can open your browser and type https://ipfs.io/ipfs/<cid> or just ctrl + click the link and you will see the content of the file.

Don't worry if you get this error.

You can use alternative ways to retrieve the data such another gateway like https://gateway.pinata.cloud/ipfs/.

4. Conclusion

We learned how to make add content to IPFS with node.js using ipfs-core. For my next post I plan to make an example using the Pinata API.

I really hope you have been able to follow the post without any trouble, otherwise I apologize, please leave me your doubts or comments.