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

Upload your Files

Drop your files here to pin to Skynet
)}

Paste the link to retrieve your file

{files.length > 0 && (
{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.

); }