Navigate back to the homepage

how to upload base64 image to ipfs?

Infinitbility
JavaScript
July 26th, 2022 · 1 min read
how to upload base64 image to ipfs?

To upload a base64 image to ipfs, convert the base64 image to a blob using the fetch() method and then you can able to upload the base64 image to IPFS.

Take the sort of example of uploading a base64 image to IPFS.

1const response = await fetch(base64Image);
2const blob = await response.blob();
3const file = new File([blob], "file.png", { type: "image/png" });
4const imghash = await ipfs.add(file);

Today, I’m going to show you How do I upload base64 images to ipfs, as above mentioned here, I’m going to use the fetch() method to make files uploadable and ipfs-http-client package to upload file in IPFS.

Let’s start today’s tutorial how do you upload base64 images to ipfs?

In this example, we will do

  1. Install the ipfs-http-client package
  2. Take the example of base64 image and upload it to IPFS
  3. Show the uploaded image on the screen
1import React, { useState, useEffect } from "react";
2import { create } from "ipfs-http-client";
3
4const ifpsConfig = {
5 host: "ipfs.infura.io",
6 port: 5001,
7 protocol: "https"
8};
9
10const ipfs = create(ifpsConfig);
11
12const base64Image =
13 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=";
14
15export default function App() {
16 const [hash, setHash] = useState(
17 "QmR4uT3fuqzbrNyAobMFmANtaSkz1MY5V36JikKUJ78ytf"
18 );
19
20 const uploadBase64Image = async () => {
21 const response = await fetch(base64Image);
22 const blob = await response.blob();
23 const file = new File([blob], "file.png", { type: "image/png" });
24 const imghash = await ipfs.add(file);
25 console.log(imghash);
26 setHash(imghash.path);
27 };
28
29 return (
30 <div className="App">
31 <button onClick={() => uploadBase64Image()}>Upload</button>
32 <img src={`https://ipfs.infura.io/ipfs/${hash}`} />
33 </div>
34 );
35}

In the above example, we uploaded the base64 image to IPFS and retrieved it after uploading done and showing it on the screen.

I hope it helps you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

how to get browser name in react js?

how to get browser name in react js?

An example of get browser name in react js with step by step guide.

July 25th, 2022 · 1 min read
how to get browser version in react js?

how to get browser version in react js?

An example of get browser version in react js with step by step guide.

July 25th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]