diff --git a/packages/sia-skynet/src/components/CodeExamples/CodeExamples.scss b/packages/sia-skynet/src/components/CodeExamples/CodeExamples.scss index 53efe9ea..b174a0ff 100644 --- a/packages/sia-skynet/src/components/CodeExamples/CodeExamples.scss +++ b/packages/sia-skynet/src/components/CodeExamples/CodeExamples.scss @@ -18,6 +18,11 @@ background-color: #343734; transition: 0.2s line-height, 0.2s background-color, 0.2s color; text-align: center; + font-size: 14px; + + @media (min-width: 360px) { + font-size: 16px; + } @media (min-width: $largebp) { padding: 0 32px; diff --git a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js index 8313a667..80f88644 100644 --- a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js +++ b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js @@ -1,33 +1,33 @@ -import React, { Component } from "react"; -import classNames from "classnames"; -import Dropzone from "react-dropzone"; -import Reveal from "react-reveal/Reveal"; +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, Folder, DownArrow } from "../../svg"; -import "./HomeUpload.scss"; +import { Button, UploadFile } from '../' +import { Deco3, Deco4, Deco5, Folder, DownArrow } from '../../svg' +import './HomeUpload.scss' export default class HomeUpload extends Component { - state = { files: [] }; + state = { files: [] } handleDrop = async acceptedFiles => { this.setState({ files: [ ...acceptedFiles.map(file => { - return { file, status: "uploading" }; + return { file, status: 'uploading' } }), - ...this.state.files - ] - }); + ...this.state.files, + ], + }) acceptedFiles.forEach(async file => { - const url = `/api/skyfile?filename=${file.name}`; - const fd = new FormData(); - fd.append("file", file); + const url = `/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); + const index = state.files.findIndex(f => f.file === file) return { files: [ @@ -35,36 +35,36 @@ export default class HomeUpload extends Component { { ...state.files[index], status, - url: `https://siasky.net/${skylink}` + url: `https://siasky.net/${skylink}`, }, - ...state.files.slice(index + 1) - ] - }; - }); - }; + ...state.files.slice(index + 1), + ], + } + }) + } try { const response = await fetch(url, { - method: "POST", + method: 'POST', body: fd, - mode: "cors" - }); - const { skylink } = await response.json(); + mode: 'cors', + }) + const { skylink } = await response.json() - onComplete("complete", skylink); + onComplete('complete', skylink) } catch (error) { - onComplete("error"); + onComplete('error') } - }); - }; + }) + } - handleSkylink = (event) => { - event.preventDefault(); + handleSkylink = event => { + event.preventDefault() - const skylink = event.target.skylink.value.replace('sia://', ''); + const skylink = event.target.skylink.value.replace('sia://', '') - if(skylink.match(/^[a-zA-Z0-9_-]{46}$/)) { - window.open(`/${event.target.skylink.value}`, '_blank'); + if (skylink.match(/^[a-zA-Z0-9_-]{46}$/)) { + window.open(`/${event.target.skylink.value}`, '_blank') } } @@ -75,14 +75,12 @@ export default class HomeUpload extends Component {
- this.handleDrop(acceptedFiles)} - > + this.handleDrop(acceptedFiles)}> {({ getRootProps, getInputProps, isDragActive }) => ( <>
@@ -99,14 +97,6 @@ export default class HomeUpload extends Component { )} - - {this.state.files.length > 0 && ( -
- {this.state.files.map((file, i) => { - return ; - })} -
- )}
@@ -123,12 +113,19 @@ export default class HomeUpload extends Component {
+ + {this.state.files.length > 0 && ( +
+ {this.state.files.map((file, i) => { + return + })} +
+ )}

- 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. + 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.

@@ -136,6 +133,6 @@ export default class HomeUpload extends Component { - ); + ) } }