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.

const response = await fetch(base64Image);
const blob = await response.blob();
const file = new File([blob], "file.png", { type: "image/png" });
const 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
import React, { useState, useEffect } from "react";
import { create } from "ipfs-http-client";

const ifpsConfig = {
  host: "ipfs.infura.io",
  port: 5001,
  protocol: "https"
};

const ipfs = create(ifpsConfig);

const base64Image =
  "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=";

export default function App() {
  const [hash, setHash] = useState(
    "QmR4uT3fuqzbrNyAobMFmANtaSkz1MY5V36JikKUJ78ytf"
  );

  const uploadBase64Image = async () => {
    const response = await fetch(base64Image);
    const blob = await response.blob();
    const file = new File([blob], "file.png", { type: "image/png" });
    const imghash = await ipfs.add(file);
    console.log(imghash);
    setHash(imghash.path);
  };

  return (
    <div className="App">
      <button onClick={() => uploadBase64Image()}>Upload</button>
      <img src={`https://ipfs.infura.io/ipfs/${hash}`} />
    </div>
  );
}

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