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.

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.

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

  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.

let node = await Ipfs.create()

The add method of ipfs uploads the image.

  await node.add(fileReader.result)

Finally, below is the function in full.

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/. 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.