How to add images to IPFS with node.js and ipfs-core
Tags: node, tutorial, web3, javascript
Published: 2022-07-19 17:15:00

## 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](https://docs.ipfs.io/concepts/what-is-ipfs/#decentralization) to learn more about IPFS.

[You can contact me by telegram if you need to hire a Full Stack developer or if you need a discord bot for your server](https://t.me/rtagliajs).

You can also contact me by **discord Appu#9136**.

[You can clone the repo if you want.](https://github.com/rtagliaviaz/node-ipfs-tutorial)


## Prerequisites

- [Node.js](https://nodejs.org/en/download/) installed
- Basic understanding of [IPFS](https://docs.ipfs.io/concepts/what-is-ipfs/#decentralization)
- Install [IPFS CLI](https://docs.ipfs.io/install/command-line/#official-distributions)


## 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](https://www.npmjs.com/package/ipfs-core)

To install dependencies go to your project folder open a terminal and type the following.

```console
npm i ipfs-core
```

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

```json
"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](#hello-world)
2. [Adding Images](#Adding-Images)
3. [Retrieving Data](#Retrieving-Data)
4. [Conclusion](#conclusion)

---


## 1. Hello World <a name="hello-world"></a>

Let's start with the example from the ipfs-core [documentation](https://www.npmjs.com/package/ipfs-core).

```js
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.

![console message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7ab7t6eqhcd343my77x.png)


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

![Hello world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9c4we2a3tkz73ximo0g.png)


## 2. Adding Images <a name="Adding-Images"></a>

Now we're going to add some images, for this example I will use free images from [unsplash](https://unsplash.com/).

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

![Images folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cje1i4i61b0klxldihzi.png)

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
 

```js
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.

![console result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mf9lderkisuchomg40sx.png)


## 3. Retrieving Data <a name="Retrieving-Data"></a>

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.

```js
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. 

![error 504 gateway time-out](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rnfrn1l3einodp3d59d.png)

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

![picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8anw7yyjbcc7qa06u8v.png)



## 4. Conclusion <a name="conclusion"></a>

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.

[You can contact me by telegram if you need to hire a Full Stack developer.](https://t.me/rtagliajs)

[You can also contact me by discord.](Appu#9136)

[You can clone the repo if you want.](https://github.com/rtagliaviaz/node-ipfs-tutorial)

Thank you for your time.