Skip to content

React + Ethereum client to store images and files on IPFS

License

Notifications You must be signed in to change notification settings

Hp1923/ethereum-file-share

 
 

Repository files navigation

Ethereum File Share Client · GitHub license

Check out the demo on youtube

An awesome project to upload images on a website and authenticating them through ethereum smart contracts!
View Demo · Report Bug

Table of Contents

About The Project

This project uses React.JS for front end and Ethereum smart contracts for storing the IPFS hash on a blockchain. Below is the entire process from selecting file to uploading it to ipfs and displaying it on the website

  • File selection: You can click on the chose file button to select any image you want.
  • Capturing file: The server then captures the file and converts it into a buffer.
  • Submitting: After file capture, once you click on the submit button, the server uploads the file to IPFS and saves the hash it receives from IPFS API.
  • Saving hash on Blockchain: Once the IPFS hash is received, server pushes the hash onto an Ethereum compatible Blockchain.
  • Verification: Once the hash is on Blockchain, client then verifies the account connected to the Blockchain and retrieves the hash.
  • Update Image: Once client verifies the account holder through Meta Mask, image updates on the client.

Built With

This project uses the following software and languages

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

Here is the list of all the prerequisites you would need to install on your system in order to run this device

  • Node.js v10.15.3
https://nodejs.org/en/download/
  • npm
https://www.npmjs.com/get-npm
  • Truffle
https://www.trufflesuite.com
  • Additional build tools are required to be able to run media keys on windows. Run these commands from an administrative shell to install software dependencies:

    Note: You need to install windows build tools version 4.0 or higher

npm install --global --production windows-build-tools
npm install -g node-gyp

Installation

  1. Add all dependencies using npm

    npm install
  2. Open Ganache and run a private Blockchain

  3. Run Truffle to add smart contract to the Blockchain

    truffle migrate --reset

    You will get the following feedback from console:

    Port Image

  4. Run server to start the React.JS client

    npm start

Note: You need to keep running Ganache Blockchain for the app to work. Please go through the deployment below to start using your client.

Deployment

Run

npm build

You need to connect to Rinkeby or Ropsten test network if you do not want to spend any money on Ethereum smart contracts.

Demo and Description

Check out the demo on youtube here - View Demo

Author

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

  • Boilerplate - Boilerplate for React.JS + Ethereum + Truffle project.
  • IPFS HTTP Client - Javascript library for communication with IPFS.

About

React + Ethereum client to store images and files on IPFS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.4%
  • CSS 10.4%
  • HTML 10.2%