diff --git a/src/imageadder.tsx b/src/imageadder.tsx index 24a5cb0..a85158c 100644 --- a/src/imageadder.tsx +++ b/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 diff --git a/src/main.tsx b/src/main.tsx index afa52e7..eb95d2e 100644 --- a/src/main.tsx +++ b/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", ); //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 this^^ +look into using ipfs for images 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 diff --git a/src/styles.css b/src/styles.css index 3a9d1a4..0b2e4f7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -81,6 +81,7 @@ button{ #noImageText{ font-size: 3rem; color: grey; + background-color: white; margin: 0 auto; }