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"; export default class HomeUpload extends Component { state = { files: [] }; handleDrop = async acceptedFiles => { this.setState({ files: [...acceptedFiles.map(file => ({ file, status: "uploading" })), ...this.state.files] }); const onComplete = (file, status, skylink) => { this.setState(state => { const index = state.files.findIndex(f => f.file === file); return { files: [ ...state.files.slice(0, index), { ...state.files[index], status, url: `https://siasky.net/${skylink}` }, ...state.files.slice(index + 1) ] }; }); }; acceptedFiles.forEach(async file => { try { const fd = new FormData(); fd.append("file", file); const uuid = shortid.generate(); const response = await fetch(`/skynet/skyfile/${uuid}`, { method: "POST", body: fd }); const { skylink } = await response.json(); onComplete(file, "complete", skylink); } catch (error) { onComplete(file, "error"); } }); }; handleSkylink = event => { event.preventDefault(); const skylink = event.target.skylink.value.replace("sia://", ""); if (skylink.match(/^[a-zA-Z0-9_-]{46}$/)) { window.open(skylink, "_blank"); } }; render() { return (
this.handleDrop(acceptedFiles)}> {({ getRootProps, getInputProps, isDragActive }) => ( <>

Upload your Files

Drop your files here to pin to Skynet
)}

Paste the link to retrieve your file

{this.state.files.length > 0 && (
{this.state.files.map((file, i) => { return ; })}
)}

Upon uploading a file, Skynet generates a 46 byte link called a Skylink. This link can then be shared with anyone to retrieve the file on any Skynet Webportal.

); } }