I uploaded a jpg image on ipfs using infura API and ipfs-http-client. The file was taken from input with type=file. The event listner was onchange.
// imports
const IpfsHttpClient = require("ipfs-http-client");
const ipfsC = IpfsHttpClient({
host: "ipfs.infura.io",
port: "5001",
protocol: "https",
});
<input type="file" onChange={(e) => { upload(e); }} />
const upload = async (e) => {
const file = e.target.files[0];
const added = await ipfsC.add(file, {
progress: (prog) => console.log(`received: ${prog}`),
});
console.log(added)
};
the hash that I get back is QmQnSWbsck26xrFRiowdV2JhP7cbKRc9KbjWinRhmJgiMa.Now I am trying to retrieve the image and display it on the web app. How should I proceed further.
function toBase32(value) {
var cid = new CID(value)
return cid.toV1().toBaseEncodedString('base32')
}
this converts the given v0 hash to v1 hash. And then the image can be retrieved as mentioned by Dietrich Ayala in the above answer.