ipfs links work through createObjectUrl() + minor css changes

src/imageadder.tsx

@@ -61,13 +61,15 @@ export class ImageAdder extends React.Component< ImageAddedProps, ImageAdderStat
 	}
 
 	@bind 
-	private async onFileLoad( file: File, result: ArrayBuffer )
+	private async onFileLoad( file: File, result: ArrayBuffer ) //we add the binaries to the ipfs node then convert it into a blob we can display, when accessing this from a remote gadget you'll need to create a blob since we havent uploaded this as one
 	{
 		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 );
+		const blobData: ArrayBuffer[] = [result];
+		const imageBlob = new Blob(blobData);
+		this.props.addImageCallback( URL.createObjectURL(imageBlob) );
 	}
 
 	@bind

src/main.tsx

@@ -4,6 +4,7 @@ import bind from 'bind-decorator';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { ImageAdder } from './imageadder';
+import * as IPFS from 'ipfs';
 
 class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for items on the menu, basically just a button
 {
@@ -12,10 +13,6 @@ class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for
 		super(props);
 	}
 
-	static defaultProps = {
-		displayImage: "https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_960_720.png"
-	}
-
 	public render()
 	{
 		return(
@@ -186,16 +183,9 @@ renderAardvarkRoot( "root", <MyGadget/> );
 //DONT FORGET TO RUN NPM START AAAAAAAAAAAAAAAAAAAA YOU ALWAYS FORGETTT
 /*
 todo:
-look into using URL.CreateObjectUrl() to let users 'upload' images as well as giving URLs
+look into using ipfs for images
-look into using ipfs for this^^
 look into using avmodel to create pop-up images
-make pop-up text box clear itself after submittion
 
-theres two options for validation and both have issues:
--we validate inside onAddImage(), this would mean we'd have to control the pop-up from that function to warn the user
--we validate inside the pop-up, that means we dont have access to the url list so dealing with duplicates would be harder
--oh, a third option, we could create a validate function within ImageMenu that we call from the pop-up. This is just the second solution but instead of passing a list or a copy of the list we just reference a function.
-^thats encapsulated too, you'd avoid so many errors
 
 useful links:
 http://localhost:23842/gadgets/aardvark_monitor/index.html

src/styles.css

@@ -81,6 +81,7 @@ button{
 #noImageText{
 	font-size: 3rem;
 	color: grey;
+	background-color: white;
 	margin: 0 auto;
 }