2020-02-18 16:25:03 +00:00
|
|
|
import React, { Component } from "react";
|
|
|
|
import classNames from "classnames";
|
|
|
|
import Dropzone from "react-dropzone";
|
|
|
|
import Reveal from "react-reveal/Reveal";
|
|
|
|
import shortid from "shortid";
|
|
|
|
import { Button, UploadFile } from "../";
|
|
|
|
import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
|
|
|
|
import "./HomeUpload.scss";
|
2020-02-12 17:23:10 +00:00
|
|
|
|
|
|
|
export default class HomeUpload extends Component {
|
2020-02-18 16:25:03 +00:00
|
|
|
state = { files: [] };
|
2020-02-12 17:23:10 +00:00
|
|
|
|
|
|
|
handleDrop = async acceptedFiles => {
|
|
|
|
this.setState({
|
2020-02-18 16:25:03 +00:00
|
|
|
files: [...acceptedFiles.map(file => ({ file, status: "uploading" })), ...this.state.files]
|
|
|
|
});
|
2020-02-12 17:23:10 +00:00
|
|
|
|
2020-02-17 13:27:47 +00:00
|
|
|
const onComplete = (file, status, skylink) => {
|
|
|
|
this.setState(state => {
|
2020-02-18 16:25:03 +00:00
|
|
|
const index = state.files.findIndex(f => f.file === file);
|
2020-02-12 17:23:10 +00:00
|
|
|
|
2020-02-17 13:27:47 +00:00
|
|
|
return {
|
|
|
|
files: [
|
|
|
|
...state.files.slice(0, index),
|
|
|
|
{
|
|
|
|
...state.files[index],
|
|
|
|
status,
|
2020-02-18 16:25:03 +00:00
|
|
|
url: `https://siasky.net/${skylink}`
|
2020-02-17 13:27:47 +00:00
|
|
|
},
|
2020-02-18 16:25:03 +00:00
|
|
|
...state.files.slice(index + 1)
|
|
|
|
]
|
|
|
|
};
|
|
|
|
});
|
|
|
|
};
|
2020-02-12 17:23:10 +00:00
|
|
|
|
2020-02-17 13:27:47 +00:00
|
|
|
acceptedFiles.forEach(async file => {
|
2020-02-12 17:23:10 +00:00
|
|
|
try {
|
2020-02-18 16:25:03 +00:00
|
|
|
const fd = new FormData();
|
|
|
|
fd.append("file", file);
|
2020-02-18 06:01:36 +00:00
|
|
|
|
2020-02-17 13:27:47 +00:00
|
|
|
const uuid = shortid.generate();
|
2020-02-18 16:25:03 +00:00
|
|
|
const response = await fetch(`/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
|
|
|
|
const { skylink } = await response.json();
|
2020-02-12 17:23:10 +00:00
|
|
|
|
2020-02-18 16:25:03 +00:00
|
|
|
onComplete(file, "complete", skylink);
|
2020-02-12 22:13:34 +00:00
|
|
|
} catch (error) {
|
2020-02-18 16:25:03 +00:00
|
|
|
onComplete(file, "error");
|
2020-02-12 17:23:10 +00:00
|
|
|
}
|
2020-02-18 16:25:03 +00:00
|
|
|
});
|
|
|
|
};
|
2020-02-12 17:23:10 +00:00
|
|
|
|
2020-02-14 02:51:37 +00:00
|
|
|
handleSkylink = event => {
|
2020-02-18 16:25:03 +00:00
|
|
|
event.preventDefault();
|
2020-02-13 23:30:36 +00:00
|
|
|
|
2020-02-18 16:25:03 +00:00
|
|
|
const skylink = event.target.skylink.value.replace("sia://", "");
|
2020-02-13 23:30:36 +00:00
|
|
|
|
2020-02-14 02:51:37 +00:00
|
|
|
if (skylink.match(/^[a-zA-Z0-9_-]{46}$/)) {
|
2020-02-18 16:25:03 +00:00
|
|
|
window.open(skylink, "_blank");
|
2020-02-13 23:30:36 +00:00
|
|
|
}
|
2020-02-18 16:25:03 +00:00
|
|
|
};
|
2020-02-13 23:30:36 +00:00
|
|
|
|
2020-02-12 17:23:10 +00:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<Reveal effect="active">
|
|
|
|
<div className="home-upload">
|
2020-02-13 22:07:42 +00:00
|
|
|
<div className="home-upload-white fadeInUp delay4">
|
|
|
|
<div className="home-upload-split">
|
|
|
|
<div className="home-upload-box ">
|
2020-02-14 02:51:37 +00:00
|
|
|
<Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
|
2020-02-13 22:07:42 +00:00
|
|
|
{({ getRootProps, getInputProps, isDragActive }) => (
|
|
|
|
<>
|
|
|
|
<div
|
2020-02-18 16:25:03 +00:00
|
|
|
className={classNames("home-upload-dropzone", {
|
|
|
|
"drop-active": isDragActive
|
2020-02-13 22:07:42 +00:00
|
|
|
})}
|
|
|
|
{...getRootProps()}
|
|
|
|
>
|
|
|
|
<span className="home-upload-text">
|
2020-02-18 06:01:36 +00:00
|
|
|
<h3>Upload your Files</h3>
|
|
|
|
Drop your files here to pin to Skynet
|
2020-02-13 22:07:42 +00:00
|
|
|
</span>
|
|
|
|
<Button iconLeft>
|
|
|
|
<Folder />
|
|
|
|
Browse
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
<input {...getInputProps()} className="offscreen" />
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Dropzone>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="home-upload-retrieve">
|
|
|
|
<div className="home-upload-text">
|
2020-02-13 22:28:16 +00:00
|
|
|
<h3>Have a Skylink?</h3>
|
2020-02-18 06:01:36 +00:00
|
|
|
<p>Paste the link to retrieve your file</p>
|
2020-02-12 17:23:10 +00:00
|
|
|
|
2020-02-13 23:30:36 +00:00
|
|
|
<form className="home-upload-retrieve-form" onSubmit={this.handleSkylink}>
|
|
|
|
<input name="skylink" type="text" placeholder="sia://" />
|
2020-02-13 22:07:42 +00:00
|
|
|
<button type="submit">
|
|
|
|
<DownArrow />
|
|
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
2020-02-12 17:23:10 +00:00
|
|
|
</div>
|
2020-02-13 22:07:42 +00:00
|
|
|
</div>
|
2020-02-14 02:51:37 +00:00
|
|
|
|
|
|
|
{this.state.files.length > 0 && (
|
|
|
|
<div className="home-uploaded-files">
|
|
|
|
{this.state.files.map((file, i) => {
|
2020-02-18 16:25:03 +00:00
|
|
|
return <UploadFile key={i} {...file} />;
|
2020-02-14 02:51:37 +00:00
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
)}
|
2020-02-12 17:23:10 +00:00
|
|
|
</div>
|
|
|
|
|
2020-02-12 22:13:34 +00:00
|
|
|
<p className="bottom-text fadeInUp delay5">
|
2020-02-18 16:25:03 +00:00
|
|
|
Upon uploading a file, Skynet generates a 46 byte link called a <strong>Skylink</strong>. This link can then
|
|
|
|
be shared with anyone to retrieve the file on any Skynet Webportal.
|
2020-02-12 17:23:10 +00:00
|
|
|
</p>
|
|
|
|
|
2020-02-12 22:13:34 +00:00
|
|
|
<Deco3 className="deco-3 fadeInUp delay6" />
|
|
|
|
<Deco4 className="deco-4 fadeInUp delay6" />
|
|
|
|
<Deco5 className="deco-5 fadeInUp delay6" />
|
2020-02-12 17:23:10 +00:00
|
|
|
</div>
|
|
|
|
</Reveal>
|
2020-02-18 16:25:03 +00:00
|
|
|
);
|
2020-02-12 17:23:10 +00:00
|
|
|
}
|
|
|
|
}
|