IPFS upload of local images

To use this just drop a local image file onto the spot on the add dialog that says "drop here".

The panel can't display /ipfs/ URLs, so they appear as broken images. Need to use models to display them.

package.json

@@ -28,7 +28,7 @@
 		"style-loader": "^1.2.1",
 		"ts-loader": "^6.0.4",
 		"tslib": "^1.10.0",
-		"typescript": "^3.5.2",
+		"typescript": "^4.1.4",
 		"webpack": "^4.34.0",
 		"webpack-cli": "^3.3.6"
 	},
@@ -36,7 +36,9 @@
 		"@aardvarkxr/aardvark-react": "^1.5.1",
 		"@aardvarkxr/aardvark-shared": "^1.5.1",
 		"bind-decorator": "^1.0.11",
+		"ipfs": "^0.54.2",
 		"react": "^16.13.1",
-		"react-dom": "^16.13.1"
+		"react-dom": "^16.13.1",
+		"react-dropzone": "^11.3.1"
 	}
 }

src/imageadder.tsx

@@ -1,5 +1,7 @@
 import bind from 'bind-decorator';
 import * as React from 'react';
+import * as IPFS from 'ipfs';
+import Dropzone from 'react-dropzone';
 
 interface ImageAddedProps
 {
@@ -14,11 +16,21 @@ interface ImageAdderState
 
 export class ImageAdder extends React.Component< ImageAddedProps, ImageAdderState >
 {
+	private ipfsNode: IPFS.IPFS = null;
+
 	constructor( props: any )
 	{
 		super( props );
 
 		this.state = { url: "" };
+
+		IPFS.create().
+		then( async ( newNode: any ) =>
+		{
+			this.ipfsNode = newNode;
+			const version = await newNode.version()
+			console.log('IPFS Version:', version.version );
+		} );
 	}
 
 	@bind
@@ -43,16 +55,54 @@ export class ImageAdder extends React.Component< ImageAddedProps, ImageAdderStat
 		
 	}
 
+	@bind 
+	private async onFileLoad( file: File, result: ArrayBuffer )
+	{
+		let res = await this.ipfsNode.add( new Uint8Array( result ) );
+		
+		const url = "/ipfs/" + res.cid;
+		console.log( `Adding ${ file.name } as ${ url }` );
+		this.props.addImageCallback( url );
+	}
+
+	@bind
+	private onDrop( acceptedFiles: File[] )
+	{
+		for( let file of acceptedFiles )
+		{
+			const reader = new FileReader();
+
+			reader.onabort = () => { console.log( "file reading was aborted for", file.name ); }
+			reader.onerror = () => { console.log( "file reading has failed for", file.name ); }
+			reader.onload = () => this.onFileLoad( file, reader.result as ArrayBuffer );
+
+			reader.readAsArrayBuffer( file );
+		}
+	}
+
+
 	render()
 	{
 		return (
-			<form onSubmit={ this.handleSubmit }>
+			<div>
-				<label>
+				<form onSubmit={ this.handleSubmit }>
-					Image URL to add:
+					<label>
-					<input type="text" value={this.state.url } onChange={this.handleChange} />
+						Image URL to add:
-				</label>
+						<input type="text" value={this.state.url } onChange={this.handleChange} />
-				<input type="submit" value="Submit" />
+					</label>
-			</form> );
+					<input type="submit" value="Submit" />
+				</form>
+				<Dropzone onDrop={ this.onDrop }>
+				{({getRootProps, getInputProps}) => (
+					<section>
+					<div {...getRootProps()}>
+						<input {...getInputProps()} />
+						<p>Drag 'n' drop some files here, or click to select files</p>
+					</div>
+					</section>
+				)}
+				</Dropzone>
+			</div> );
 	}
 }