Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: improved image handling in collectibles #3808

Merged
merged 1 commit into from
Feb 9, 2022
Merged

fix: improved image handling in collectibles #3808

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 72 additions & 35 deletions applications/tari_collectibles/web-app/src/Create.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ class Create extends React.Component {
image: "",
cid: "",
error: "",
ipfsUploadError: null,
imageError: null,
isSaving: false,
tip001: true,
tip002: false,
Expand Down Expand Up @@ -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() });
}
}
}
Expand Down Expand Up @@ -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
Expand All @@ -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) => {
Expand All @@ -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() {
Expand Down Expand Up @@ -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 })}
/>
</FormGroup>
<FormGroup>
Expand Down Expand Up @@ -550,7 +543,7 @@ ImageSwitch.propTypes = {
setMode: PropTypes.func,
};

const ImageUrl = ({ setImage }) => {
const ImageUrl = ({ setImage, setMode }) => {
const [url, setUrl] = useState("");

return (
Expand All @@ -565,54 +558,78 @@ const ImageUrl = ({ setImage }) => {
onChange={(e) => setUrl(e.target.value)}
/>
<Button onClick={() => setImage(url)}>Save</Button>
<Button onClick={() => setMode("")}>Back</Button>
</div>
);
};

ImageUrl.propTypes = {
setImage: PropTypes.func,
setMode: PropTypes.func,
};

const ImageUpload = ({ selectFile, error }) => {
const ImageUpload = ({ selectFile, setMode }) => {
return (
<div>
<p>Select an image, or drag and drop an image onto this window</p>
<Button onClick={selectFile}>Click to Select Image</Button>

{error ? <Alert severity="error">{error}</Alert> : <span />}
<Button onClick={() => setMode("")}>Back</Button>
</div>
);
};

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 (
<div>
<Alert severity="error">{error}</Alert>
<Button onClick={reset}>Reset</Button>
</div>
);
}

if (image) {
return (
<div>
<img src={image} alt="" width="200px" />
<br />
<p onClick={() => setImage("")}>Change</p>
<Button onClick={reset}>Reset</Button>
</div>
);
}
if (cid) {
return <IpfsImage cid={cid} setCid={setCid} />;
return <IpfsImage cid={cid} setCid={setCid} reset={reset} />;
}

let display;

switch (mode) {
case "url":
display = <ImageUrl setImage={setImage} error={error} />;
display = <ImageUrl setImage={setImage} setMode={setMode} />;
break;
case "upload":
display = <ImageUpload selectFile={selectFile} error={error} />;
display = <ImageUpload selectFile={selectFile} setMode={setMode} />;
break;
default:
display = <ImageSwitch setMode={setMode} />;
Expand All @@ -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);

Expand Down Expand Up @@ -659,15 +677,33 @@ const IpfsImage = ({ cid, setCid, error }) => {
<div>
<img src={src} alt="" width="200px" />
<br />
<p onClick={() => setCid("")}>Change</p>
<Button
onClick={() => {
reset();
setSrc("");
setCid("");
}}
>
Reset
</Button>
</div>
);
}

if (error || httpError) {
return (
<div>
<Alert severity="error">{error || httpError}</Alert>
<Alert severity="error">
{error || httpError} - is the IPFS daemon running?
</Alert>
<Button
onClick={() => {
setCid("");
reset();
}}
>
Reset
</Button>
</div>
);
}
Expand All @@ -678,6 +714,7 @@ const IpfsImage = ({ cid, setCid, error }) => {
IpfsImage.propTypes = {
cid: PropTypes.string,
setCid: PropTypes.func,
reset: PropTypes.func,
error: PropTypes.string,
};

Expand Down