Creating a form in IPFS for users to enter data

Question

I wanted to create a website and upload it onto the IPFS for users to upload data (like their picture, name etc.).

But how exactly can I capture all details user upload, get the IPFS Hash produced and then put down the hash in my solidity contract to store the hash on the ethereum blockchain?

Any links, or comments will be greatly appreciated. Sorry if the question is a bit dumb.

Answer 1

What about user information, it can be very convinient to store it in JSON format. I have example how to interact with JSON object in ipfs, how to get hash, store it and then retrieve it from smart contract:

MyContract.sol

pragma solidity ^0.4.18;

contract MyContract {

  string public ipfsHash;

  function setHash(string _ipfsHash) external {
    ipfsHash = _ipfsHash;
  }
}

test.js

const ipfs = require("nano-ipfs-store").at("https://ipfs.infura.io:5001");
const MyContract = artifacts.require("MyContract")

async function test() {
  const data = JSON.stringify({
    name: "JSON Statehem",
    link0: "stackexchange.com",
    link1: "github.com",
    link2: "myfacebook.com"
  })

  const ipfsHash = await ipfs.add(data)
  const instance = await MyContract.deployed()

  await instance.setHash.sendTransaction(ipfsHash)

  let returnedHash = await instance.ipfsHash.call()

  console.log(ipfsHash)
  console.log(returnedHash)

  console.log(JSON.parse(await ipfs.cat(returnedHash)))

}

test()

You can store ipfs hash in bytes type in Solidity, but I prefer to store it in string because I won't have to make any convertion while retrieving value from bytes.

---

What about images, you will have to create buffer of the image and then simply upload it to ipfs using .add. It will return hash which you can store as in example above.