ipfs-upload

A React Component that enables you to upload a file to IPFS.

Install

npm :

npm install @iblcomponents/ipfs-upload

Usage

From the client application you should:

1 . Write the saveOutput callback needed by the component.
2 . Create the configurations object needed by the component. This has to contain Infura related data: you need to create a new key from https://app.infura.io/dashboard/ and get the data from the Project Summary section (PROJECT ID, API Key Secret). The fileUrl and apiUrl values of the configurations object are hardcoded below, you can leave them as they are.
3 . Wrap these in a componentProps object and send it as props to the FileUpload component.
4 . As you upload the file the IPFS url will be returned and handled in the saveOutput callback.

// FileUpload Component : Uploads the selcted File and returns the URL after 
// uploading the file .
import { getAPI } from "@iblcomponents/ipfs-upload";

const App = () =>
{
    const FileUpload = getAPI("FileUpload").getComponent();
    const saveOutput = output => 
    {
        //output contains the uploaded IPFS url, do whatever you need with it 
        // within this function
    };
    
    const configurations = {
        "projectId": "yourInfuraProjectId",
        "projectSecret": "yourInfuraProjectSecret",
        "fileURL": "https://skywalker.infura-ipfs.io/ipfs",
        "apiURL": "https://ipfs.infura.io:5001/api/v0",                                            
    }
    
    const componentProps = {
        saveOutputCallback: saveOutput,
        configurations : configurations        
    }; 
    
    return (<div><FileUpload { ...componentProps }/></div>)
}

export default YourComponent