Skip to content
This repository was archived by the owner on Mar 10, 2020. It is now read-only.

Commit 17636a9

Browse files
harlantwooddaviddias
harlantwood
authored and
daviddias
committed
Example: Upload file to IPFS via browser w/ React & Webpack (#539)
* Example: Upload file to IPFS via browser w/ React & Webpack
1 parent f3fef31 commit 17636a9

File tree

10 files changed

+202
-0
lines changed

10 files changed

+202
-0
lines changed

‎examples/upload-file-via-browser/.eslintrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "standard",
3+
"rules": {
4+
"react/jsx-uses-react": 2,
5+
"react/jsx-uses-vars": 2,
6+
"react/react-in-jsx-scope": 2
7+
},
8+
"plugins": [
9+
"react"
10+
]
11+
}

‎examples/upload-file-via-browser/.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
npm-debug.log
3+
.DS_Store
4+
dist

‎examples/upload-file-via-browser/README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Upload file to IPFS via browser using js-ipfs-api
2+
3+
> In this example, you will find a simple React app to upload a file to IPFS via the browser using js-ipfs-api and Webpack.
4+
5+
## Setup
6+
7+
As for any js-ipfs-api example, **you need a running IPFS daemon**, you learn how to do that here:
8+
9+
- [Spawn a go-ipfs daemon](https://ipfs.io/docs/getting-started/)
10+
- [Spawn a js-ipfs daemon](https://github.com/ipfs/js-ipfs#usage)
11+
12+
**Note:** If you load your app from a different domain than the one the daemon is running (most probably), you will need to set up CORS, see https://github.com/ipfs/js-ipfs-api#cors to learn how to do that.
13+
14+
A quick (and dirty way to get it done) is:
15+
16+
```bash
17+
> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[\"*\"]"
18+
> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials "[\"true\"]"
19+
```
20+
21+
## Run this example
22+
23+
Once the daemon is on, run the following commands within this folder:
24+
25+
```bash
26+
> npm install
27+
> npm start
28+
```
29+
30+
Now open your browser at `http://localhost:3000`
31+
32+
After uploading a file (left screen), and opening the uploaded file (right screen), you should see something like:
33+
34+
![App Screenshot](https://cdn.rawgit.com/ipfs/js-ipfs-api/320fcfc6155a771027bdf0cc661e37a407d35efb/examples/upload-file-via-browser/screenshot.png)

‎examples/upload-file-via-browser/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<html>
2+
<head>
3+
<title>Sample App</title>
4+
</head>
5+
<body>
6+
<div id='root'>
7+
</div>
8+
<script src="/static/bundle.js"></script>
9+
</body>
10+
</html>

‎examples/upload-file-via-browser/package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "upload-file-via-browser",
3+
"version": "1.0.0",
4+
"description": "Upload file to IPFS via browser using js-ipfs-api with Webpack",
5+
"scripts": {
6+
"start": "node server.js"
7+
},
8+
"author": "Harlan T Wood <[email protected]>",
9+
"contributors": [
10+
"Victor Bjelkholm <[email protected]>"
11+
],
12+
"license": "MIT",
13+
"devDependencies": {
14+
"babel-core": "^5.4.7",
15+
"babel-loader": "^5.1.2",
16+
"ipfs-api": "^12.1.7",
17+
"json-loader": "^0.5.4",
18+
"react": "^15.4.2",
19+
"react-dom": "^15.4.2",
20+
"react-hot-loader": "^1.3.1",
21+
"webpack": "^1.9.6",
22+
"webpack-dev-server": "^1.8.2"
23+
}
24+
}

‎examples/upload-file-via-browser/screenshot.png

446 KB
Loading

‎examples/upload-file-via-browser/server.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict'
2+
let webpack = require('webpack')
3+
let WebpackDevServer = require('webpack-dev-server')
4+
let config = require('./webpack.config')
5+
6+
new WebpackDevServer(webpack(config), {
7+
publicPath: config.output.publicPath,
8+
hot: true,
9+
historyApiFallback: true
10+
}).listen(3000, 'localhost', function (err) {
11+
if (err) throw new Error(err)
12+
console.log('Listening at localhost:3000')
13+
})

‎examples/upload-file-via-browser/src/App.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
'use strict'
2+
const React = require('react')
3+
const ipfsAPI = require('ipfs-api')
4+
5+
class App extends React.Component {
6+
constructor () {
7+
super()
8+
this.state = {
9+
added_file_hash: null
10+
}
11+
this.ipfsApi = ipfsAPI('localhost', '5001')
12+
13+
// bind methods
14+
this.captureFile = this.captureFile.bind(this)
15+
this.saveToIpfs = this.saveToIpfs.bind(this)
16+
this.arrayBufferToString = this.arrayBufferToString.bind(this)
17+
this.handleSubmit = this.handleSubmit.bind(this)
18+
}
19+
20+
captureFile (event) {
21+
event.stopPropagation()
22+
event.preventDefault()
23+
const file = event.target.files[0]
24+
let reader = new window.FileReader()
25+
reader.onloadend = () => this.saveToIpfs(reader)
26+
reader.readAsArrayBuffer(file)
27+
}
28+
29+
saveToIpfs (reader) {
30+
let ipfsId
31+
const buffer = Buffer.from(reader.result)
32+
this.ipfsApi.add(buffer)
33+
.then((response) => {
34+
console.log(response)
35+
ipfsId = response[0].hash
36+
console.log(ipfsId)
37+
this.setState({added_file_hash: ipfsId})
38+
}).catch((err) => {
39+
console.error(err)
40+
})
41+
}
42+
43+
arrayBufferToString (arrayBuffer) {
44+
return String.fromCharCode.apply(null, new Uint16Array(arrayBuffer))
45+
}
46+
47+
handleSubmit (event) {
48+
event.preventDefault()
49+
}
50+
51+
render () {
52+
return (
53+
<div>
54+
<form id="captureMedia" onSubmit={this.handleSubmit}>
55+
<input type="file" onChange={this.captureFile} />
56+
</form>
57+
<div>
58+
<a target="_blank"
59+
href={'https://ipfs.io/ipfs/' + this.state.added_file_hash}>
60+
{this.state.added_file_hash}
61+
</a>
62+
</div>
63+
</div>
64+
)
65+
}
66+
}
67+
module.exports = App

‎examples/upload-file-via-browser/src/index.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict'
2+
const React = require('react')
3+
const ReactDOM = require('react-dom')
4+
const App = require('./App')
5+
6+
ReactDOM.render(<App />, document.getElementById('root'))

‎examples/upload-file-via-browser/webpack.config.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use strict'
2+
3+
let path = require('path')
4+
let webpack = require('webpack')
5+
6+
module.exports = {
7+
devtool: 'eval',
8+
entry: [
9+
'webpack-dev-server/client?http://localhost:3000',
10+
'webpack/hot/only-dev-server',
11+
'./src/index'
12+
],
13+
output: {
14+
path: path.join(__dirname, 'dist'),
15+
filename: 'bundle.js',
16+
publicPath: '/static/'
17+
},
18+
plugins: [
19+
new webpack.HotModuleReplacementPlugin()
20+
],
21+
module: {
22+
loaders: [{
23+
test: /\.js$/,
24+
loaders: ['react-hot', 'babel'],
25+
include: path.join(__dirname, 'src')
26+
}, { test: /\.json$/, loader: 'json-loader' }]
27+
},
28+
node: {
29+
fs: 'empty',
30+
net: 'empty',
31+
tls: 'empty'
32+
}
33+
}

0 commit comments

Comments
 (0)