woggioni-opencode-agent/bee-dashboard
1
0
Fork 0
Code Actions Packages Releases Activity

feat: add website and folder upload and download (#260)

Browse Source 
* feat: add website and folder upload and download

* feat: download-share-upload navigation

* fix: check for files length in hasIndexDocument

* fix: change router dependency

* refactor: switch to @ethersphere/manfest-js

* fix: hide previews on dropzone, fix spinner align, hide 0 size display

* feat: add upload and download history

* refactor: change drag and drop text

* feat: make history ux better

* refactor: improve code based on review

* build: add missing react-router dependency

* ci: remove beeload

* revert(ci): remove beeload

This reverts commit 4ce6cb0045a2d9aea3047ab395d214d8d368c532.
This commit is contained in:
Cafe137
2021-12-07 16:06:21 +01:00
committed by GitHub
parent dec812be45
commit 3ef1ad9574
26 changed files with 839 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/files/AssetPreview.tsx
+12 -5
View File
@@ -3,15 +3,18 @@ import { Web } from '@material-ui/icons'
import { ReactElement, useEffect, useState } from 'react'
import { File, Folder } from 'react-feather'
import { FitImage } from '../../components/FitImage'
import { detectIndexHtml, getHumanReadableFileSize } from '../../utils/file'
import { detectIndexHtml, getAssetNameFromFiles, getHumanReadableFileSize } from '../../utils/file'
import { SwarmFile } from '../../utils/SwarmFile'
import { AssetIcon } from './AssetIcon'
interface Props {
assetName?: string
files: SwarmFile[]
}
export function AssetPreview({ files }: Props): ReactElement {
// TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)
export function AssetPreview({ assetName, files }: Props): ReactElement {
const [previewComponent, setPreviewComponent] = useState<ReactElement | undefined>(undefined)
const [previewUri, setPreviewUri] = useState<string | undefined>(undefined)
@@ -39,11 +42,13 @@ export function AssetPreview({ files }: Props): ReactElement {
}, [files])
const getPrimaryText = () => {
const name = getAssetNameFromFiles(files)
if (files.length === 1) {
return 'Filename: ' + files[0].name
return 'Filename: ' + (assetName || name)
}
return 'Folder name: ' + files[0].path.split('/')[0]
return 'Folder name: ' + (assetName || name)
}
const getKind = () => {
@@ -66,6 +71,8 @@ export function AssetPreview({ files }: Props): ReactElement {
return getHumanReadableFileSize(bytes)
}
const size = getSize()
return (
<Box mb={4}>
<Box bgcolor="background.paper">
@@ -78,7 +85,7 @@ export function AssetPreview({ files }: Props): ReactElement {
<Box p={2}>
<Typography>{getPrimaryText()}</Typography>
<Typography>Kind: {getKind()}</Typography>
<Typography>Size: {getSize()}</Typography>
{size !== '0 bytes' && <Typography>Size: {size}</Typography>}
</Box>
</Grid>
</Box>
src/pages/files/AssetSummary.tsx
+24
View File
@@ -0,0 +1,24 @@
import { Box, Typography } from '@material-ui/core'
import { ReactElement } from 'react'
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
import ExpandableListItemLink from '../../components/ExpandableListItemLink'
interface Props {
hash: string
}
export function AssetSummary({ hash }: Props): ReactElement {
return (
<>
<Box mb={4}>
<ExpandableListItemKey label="Swarm hash" value={hash} />
<ExpandableListItemLink label="Share on Swarm Gateway" value={`https://gateway.ethswarm.org/access/${hash}`} />
</Box>
<Typography>
The Swarm Gateway is graciously provided by the Swarm Foundation. This service is under development and provided
for testing purposes only. Learn more at{' '}
<a href="https://gateway.ethswarm.org/">https://gateway.ethswarm.org/</a>.
</Typography>
</>
)
}
src/pages/files/Download.tsx
+42 -41
View File
@@ -1,41 +1,47 @@
import { Utils } from '@ethersphere/bee-js'
import { Box } from '@material-ui/core'
import { ManifestJs } from '@ethersphere/manifest-js'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useState } from 'react'
import { useHistory } from 'react-router-dom'
import ExpandableListItemInput from '../../components/ExpandableListItemInput'
import { History } from '../../components/History'
import { Context as SettingsContext } from '../../providers/Settings'
import { ROUTES } from '../../routes'
import { extractSwarmHash } from '../../utils'
import { convertBeeFileToBrowserFile } from '../../utils/file'
import { SwarmFile } from '../../utils/SwarmFile'
import { AssetPreview } from './AssetPreview'
import { DownloadActionBar } from './DownloadActionBar'
import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
import { FileNavigation } from './FileNavigation'
export default function Files(): ReactElement {
const { apiUrl, beeApi } = useContext(SettingsContext)
const [reference, setReference] = useState('')
export function Download(): ReactElement {
const [loading, setLoading] = useState(false)
const { beeApi } = useContext(SettingsContext)
const [referenceError, setReferenceError] = useState<string | undefined>(undefined)
const [downloadedFile, setDownloadedFile] = useState<Partial<File> | null>(null)
const { enqueueSnackbar } = useSnackbar()
const history = useHistory()
const validateChange = (value: string) => {
if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128)) setReferenceError(undefined)
else setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
}
function onDownload() {
window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128) || !value.trim().length) {
setReferenceError(undefined)
} else {
setReferenceError('Incorrect format of swarm hash. Expected 64 or 128 hexstring characters.')
}
}
async function onSwarmIdentifier(identifier: string) {
if (!beeApi) {
return
}
setReference(identifier)
try {
const response = await beeApi.downloadFile(identifier)
setDownloadedFile(convertBeeFileToBrowserFile(response))
const manifestJs = new ManifestJs(beeApi)
const isManifest = await manifestJs.isManifest(identifier)
if (!isManifest) {
throw Error('The specified hash does not contain valid content.')
}
const indexDocument = await manifestJs.getIndexDocumentPath(identifier)
putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, identifier, determineHistoryName(identifier, indexDocument))
history.push(ROUTES.HASH.replace(':hash', identifier))
} catch (error: unknown) {
let message = typeof error === 'object' && error !== null && Reflect.get(error, 'message')
@@ -47,20 +53,11 @@ export default function Files(): ReactElement {
message = 'The specified hash was not found.'
}
enqueueSnackbar(<span>Error: {message || 'Unknown'}</span>, { variant: 'error' })
} finally {
setLoading(false)
}
}
if (downloadedFile) {
return (
<>
<Box mb={4}>
<AssetPreview files={[new SwarmFile(downloadedFile as File)]} />
</Box>
<DownloadActionBar onCancel={() => setDownloadedFile(null)} onDownload={onDownload} />
</>
)
}
function recognizeSwarmHash(value: string) {
if (value.length < 64) {
return value
@@ -76,16 +73,20 @@ export default function Files(): ReactElement {
}
return (
<ExpandableListItemInput
label="Swarm Hash"
onConfirm={value => onSwarmIdentifier(value)}
onChange={validateChange}
helperText={referenceError}
confirmLabel={'Search'}
confirmLabelDisabled={Boolean(referenceError)}
placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
expandedOnly
mapperFn={value => recognizeSwarmHash(value)}
/>
<>
<FileNavigation active="DOWNLOAD" />
<ExpandableListItemInput
label="Swarm Hash"
onConfirm={value => onSwarmIdentifier(value)}
onChange={validateChange}
helperText={referenceError}
confirmLabel={'Search'}
confirmLabelDisabled={Boolean(referenceError) || loading}
placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
expandedOnly
mapperFn={value => recognizeSwarmHash(value)}
/>
<History title="Download History" localStorageKey={HISTORY_KEYS.DOWNLOAD_HISTORY} />
</>
)
}
src/pages/files/DownloadActionBar.tsx
+14 -6
View File
@@ -1,23 +1,31 @@
import { Button } from '@material-ui/core'
import { Clear } from '@material-ui/icons'
import { ReactElement } from 'react'
import { Download } from 'react-feather'
import { Download, Link } from 'react-feather'
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import { SwarmButton } from '../../components/SwarmButton'
interface Props {
onOpen: () => void
onDownload: () => void
onCancel: () => void
hasIndexDocument: boolean
loading: boolean
}
export function DownloadActionBar({ onDownload, onCancel }: Props): ReactElement {
export function DownloadActionBar({ onOpen, onDownload, onCancel, hasIndexDocument, loading }: Props): ReactElement {
return (
<ExpandableListItemActions>
<SwarmButton onClick={onDownload} iconType={Download}>
Download This File
{hasIndexDocument && (
<SwarmButton onClick={onOpen} iconType={Link} disabled={loading}>
View Website
</SwarmButton>
)}
<SwarmButton onClick={onDownload} iconType={Download} disabled={loading} loading={loading}>
Download
</SwarmButton>
<Button onClick={onCancel} variant="contained" startIcon={<Clear />}>
Cancel
<Button onClick={onCancel} variant="contained" startIcon={<Clear />} disabled={loading}>
Close
</Button>
</ExpandableListItemActions>
)
src/pages/files/FileNavigation.tsx
+41
View File
@@ -0,0 +1,41 @@
import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
import { ReactElement } from 'react'
import { useHistory } from 'react-router-dom'
import { ROUTES } from '../../routes'
interface Props {
active: 'UPLOAD' | 'DOWNLOAD'
}
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1,
marginBottom: theme.spacing(4),
},
leftTab: {
marginRight: theme.spacing(0.5),
},
rightTab: {
marginLeft: theme.spacing(0.5),
},
}),
)
export function FileNavigation({ active }: Props): ReactElement {
const classes = useStyles()
const history = useHistory()
function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
history.push(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD)
}
return (
<div className={classes.root}>
<Tabs value={active === 'UPLOAD' ? 0 : 1} onChange={onChange} variant="fullWidth">
<Tab className={classes.leftTab} key="UPLOAD" label="Upload" />
<Tab className={classes.rightTab} key="DOWNLOAD" label="Download" />
</Tabs>
</div>
)
}
src/pages/files/PostUploadSummary.tsx
-38
View File
@@ -1,38 +0,0 @@
import { Box, Typography } from '@material-ui/core'
import { ReactElement } from 'react'
import { CornerUpLeft } from 'react-feather'
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
import ExpandableListItemLink from '../../components/ExpandableListItemLink'
import { SwarmButton } from '../../components/SwarmButton'
interface Props {
uploadReference: string
onUploadNewClick: () => void
}
export function PostUploadSummary({ uploadReference, onUploadNewClick }: Props): ReactElement {
return (
<>
<Box mb={4}>
<ExpandableListItemKey label="Swarm hash" value={uploadReference} />
<ExpandableListItemLink
label="Share on Swarm Gateway"
value={`https://gateway.ethswarm.org/access/${uploadReference}`}
/>
</Box>
<Box mb={2}>
<ExpandableListItemActions>
<SwarmButton onClick={onUploadNewClick} iconType={CornerUpLeft}>
Back to Upload
</SwarmButton>
</ExpandableListItemActions>
</Box>
<Typography>
The Swarm Gateway is graciously provided by the Swarm Foundation. This service is under development and provided
for testing purposes only. Learn more at{' '}
<a href="https://gateway.ethswarm.org/">https://gateway.ethswarm.org/</a>.
</Typography>
</>
)
}
src/pages/files/Share.tsx
+121
View File
@@ -0,0 +1,121 @@
import { ManifestJs } from '@ethersphere/manifest-js'
import { Box } from '@material-ui/core'
import { saveAs } from 'file-saver'
import JSZip from 'jszip'
import { ReactElement, useContext, useEffect, useState } from 'react'
import { RouteComponentProps, useHistory } from 'react-router-dom'
import { Loading } from '../../components/Loading'
import { Context as SettingsContext } from '../../providers/Settings'
import { ROUTES } from '../../routes'
import { convertBeeFileToBrowserFile, convertManifestToFiles } from '../../utils/file'
import { shortenHash } from '../../utils/hash'
import { determineHistoryName, HISTORY_KEYS, putHistory } from '../../utils/local-storage'
import { SwarmFile } from '../../utils/SwarmFile'
import { AssetPreview } from './AssetPreview'
import { AssetSummary } from './AssetSummary'
import { DownloadActionBar } from './DownloadActionBar'
interface MatchParams {
hash: string
}
export function Share(props: RouteComponentProps<MatchParams>): ReactElement {
const { apiUrl, beeApi } = useContext(SettingsContext)
const reference = props.match.params.hash
const history = useHistory()
const [loading, setLoading] = useState(true)
const [downloading, setDownloading] = useState(false)
const [files, setFiles] = useState<SwarmFile[]>([])
const [swarmEntries, setSwarmEntries] = useState<Record<string, string>>({})
const [indexDocument, setIndexDocument] = useState<string | null>(null)
async function prepare() {
if (!beeApi) {
return
}
const manifestJs = new ManifestJs(beeApi)
const isManifest = await manifestJs.isManifest(reference)
if (!isManifest) {
throw Error('The specified hash does not contain valid content.')
}
const entries = await manifestJs.getHashes(reference)
setSwarmEntries(entries)
const indexDocument = await manifestJs.getIndexDocumentPath(reference)
setIndexDocument(indexDocument)
if (Object.keys(entries).length === 1) {
const response = await beeApi.downloadFile(reference)
setFiles([new SwarmFile(convertBeeFileToBrowserFile(response) as File)])
} else {
setFiles(convertManifestToFiles(entries))
}
}
function onOpen() {
window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
}
function onClose() {
// POP means there is no history - nowhere to go back yet
if (history.action === 'POP') {
history.push(ROUTES.UPLOAD)
} else {
history.goBack()
}
}
useEffect(() => {
setLoading(true)
prepare().then(() => {
setLoading(false)
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [reference])
async function onDownload() {
if (!beeApi) {
return
}
putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, reference, determineHistoryName(reference, indexDocument))
setDownloading(true)
if (Object.keys(swarmEntries).length === 1) {
window.open(`${apiUrl}/bzz/${reference}/`, '_blank')
} else {
const zip = new JSZip()
for (const [path, hash] of Object.entries(swarmEntries)) {
zip.file(path, await beeApi.downloadData(hash))
}
const content = await zip.generateAsync({ type: 'blob' })
saveAs(content, reference + '.zip')
}
setDownloading(false)
}
const assetName = shortenHash(reference)
if (loading) {
return <Loading />
}
return (
<>
<Box mb={4}>
<AssetPreview files={files} assetName={assetName} />
</Box>
<Box mb={4}>
<AssetSummary hash={reference} />
</Box>
<DownloadActionBar
onOpen={onOpen}
onCancel={onClose}
onDownload={onDownload}
hasIndexDocument={Boolean(indexDocument && files.length > 1)}
loading={downloading}
/>
</>
)
}
src/pages/files/Upload.tsx
+27 -43
View File
@@ -1,32 +1,20 @@
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import { useSnackbar } from 'notistack'
import { ReactElement, useContext, useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { HistoryHeader } from '../../components/HistoryHeader'
import { Context as FileContext } from '../../providers/File'
import { Context as SettingsContext } from '../../providers/Settings'
import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
import { detectIndexHtml } from '../../utils/file'
import { SwarmFile } from '../../utils/SwarmFile'
import { ROUTES } from '../../routes'
import { detectIndexHtml, getAssetNameFromFiles } from '../../utils/file'
import { HISTORY_KEYS, putHistory } from '../../utils/local-storage'
import { CreatePostageStampModal } from '../stamps/CreatePostageStampModal'
import { SelectPostageStampModal } from '../stamps/SelectPostageStampModal'
import { AssetPreview } from './AssetPreview'
import { PostUploadSummary } from './PostUploadSummary'
import { StampPreview } from './StampPreview'
import { UploadActionBar } from './UploadActionBar'
import { UploadArea } from './UploadArea'
const useStyles = makeStyles((theme: Theme) =>
createStyles({
content: { marginTop: theme.spacing(2) },
loadingProgress: { textAlign: 'center', padding: '50px' },
}),
)
const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
export default function Files(): ReactElement {
const classes = useStyles()
const [dropzoneKey, setDropzoneKey] = useState(0)
const [files, setFiles] = useState<SwarmFile[]>([])
const [uploadReference, setUploadReference] = useState('')
export function Upload(): ReactElement {
const [isBuyingStamp, setBuyingStamp] = useState(false)
const [isSelectingStamp, setSelectingStamp] = useState(false)
const [stamp, setStamp] = useState<EnrichedPostageBatch | null>(null)
@@ -34,7 +22,14 @@ export default function Files(): ReactElement {
const { stamps, refresh } = useContext(Context)
const { beeApi } = useContext(SettingsContext)
const { files, setFiles } = useContext(FileContext)
const { enqueueSnackbar } = useSnackbar()
const history = useHistory()
if (!files.length) {
setFiles([])
history.replace(ROUTES.UPLOAD)
}
useEffect(() => {
refresh()
@@ -51,9 +46,14 @@ export default function Files(): ReactElement {
beeApi
.uploadFiles(stamp.batchID, files as unknown as File[], { indexDocument })
.then(hash => setUploadReference(hash.reference))
.catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
.finally(() => setUploading(false))
.then(hash => {
putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))
history.replace(ROUTES.HASH.replace(':hash', hash.reference))
})
.catch(e => {
enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' })
setUploading(false)
})
}
const reset = () => {
@@ -62,23 +62,12 @@ export default function Files(): ReactElement {
setUploading(false)
}
const uploadNew = () => {
setTimeout(() => {
reset()
setDropzoneKey(dropzoneKey + 1)
setUploadReference('')
}, 0)
}
return (
<>
{files.length ? (
<AssetPreview files={files} />
) : (
<UploadArea maximumSizeInBytes={MAX_FILE_SIZE} setFiles={setFiles} />
)}
{stamp !== null && !uploadReference ? <StampPreview stamp={stamp} /> : null}
{files.length && !uploadReference ? (
<HistoryHeader>Upload</HistoryHeader>
{files.length && <AssetPreview files={files} />}
{stamp !== null ? <StampPreview stamp={stamp} /> : null}
{files.length && (
<UploadActionBar
canSelectStamp={stamps !== null && stamps.length > 0}
hasSelectedStamp={stamp !== null}
@@ -89,12 +78,7 @@ export default function Files(): ReactElement {
onClearStamp={() => setStamp(null)}
isUploading={isUploading}
/>
) : null}
<div className={classes.content}>
{uploadReference && (
<PostUploadSummary onUploadNewClick={() => uploadNew()} uploadReference={uploadReference} />
)}
</div>
)}
{isBuyingStamp ? <CreatePostageStampModal onClose={() => setBuyingStamp(false)} /> : null}
{stamps && isSelectingStamp ? (
<SelectPostageStampModal
src/pages/files/UploadArea.tsx
+41 -13
View File
@@ -1,14 +1,16 @@
import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
import { DropzoneArea } from 'material-ui-dropzone'
import { useSnackbar } from 'notistack'
import { ReactElement } from 'react'
import { FilePlus } from 'react-feather'
import { ReactElement, useContext, useState } from 'react'
import { FilePlus, FolderPlus, PlusCircle } from 'react-feather'
import { useHistory } from 'react-router-dom'
import { SwarmButton } from '../../components/SwarmButton'
import { Context } from '../../providers/File'
import { ROUTES } from '../../routes'
import { detectIndexHtml } from '../../utils/file'
import { SwarmFile } from '../../utils/SwarmFile'
interface Props {
setFiles: (files: SwarmFile[]) => void
maximumSizeInBytes: number
}
@@ -42,15 +44,17 @@ const useStyles = makeStyles((theme: Theme) =>
}),
)
export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElement {
export function UploadArea({ maximumSizeInBytes }: Props): ReactElement {
const { setFiles } = useContext(Context)
const classes = useStyles()
const history = useHistory()
const { enqueueSnackbar } = useSnackbar()
const [strictWebsiteMode, setStrictWebsiteMode] = useState(false)
const [version, setVersion] = useState(0)
const getDropzoneInputDomElement = () => document.querySelector('.MuiDropzoneArea-root input') as HTMLInputElement
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const onUploadFolderClick = () => {
const onUploadCollectionClick = () => {
const element = getDropzoneInputDomElement()
if (element) {
@@ -61,6 +65,16 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
}
}
const onUploadWebsiteClick = () => {
onUploadCollectionClick()
setStrictWebsiteMode(true)
}
const onUploadFolderClick = () => {
onUploadCollectionClick()
setStrictWebsiteMode(false)
}
const onUploadFileClick = () => {
const element = getDropzoneInputDomElement()
@@ -72,9 +86,9 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
}
}
const resetComponentOnAddingInvalidContent = (files: SwarmFile[]) => {
setFiles(files)
const resetComponentOnAddingInvalidContent = () => {
setTimeout(() => {
setVersion(x => x + 1)
setFiles([])
}, 0)
}
@@ -84,16 +98,20 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
const swarmFiles = files.map(x => new SwarmFile(x))
const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(swarmFiles) || undefined
if (files.length && !indexDocument) {
if (files.length && strictWebsiteMode && !indexDocument) {
enqueueSnackbar('To upload a website, there must be an index.html or index.htm in the root of the folder.', {
variant: 'error',
})
resetComponentOnAddingInvalidContent(swarmFiles)
resetComponentOnAddingInvalidContent()
return
}
setFiles(swarmFiles)
if (files.length) {
history.push(ROUTES.UPLOAD_IN_PROGRESS)
}
}
}
@@ -101,9 +119,10 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
<>
<div className={classes.areaWrapper}>
<DropzoneArea
key={version}
dropzoneClass={classes.dropzone}
onChange={handleChange}
filesLimit={1}
filesLimit={1e9}
maxFileSize={maximumSizeInBytes}
showPreviews={false}
/>
@@ -111,9 +130,18 @@ export function UploadArea({ setFiles, maximumSizeInBytes }: Props): ReactElemen
<SwarmButton className={classes.button} onClick={onUploadFileClick} iconType={FilePlus}>
Add File
</SwarmButton>
<SwarmButton className={classes.button} onClick={onUploadFolderClick} iconType={FolderPlus}>
Add Folder
</SwarmButton>
<SwarmButton className={classes.button} onClick={onUploadWebsiteClick} iconType={PlusCircle}>
Add Website
</SwarmButton>
</div>
</div>
<Typography>You can click the button above or simply drag and drop to add a file.</Typography>
<Typography>
You can click the buttons above or simply drag and drop to add a file or folder. To upload a website to Swarm,
make sure that your folder contains an “index.html” file.
</Typography>
</>
)
}
src/pages/files/UploadLander.tsx
+17
View File
@@ -0,0 +1,17 @@
import { ReactElement } from 'react'
import { History } from '../../components/History'
import { HISTORY_KEYS } from '../../utils/local-storage'
import { FileNavigation } from './FileNavigation'
import { UploadArea } from './UploadArea'
const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
export function UploadLander(): ReactElement {
return (
<>
<FileNavigation active="UPLOAD" />
<UploadArea maximumSizeInBytes={MAX_FILE_SIZE} />
<History title="Upload History" localStorageKey={HISTORY_KEYS.UPLOAD_HISTORY} />
</>
)
}
src/pages/files/index.tsx
-28
View File
@@ -1,28 +0,0 @@
import { ReactElement, useContext } from 'react'
import Download from './Download'
import Upload from './Upload'
import TabsContainer from '../../components/TabsContainer'
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
import { Context as BeeContext } from '../../providers/Bee'
export default function Files(): ReactElement {
const { status } = useContext(BeeContext)
if (!status.all) return <TroubleshootConnectionCard />
return (
<TabsContainer
values={[
{
label: 'download',
component: <Download />,
},
{
label: 'upload',
component: <Upload />,
},
]}
/>
)
}