From f51bdf3f8153cc08b6d66f6308f55f26fc60863c Mon Sep 17 00:00:00 2001 From: Byron Hambly Date: Tue, 8 Feb 2022 13:19:49 +0200 Subject: [PATCH] fix: improved image handling in collectibles --- .../tari_collectibles/web-app/src/Create.js | 107 ++++++++++++------ 1 file changed, 72 insertions(+), 35 deletions(-) diff --git a/applications/tari_collectibles/web-app/src/Create.js b/applications/tari_collectibles/web-app/src/Create.js index 93c5a496d3..31ce44c95f 100644 --- a/applications/tari_collectibles/web-app/src/Create.js +++ b/applications/tari_collectibles/web-app/src/Create.js @@ -56,7 +56,7 @@ class Create extends React.Component { image: "", cid: "", error: "", - ipfsUploadError: null, + imageError: null, isSaving: false, tip001: true, tip002: false, @@ -92,9 +92,9 @@ class Create extends React.Component { try { // only use the first file if multiple are dropped let cid = await this.addFileToIPFS(payload[0]); - this.setState({ cid, ipfsUploadError: null }); + this.setState({ cid, imageError: null }); } catch (e) { - this.setState({ ipfsUploadError: e.toString() }); + this.setState({ imageError: e.toString() }); } } } @@ -294,15 +294,16 @@ class Create extends React.Component { try { let cid = await this.addFileToIPFS(filePath); console.info("IPFS cid: ", cid); - this.setState({ cid, ipfsUploadError: null }); + this.setState({ cid, imageError: null }); } catch (e) { - this.setState({ ipfsUploadError: e.toString() }); + this.setState({ imageError: e.toString() }); } }; addFileToIPFS = async (filePath) => { const parts = filePath.split("/"); const name = parts[parts.length - 1]; + const timestamp = new Date().valueOf(); // unfortunately the ipfs http /add api doesn't play nicely with the tauri http client // resulting in "file argument 'path' is required" // so we'll shell out to the ipfs command @@ -329,7 +330,14 @@ class Create extends React.Component { }); }); - const cp = new Command("ipfs", ["files", "cp", `/ipfs/${cid}`, `/${name}`]); + if (!cid) return; + + const cp = new Command("ipfs", [ + "files", + "cp", + `/ipfs/${cid}`, + `/${timestamp}${name}`, + ]); await cp.spawn(); await new Promise((resolve, reject) => { @@ -347,22 +355,6 @@ class Create extends React.Component { }); return cid; - // console.log("command", command); - // const { success, output, error } = commandOutput(command); - // if (success) { - // const cid = output; - // console.log("cid", cid); - // const command = await runCommand("ipfs", [ - // "files", - // "cp", - // `/ipfs/${cid}`, - // `/${name}`, - // ]); - // const { error } = commandOutput(command); - // if (error) console.error("error: ", error); - // } else { - // console.error("error: ", error); - // } }; render() { @@ -424,7 +416,8 @@ class Create extends React.Component { cid={this.state.cid} setCid={(cid) => this.setState({ cid })} image={this.state.image} - error={this.state.ipfsUploadError} + error={this.state.imageError} + setError={(e) => this.setState({ imageError: e })} /> @@ -550,7 +543,7 @@ ImageSwitch.propTypes = { setMode: PropTypes.func, }; -const ImageUrl = ({ setImage }) => { +const ImageUrl = ({ setImage, setMode }) => { const [url, setUrl] = useState(""); return ( @@ -565,54 +558,78 @@ const ImageUrl = ({ setImage }) => { onChange={(e) => setUrl(e.target.value)} /> + ); }; ImageUrl.propTypes = { setImage: PropTypes.func, + setMode: PropTypes.func, }; -const ImageUpload = ({ selectFile, error }) => { +const ImageUpload = ({ selectFile, setMode }) => { return (

Select an image, or drag and drop an image onto this window

- - {error ? {error} : } +
); }; ImageUpload.propTypes = { selectFile: PropTypes.func, + setMode: PropTypes.func, error: PropTypes.string, }; -const ImageSelector = ({ cid, image, selectFile, setImage, setCid, error }) => { +const ImageSelector = ({ + cid, + image, + selectFile, + setImage, + setCid, + error, + setError, +}) => { const [mode, setMode] = useState(""); + const reset = () => { + setError(""); + setMode(""); + setImage(""); + }; + + if (error) { + return ( +
+ {error} + +
+ ); + } if (image) { return (

-

setImage("")}>Change

+
); } if (cid) { - return ; + return ; } let display; switch (mode) { case "url": - display = ; + display = ; break; case "upload": - display = ; + display = ; break; default: display = ; @@ -628,9 +645,10 @@ ImageSelector.propTypes = { setImage: PropTypes.func, setCid: PropTypes.func, error: PropTypes.string, + setError: PropTypes.func, }; -const IpfsImage = ({ cid, setCid, error }) => { +const IpfsImage = ({ cid, setCid, reset, error }) => { const [src, setSrc] = useState(""); const [httpError, setHttpError] = useState(null); @@ -659,7 +677,15 @@ const IpfsImage = ({ cid, setCid, error }) => {

-

setCid("")}>Change

+
); } @@ -667,7 +693,17 @@ const IpfsImage = ({ cid, setCid, error }) => { if (error || httpError) { return (
- {error || httpError} + + {error || httpError} - is the IPFS daemon running? + +
); } @@ -678,6 +714,7 @@ const IpfsImage = ({ cid, setCid, error }) => { IpfsImage.propTypes = { cid: PropTypes.string, setCid: PropTypes.func, + reset: PropTypes.func, error: PropTypes.string, };