This commit is contained in:
Alex 2022-02-28 21:52:20 +01:00
parent 7e324ec541
commit 552aa6fe38
Signed by: lx
GPG key ID: 0E496D15096376BE
5 changed files with 30 additions and 59 deletions

View file

@ -1,11 +1,9 @@
import React from 'react'; import React from 'react';
import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3'; import { S3Client } from '@aws-sdk/client-s3';
import { import {
HashRouter, HashRouter,
Link,
Routes, Routes,
Route, Route,
PathRouteProps,
} from "react-router-dom"; } from "react-router-dom";
import BucketList from './BucketList'; import BucketList from './BucketList';
import { ObjectList1, ObjectList2 } from './ObjectList'; import { ObjectList1, ObjectList2 } from './ObjectList';
@ -30,10 +28,6 @@ class App extends React.Component<AppProps, AppState> {
client: null, client: null,
}; };
constructor(props: AppProps) {
super(props);
}
handleChangeAccessKeyId = (e: React.ChangeEvent<HTMLInputElement>): void => { handleChangeAccessKeyId = (e: React.ChangeEvent<HTMLInputElement>): void => {
this.setState({accessKeyId: e.currentTarget.value}); this.setState({accessKeyId: e.currentTarget.value});
} }
@ -89,17 +83,11 @@ class App extends React.Component<AppProps, AppState> {
<Form.Group className="mb-3" controlId="formAccessKeyId"> <Form.Group className="mb-3" controlId="formAccessKeyId">
<Form.Label>Access key ID</Form.Label> <Form.Label>Access key ID</Form.Label>
<Form.Control type="text" placeholder="Access key id" value={ this.state.accessKeyId } onChange={this.handleChangeAccessKeyId} /> <Form.Control type="text" placeholder="Access key id" value={ this.state.accessKeyId } onChange={this.handleChangeAccessKeyId} />
<Form.Text className="text-muted">
Hello!
</Form.Text>
</Form.Group> </Form.Group>
<Form.Group className="mb-3" controlId="formSecretAccessKey"> <Form.Group className="mb-3" controlId="formSecretAccessKey">
<Form.Label>Secret access key</Form.Label> <Form.Label>Secret access key</Form.Label>
<Form.Control type="text" placeholder="Secret access key" value={ this.state.secretAccessKey } onChange={this.handleChangeSecreteAccessKey} /> <Form.Control type="text" placeholder="Secret access key" value={ this.state.secretAccessKey } onChange={this.handleChangeSecreteAccessKey} />
<Form.Text className="text-muted">
world!
</Form.Text>
</Form.Group> </Form.Group>
<Button variant="primary" type="submit" onClick={this.login}> <Button variant="primary" type="submit" onClick={this.login}>

View file

@ -1,12 +1,13 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom';
import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3'; import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';
import Breadcrumb from 'react-bootstrap/Breadcrumb'; import Breadcrumb from 'react-bootstrap/Breadcrumb';
import Card from 'react-bootstrap/Card'; import Container from 'react-bootstrap/Container';
import ListGroup from 'react-bootstrap/ListGroup'; import ListGroup from 'react-bootstrap/ListGroup';
import { LinkContainer } from 'react-router-bootstrap' import { LinkContainer } from 'react-router-bootstrap'
import { BsBucket } from 'react-icons/bs';
type Props = { type Props = {
client: S3Client; client: S3Client;
@ -37,14 +38,16 @@ class BucketList extends React.Component<Props, State> {
render() { render() {
return ( return (
<> <>
<Breadcrumb> <Container className="pb-3">
<Breadcrumb.Item active>my buckets</Breadcrumb.Item> <Breadcrumb>
</Breadcrumb> <Breadcrumb.Item active>my buckets</Breadcrumb.Item>
</Breadcrumb>
</Container>
<ListGroup> <ListGroup>
{ this.state.buckets.map((b) => { this.state.buckets.map((b) =>
<LinkContainer to={ "/" + b }> <LinkContainer to={ "/" + b }>
<ListGroup.Item key={ b } action> <ListGroup.Item key={ b } action>
{ b } <BsBucket /> { b }
</ListGroup.Item> </ListGroup.Item>
</LinkContainer> </LinkContainer>
)} )}

View file

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { Link, useParams } from 'react-router-dom'; import { S3Client, HeadObjectCommand } from '@aws-sdk/client-s3';
import { S3Client, ListObjectsV2Command, HeadObjectCommand } from '@aws-sdk/client-s3';
import Button from 'react-bootstrap/Button'; import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal'; import Modal from 'react-bootstrap/Modal';
@ -31,10 +30,6 @@ class ObjectInfo extends React.Component<Props, State> {
contentType: "", contentType: "",
}; };
constructor(props: Props) {
super(props);
}
async componentDidMount() { async componentDidMount() {
let command = new HeadObjectCommand({ let command = new HeadObjectCommand({
Bucket: this.props.bucket, Bucket: this.props.bucket,

View file

@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import { Link, useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { S3Client, ListObjectsV2Command, GetObjectCommand, DeleteObjectCommand } from '@aws-sdk/client-s3'; import { S3Client, ListObjectsV2Command, DeleteObjectCommand } from '@aws-sdk/client-s3';
import Alert from 'react-bootstrap/Alert'; import Alert from 'react-bootstrap/Alert';
import Breadcrumb from 'react-bootstrap/Breadcrumb'; import Breadcrumb from 'react-bootstrap/Breadcrumb';
import Button from 'react-bootstrap/Button'; import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container'; import Container from 'react-bootstrap/Container';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup'; import ListGroup from 'react-bootstrap/ListGroup';
import Stack from 'react-bootstrap/Stack'; import Stack from 'react-bootstrap/Stack';
import { LinkContainer } from 'react-router-bootstrap' import { LinkContainer } from 'react-router-bootstrap'
@ -45,15 +44,11 @@ class ObjectList extends React.Component<Props, State> {
iUpload: 0, iUpload: 0,
}; };
constructor(props: Props) {
super(props);
}
componentDidMount() { componentDidMount() {
//console.log(this.props); //console.log(this.props);
if (cache[this.path()]) { if (cache[this.fullPathWithBucket()]) {
this.setState(cache[this.path()]); this.setState(cache[this.fullPathWithBucket()]);
} }
this.loadEntries(); this.loadEntries();
@ -82,13 +77,13 @@ class ObjectList extends React.Component<Props, State> {
folders: folders, folders: folders,
files: files, files: files,
}); });
cache[this.path()] = this.state; cache[this.fullPathWithBucket()] = this.state;
} catch(error) { } catch(error) {
console.log("err", error); console.log("err", error);
} }
} }
path() { fullPathWithBucket() {
return this.props.bucket + "/" + this.props.prefix; return this.props.bucket + "/" + this.props.prefix;
} }
@ -114,7 +109,7 @@ class ObjectList extends React.Component<Props, State> {
<LinkContainer key="BUCKETS" to="/"> <LinkContainer key="BUCKETS" to="/">
<Breadcrumb.Item>my buckets</Breadcrumb.Item> <Breadcrumb.Item>my buckets</Breadcrumb.Item>
</LinkContainer> </LinkContainer>
{ this.props.prefix == "" ? { this.props.prefix === "" ?
<Breadcrumb.Item active>{ this.props.bucket }</Breadcrumb.Item> <Breadcrumb.Item active>{ this.props.bucket }</Breadcrumb.Item>
: :
<LinkContainer key="BUCKET" to={ "/" + this.props.bucket + "/" }> <LinkContainer key="BUCKET" to={ "/" + this.props.bucket + "/" }>
@ -137,7 +132,7 @@ class ObjectList extends React.Component<Props, State> {
Bucket: this.props.bucket, Bucket: this.props.bucket,
Key: this.props.prefix + f, Key: this.props.prefix + f,
}); });
let res = await this.props.client.send(command); await this.props.client.send(command);
this.loadEntries(); this.loadEntries();
} }
} }
@ -227,12 +222,6 @@ class ObjectList extends React.Component<Props, State> {
} }
} }
function isBlob(obj: any): obj is Blob {
return !! obj;
}
interface IClient { interface IClient {
client: S3Client; client: S3Client;
} }

View file

@ -1,16 +1,14 @@
import React from 'react'; import React from 'react';
import { Link, useParams } from 'react-router-dom'; import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import { S3Client, ListObjectsV2Command, HeadObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3';
import Button from 'react-bootstrap/Button'; import Button from 'react-bootstrap/Button';
import ListGroup from 'react-bootstrap/ListGroup'; import ListGroup from 'react-bootstrap/ListGroup';
import Modal from 'react-bootstrap/Modal'; import Modal from 'react-bootstrap/Modal';
import Stack from 'react-bootstrap/Stack'; import Stack from 'react-bootstrap/Stack';
import { BsFileEarmarkText, BsDownload, BsHourglassSplit, BsCheckCircle } from 'react-icons/bs'; import { BsFileEarmarkText, BsHourglassSplit, BsCheckCircle } from 'react-icons/bs';
import { AiOutlineDelete } from 'react-icons/ai'; import { AiOutlineDelete } from 'react-icons/ai';
import downloadFile from './downloadFile';
import fileSizePretty from './fileSizePretty'; import fileSizePretty from './fileSizePretty';
interface Props { interface Props {
@ -41,10 +39,6 @@ class UploadFiles extends React.Component<Props, State> {
progressEach: [], progressEach: [],
}; };
constructor(props: Props) {
super(props);
}
async componentDidMount() { async componentDidMount() {
this.addFile(); this.addFile();
} }
@ -75,15 +69,17 @@ class UploadFiles extends React.Component<Props, State> {
} }
async processUpload() { async processUpload() {
var i: number;
this.setState({canceled: false}); this.setState({canceled: false});
let progressEach: number[] = []; let progressEach: number[] = [];
for (var i = 0; i < this.state.files.length; i++) { for (i = 0; i < this.state.files.length; i++) {
progressEach.push(0); progressEach.push(0);
} }
this.setState({canceled: false, processing: true, progressEach: progressEach}); this.setState({canceled: false, processing: true, progressEach: progressEach});
for (var i = 0; i < this.state.files.length; i++) { for (i = 0; i < this.state.files.length; i++) {
let file: File = this.state.files[i]; let file: File = this.state.files[i];
let req = new PutObjectCommand({ let req = new PutObjectCommand({
Bucket: this.props.bucket, Bucket: this.props.bucket,
@ -92,7 +88,7 @@ class UploadFiles extends React.Component<Props, State> {
ContentLength: file.size, ContentLength: file.size,
Body: file, Body: file,
}); });
let resp = await this.props.client.send(req); await this.props.client.send(req);
progressEach[i] = 100; progressEach[i] = 100;
this.setState({progressEach: progressEach}); this.setState({progressEach: progressEach});
} }
@ -117,7 +113,7 @@ class UploadFiles extends React.Component<Props, State> {
onChange={() => this.handleFileChange()} onChange={() => this.handleFileChange()}
multiple multiple
hidden /> hidden />
{ this.state.files.length == 0 ? <p>No files added yet, click "add file" below.</p> : <></> } { this.state.files.length === 0 ? <p>No files added yet, click "add file" below.</p> : <></> }
<ListGroup> <ListGroup>
{ this.state.files.map((f: File, i: number) => { this.state.files.map((f: File, i: number) =>
<ListGroup.Item> <ListGroup.Item>
@ -127,7 +123,7 @@ class UploadFiles extends React.Component<Props, State> {
</div> </div>
<div className="ms-auto"> <div className="ms-auto">
{ this.state.processing ? { this.state.processing ?
(this.state.progressEach[i] == 100 ? <BsCheckCircle /> (this.state.progressEach[i] === 100 ? <BsCheckCircle />
: this.state.progressEach[i] > 0 ? this.state.progressEach[i] + "%" : this.state.progressEach[i] > 0 ? this.state.progressEach[i] + "%"
: <BsHourglassSplit /> ) : <BsHourglassSplit /> )
: :
@ -139,7 +135,7 @@ class UploadFiles extends React.Component<Props, State> {
</Stack> </Stack>
<Stack direction="horizontal"> <Stack direction="horizontal">
<div className="px-2">&nbsp;</div> <div className="px-2">&nbsp;</div>
<div className="small"> <div className="text-muted small">
{ fileSizePretty(f.size) } - { f.type } { fileSizePretty(f.size) } - { f.type }
</div> </div>
</Stack> </Stack>
@ -151,7 +147,7 @@ class UploadFiles extends React.Component<Props, State> {
<Button variant="success" onClick={() => this.addFile()}> <Button variant="success" onClick={() => this.addFile()}>
Add file Add file
</Button> </Button>
<Button variant="primary" onClick={() => this.processUpload()} disabled={this.state.files.length == 0}> <Button variant="primary" onClick={() => this.processUpload()} disabled={this.state.files.length === 0}>
Upload Upload
</Button> </Button>
</Modal.Footer> </Modal.Footer>