# How I Implemented IPFS to Save Images

I had to use IPFS to save image files on a project I worked on. It was a blockchain project with the smart contract written in solidity. The front end is in vanilla JavaScript, HTML, and CSS. This article shows how I was able to use IPFS from the frontend to save the image and also how I was able to view the image from the browser. The codebase I will be referencing can be found [here](https://gist.github.com/prince-curie/d72baad9b0cc0d2bc8d5f25f532a75a8).  

### Importing The IPFS Class
In order to interact with IPFS, we need to import it. Since the front end is in vanilla JavaScript we use the `ipfs` package hosted on a Content Delivery Network(CDN). We import the `ipfs` package globally into the project as a javascript script using the link `<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script>`. The link is placed in the HTML file.

### Uploading Image with IPFS
After importing the script we need to upload the image. To do this we:
1. Create an interface to ensure an image is picked.
2. Have event listeners listen for when a file is selected
3. Upload the image to IPFS

#### Create an interface to ensure an image is picked
To ensure a file is picked, a form is created with a input field for file, in the `index.html` file. 
```html
<form>
    <input type="file" accept="image/*" name="image" id="file">
</form>
```

#### Create event listeners 
We need to listen for when an image has been selected for upload. The event listener listens for the 'change' event on the `id` file. The listener is located in the `app.js` file. 
```javascript
  document.querySelector('#file').addEventListener('change', upload)
```
When the event is fired, the `upload` method is called to handle it.

#### Upload the image
To upload the image, we ensure that the image is read by the javascript file and converted to an ArrayBuffer.

To read the image and convert it to ArrayBuffer we use the javascript `FileReader` Object. On the `FileReader` object we listen for the `load` event to ensure that the image has been successfully loaded.

The `load` event handler, takes the resulting ArrayBuffer which is saved on the result property of the `FileReader` object and sends it as a parameter to the add method of Ipfs.

To get IPFS ready for use we need to call the `create` method on `Ipfs` and assign it to a  variable. We will call the variable `node`.

```javascript
let node = await Ipfs.create()
```  

The `add` method of ipfs uploads the image.
```javascript
  await node.add(fileReader.result)
```
Finally, below is the function in full.
```javascript
async function upload() {
    const fileReader = new FileReader()
    // Read file as ArrayBuffer
    await fileReader.readAsArrayBuffer(event.target.files[0])
    //  Listen for the onload event
    fileReader.onload = async (event) => {            
        const node = await Ipfs.create()
        // upload the file content
        let { path } = await node.add(fileReader.result)
        
        console.log(path)
    }
}
```

### Viewing Image on IPFS
To fetch the image from IPFS, we need to attach the logged value to this URL: [https://ipfs.io/ipfs/](https://ipfs.io/ipfs/). Running it on a web browser will return the image saved. 

### Conclusion
This article explains how I used IPFS to save images. I hope it passes the needed information to help you go through with such a task.