React component enabling a file, multiple files or a folder to be uploaded to IPFS. Includes implementations for Image, PDF, Text, and other filetypes
npm install react-ipfs-uploader-cr
yarn add react-ipfs-uploader-cr
If there's no .env
file, copy a template from examples/.env.example
:
cp ./node_modules/react-ipfs-uploader-cr/examples/.env.example .env
vi .env
if your proyect already has an .env
file, add these variables:
REACT_APP_IPFS_PROJECT_ID=
REACT_APP_IPFS_API_KEY_SECRET=
REACT_APP_IPFS_HOST=ipfs.infura.io
REACT_APP_IPFS_PORT=5001
REACT_APP_IPFS_PROTOCOL=https
REACT_APP_IPFS_PUBLIC_URL=https://ipfs.infura.io/ipfs
To enable the .env
file variables read in React, it's necesary to run the app by making a building and run with a JS server like express.
- Install dependencies:
npm install express
- Create a server.js file
// Express Server to allow react reading environment variables with process.env
const express = require('express')
const app = express()
const path = require('path')
const port = process.env.PORT || 3001
app.use(express.static(path.join(__dirname, 'build')))
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port, () => console.log("Listening on Port", port))
- Replace the "start" script in the
package.json
file:
"scripts": {
"start": "./node_modules/react-scripts/bin/react-scripts.js build && node server.js",
- Node version
Make sure your node version is 17 or above.
node --version
If the node version on your system is below 17, there's a way to switch the node version without uninstall and install it, by using a node version switcher called nvm
.
If nvm
is not installed on your system, install it by:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
ls -la ~/.nvm
cat ~/.zshrc
. ~/.zshrc
NOTE: instructions were taken from:
https://github.com/nvm-sh/nvm
Then install node 17:
nvm install 17
npm -v
If you want to switch to node 17:
nvm use 17
- Install the dependencies:
npm install -g ipfs
NOTE: instructions were taken from:
https://github.com/ipfs/js-ipfs
Then enable CORS:
jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["http://127.0.0.1:3001"]'
jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "POST", "GET"]'
NOTE: instructions were taken from:
https://github.com/ipfs/js-ipfs/blob/master/docs/CORS.md
Finally start the IPFS local server:
jsipfs daemon
There'll be an output like:
Initializing IPFS daemon...
js-ipfs version: x.x.x
System version: x64/darwin
Node.js version: x.x.x
Swarm listening on /ip4/127.0
.... more output
Edit the .env
file and assign the REACT_APP_IPFS_...
variables exactly as showed here:
REACT_APP_IPFS_PROJECT_ID=
REACT_APP_IPFS_API_KEY_SECRET=
REACT_APP_IPFS_HOST=127.0.0.1
REACT_APP_IPFS_PORT=5002
REACT_APP_IPFS_PROTOCOL=http
REACT_APP_IPFS_PUBLIC_URL=http://127.0.0.1:9090/ipfs
Anything uploaded to your local IPFS node will be available to the public on https://ipfs.io/ipfs/ with the same hash created when a file, group of files or directory are uploaded. So be careful on the test files you upload. It applies to any IPFS service used (Infura, Pinata, local node).
For more information, visit:
https://docs.ipfs.tech/concepts/privacy-and-encryption/#enhancing-your-privacy
https://docs.ipfs.tech/concepts/privacy-and-encryption/#encryption-best-practices
- Go to this URL and register a new account (just in case you don't have one):
- Create your IPFS project
NETWORK
IPFS
NAME
My IPFS Project
-
Then click to
CREATE PROJECT
button. -
Go to the dashboard
-
Click on
MANAGE KEY
button on the IPFS project's row. -
Look for the
PROJECT SUMMARY
section. -
Copy the
PROJECT ID
. It'll be assigned in theREACT_APP_IPFS_PROJECT_ID
variable. -
Copy the
API KEY SECRET
. It'll be assigned into theREACT_APP_IPFS_API_KEY_SECRET
variable.
Assign the .env
file variables with the copied values:
REACT_APP_IPFS_PROJECT_ID=XXXXX
REACT_APP_IPFS_API_KEY_SECRET=XXXX
The rest of the values can remain the same.
npm start
yarn start
And load the app on the Browser:
1 . FileUpload: Uploads the selcted File and returns the URL after uploading the file.
2 . ImageUpload: Shows the user a preview of the selected Image and returns the URL after uploading.
3 . PdfUpload: Shows the user a preview of the selected PDF and returns the URL after uploading.
4 . TextUpload: Returns the URL of the Text after uploading.
1 . MultipleFilesUpload: Uploads the selcted Files and returns the URL after uploading the files.
2 . FolderUpload: Uploads the selected Folder and returns the URL after uploading the folder.
1 . Declare an useState
hook that can hold a string as its current state.
2 . Pass the setFunction
to the component you are using ie. setUrl={setFunction}
3 . As you upload the file , files or folder the url will be returned.
Example: ./example/src/components/ExampleTabs.js | Tab eventKey='FileUpload'
// FileUpload Component: Uploads the selcted File and returns the URL after uploading the file.
import React, { useState } from 'react'
import { FileUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [fileUrl, setFileUrl] = useState('')
return (
<div>
<FileUpload setUrl={setFileUrl} />
FileUrl: <a
href={fileUrl}
target='_blank'
rel='noopener noreferrer'
>
{fileUrl}
</a>
</div>
)
}
export default YourComponent
Example: ./example/src/components/ExampleTabs.js | Tab eventKey='MultipleFilesUpload'
// MultipleFilesUpload Component: Uploads Multiple files to IPFS and returns the URL
import React, { useState } from 'react'
import { MultipleFilesUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [multipleFilesUrl, setMultipleFilesUrl] = useState('')
return (
<div>
<MultipleFilesUpload setUrl={setMultipleFilesUrl} />
MultipleFilesUrl: <a
href={multipleFilesUrl}
target='_blank'
rel='noopener noreferrer'
>
{multipleFilesUrl}
</a>
</div>
)
}
export default YourComponent
Example: ./example/src/components/ExampleTabs.js | Tab eventKey='FolderUpload'
// FolderUpload Component: Uploads a Folder to IPFS and returns the URL
import React, { useState } from 'react'
import { FolderUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [folderUrl, setFolderUrl] = useState('')
return (
<div>
<FolderUpload setUrl={setFolderUrl} />
FolderUrl: <a
href={folderUrl}
target='_blank'
rel='noopener noreferrer'
>
{folderUrl}
</a>
</div>
)
}
export default YourComponent
Example: ./example/src/components/ExampleTabs.js | Tab eventKey='ImageUpload'
// ImageUpload: Shows the user a preview of the selected Image and returns the URL after uploading.
import React, { useState } from 'react'
import { ImageUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [imageUrl, setImageUrl] = useState('')
return (
<div>
<ImageUpload setUrl={setImageUrl} />
ImageUrl: <a
href={imageUrl}
target='_blank'
rel='noopener noreferrer'
>
{imageUrl}
</a>
</div>
)
}
export default YourComponent
Example: ./example/src/components/ExampleTabs.js | Tab eventKey='PdfUpload'
// PdfUpload: Shows the user a preview of the selected PDF and returns the URL after uploading.
import React, { useState } from 'react'
import { PdfUpload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [pdfUrl, setPdfUrl] = useState('')
return (
<div>
<PdfUpload setUrl={setPdfUrl} />
Pdfurl: <a href={pdfUrl} target='_blank' rel='noopener noreferrer'>
{pdfUrl}
</a>
</div>
)
}
export default YourComponent
Example: ./example/src/components/ExampleTabs.js | Tab eventKey='TextUpload'
// TextUpload: Returns the URL of the Text after uploading
import React, { useState } from 'react'
import { Textupload } from 'react-ipfs-uploader'
const YourComponent = () => {
const [textUrl, setTextUrl] = useState('')
return (
<div>
<TextUpload setUrl={setTextUrl} />
TextUrl: <a
href={textUrl}
target='_blank'
rel='noopener noreferrer'
>
{textUrl}
</a>
</div>
)
}
export default YourComponent
NPM Package: https://www.npmjs.com/package/react-ipfs-uploader-cr
GitHub Repository: https://github.com/tomkat-cr/react-ipfs-uploader-cr
Forked from: https://github.com/yash-deore/react-ipfs-uploader
MIT © tomkat-cr