This repository has been archived on 2022-10-07. You can view files and clone it, but cannot push or open issues or pull requests.
skynet-webportal/src/components/HomeUpload/HomeUpload.js

126 lines
4.1 KiB
JavaScript
Raw Normal View History

import React, { useState, useContext } from "react";
2020-02-18 16:25:03 +00:00
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-28 12:52:32 +00:00
import AppContext from "../../AppContext";
2020-02-12 17:23:10 +00:00
export default function HomeUpload() {
const [files, setFiles] = useState([]);
2020-02-28 12:52:32 +00:00
const { apiUrl } = useContext(AppContext);
2020-02-12 17:23:10 +00:00
const handleDrop = async acceptedFiles => {
setFiles(previousFiles => [...acceptedFiles.map(file => ({ file, status: "uploading" })), ...previousFiles]);
2020-02-12 17:23:10 +00:00
2020-02-17 13:27:47 +00:00
const onComplete = (file, status, skylink) => {
setFiles(previousFiles => {
const index = previousFiles.findIndex(f => f.file === file);
return [
...previousFiles.slice(0, index),
{
...previousFiles[index],
status,
2020-02-28 12:52:32 +00:00
url: `${apiUrl}/${skylink}`
},
...previousFiles.slice(index + 1)
];
2020-02-18 16:25:03 +00:00
});
};
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-28 12:52:32 +00:00
const response = await fetch(`${apiUrl}/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
2020-02-18 16:25:03 +00:00
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
const 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
return (
<Reveal effect="active">
<div className="home-upload">
<div className="home-upload-white fadeInUp delay4">
<div className="home-upload-split">
<div className="home-upload-box ">
<Dropzone onDrop={handleDrop}>
{({ getRootProps, getInputProps, isDragActive }) => (
<>
<div
className={classNames("home-upload-dropzone", {
"drop-active": isDragActive
})}
{...getRootProps()}
>
<span className="home-upload-text">
<h3>Upload your Files</h3>
Drop your files here to pin to Skynet
</span>
<Button iconLeft>
<Folder />
Browse
</Button>
</div>
<input {...getInputProps()} className="offscreen" />
</>
)}
</Dropzone>
2020-02-13 22:07:42 +00:00
</div>
2020-02-14 02:51:37 +00:00
<div className="home-upload-retrieve">
<div className="home-upload-text">
<h3 id="skylink-retrieve-title">Have a Skylink?</h3>
<p>Paste the link to retrieve your file</p>
<form className="home-upload-retrieve-form" onSubmit={handleSkylink}>
<input name="skylink" type="text" placeholder="sia://" aria-labelledby="skylink-retrieve-title" />
<button type="submit" aria-label="Retrieve file">
<DownArrow />
</button>
</form>
2020-02-14 02:51:37 +00:00
</div>
</div>
2020-02-12 17:23:10 +00:00
</div>
{files.length > 0 && (
<div className="home-uploaded-files">
{files.map((file, i) => {
return <UploadFile key={i} {...file} />;
})}
</div>
)}
2020-02-12 17:23:10 +00:00
</div>
<p className="bottom-text fadeInUp delay5">
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.
</p>
<Deco3 className="deco-3 fadeInUp delay6" />
<Deco4 className="deco-4 fadeInUp delay6" />
<Deco5 className="deco-5 fadeInUp delay6" />
</div>
</Reveal>
);
2020-02-12 17:23:10 +00:00
}