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/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js

99 lines
2.9 KiB
JavaScript
Raw Normal View History

2020-02-12 17:23:10 +00:00
import React, { Component } from 'react'
import classNames from 'classnames'
import Dropzone from 'react-dropzone'
import Reveal from 'react-reveal/Reveal'
import { Button, UploadFile } from '../'
import { Deco3, Deco4, Deco5 } from '../../svg'
import './HomeUpload.scss'
export default class HomeUpload extends Component {
state = { files: [] }
handleDrop = async acceptedFiles => {
this.setState({
files: [
...acceptedFiles.map(file => {
return { file, status: 'uploading' }
}),
...this.state.files,
],
})
acceptedFiles.forEach(async (file) => {
const url = `https://siasky.net/api/skyfile?filename=${file.name}`
const fd = new FormData()
fd.append("file", file)
const onComplete = (status, skylink) => {
this.setState((state) => {
const index = state.files.findIndex((f) => f.file === file);
return {
files: [
...state.files.slice(0, index),
2020-02-12 17:42:43 +00:00
{ ...state.files[index], status, url: `https://siasky.net/${skylink}` },
2020-02-12 17:23:10 +00:00
...state.files.slice(index + 1)
]
}
})
}
try {
const response = await fetch(url, {
method: "POST",
body: fd,
mode: "cors"
});
const { skylink } = await response.json();
onComplete('complete', skylink);
} catch(error) {
onComplete('error');
}
})
}
render() {
return (
<Reveal effect="active">
<div className="home-upload">
<div className="home-upload-box fadeInUp delay6">
<Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
{({ getRootProps, getInputProps, isDragActive }) => (
<>
<div
className={classNames('home-upload-dashed', { 'drop-active': isDragActive })}
{...getRootProps()}
>
<span className="home-upload-text">Drag &amp; drop your file(s) here to pin</span>
<Button>Browse</Button>
</div>
<input {...getInputProps()} className="offscreen" />
</>
)}
</Dropzone>
{this.state.files.length > 0 && (
<div className="home-uploaded-files">
{this.state.files.map((file, i) => {
return <UploadFile key={i} {...file} />
})}
</div>
)}
</div>
<p className="bottom-text fadeInUp delay8">
Once a file has been uploaded, a 46 byte link called a 'Skylink' is generated. That link can then be shared
with anyone to fetch the file from Skynet.
</p>
<Deco3 className="deco-3 fadeInUp delay8" />
<Deco4 className="deco-4 fadeInUp delay8" />
<Deco5 className="deco-5 fadeInUp delay8" />
</div>
</Reveal>
)
}
}