Reformat loading thing

src/ObjectInfo.tsx

@@ -7,6 +7,7 @@ import Modal from 'react-bootstrap/Modal';
 import { BsFileEarmarkText, BsDownload } from 'react-icons/bs';
 
 import downloadFile from './downloadFile';
+import fileSizePretty from './fileSizePretty';
 
 type Props = {
   client: S3Client;
@@ -64,7 +65,7 @@ class ObjectInfo extends React.Component<Props, State> {
           <p><strong>Key:</strong> { this.props.s3key }</p>
           { this.state.loaded ?
             <>
-              <p><strong>Size:</strong> { this.state.size }</p>
+              <p><strong>Size:</strong> { fileSizePretty(this.state.size) }</p>
               <p><strong>Content type:</strong> { this.state.contentType }</p>
             </>
           : <></> }

src/ObjectList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { S3Client, ListObjectsV2Command, GetObjectCommand } from '@aws-sdk/client-s3';
+import { S3Client, ListObjectsV2Command, GetObjectCommand, DeleteObjectCommand } from '@aws-sdk/client-s3';
 
 import Alert from 'react-bootstrap/Alert';
 import Breadcrumb from 'react-bootstrap/Breadcrumb';
@@ -15,7 +15,8 @@ import ObjectInfo from './ObjectInfo';
 import UploadFiles from './UploadFiles';
 import downloadFile from './downloadFile';
 
-import { BsFolder, BsFileEarmarkText, BsDownload } from 'react-icons/bs';
+import { BsInfoCircle, BsFolder, BsFileEarmarkText, BsDownload } from 'react-icons/bs';
+import { AiOutlineDelete } from 'react-icons/ai';
 
 type Props = {
   client: S3Client;
@@ -129,6 +130,18 @@ class ObjectList extends React.Component<Props, State> {
     this.setState({info: f, iInfo: this.state.iInfo + 1});
   }
 
+  async deleteFile(f: string) {
+    if (window.confirm("Really delete file " + f + "?")) {
+      console.log("DELETING", f);
+      let command = new DeleteObjectCommand({
+        Bucket: this.props.bucket,
+        Key: this.props.prefix + f,
+      });
+      let res = await this.props.client.send(command);
+      this.loadEntries();
+    }
+  }
+
   openUpload() {
     this.setState({iUpload: this.state.iUpload + 1});
   }
@@ -138,15 +151,6 @@ class ObjectList extends React.Component<Props, State> {
   }
 
   render() {
-    if (!this.state.loaded) {
-      return (
-        <>
-          { this.renderBreadcrumbs() }
-          <Alert variant="secondary">Loading...</Alert>
-        </>
-        );
-    }
-
     return (
       <>
         { this.state.iUpload > 0 ?
@@ -178,30 +182,46 @@ class ObjectList extends React.Component<Props, State> {
             </div>
           </Stack>
         </Container>
-        <ListGroup>
+        { this.state.loaded ?
-          { this.state.folders.map((f) =>
+          <ListGroup>
-            <LinkContainer key={f + "/"} to={ "/" + this.props.bucket + "/" + this.props.prefix + f }>
+            { this.state.folders.map((f) =>
-              <ListGroup.Item action>
+              <LinkContainer key={f + "/"} to={ "/" + this.props.bucket + "/" + this.props.prefix + f }>
-              <BsFolder /> { f }
+                <ListGroup.Item action>
-              </ListGroup.Item>
+                <BsFolder /> { f }
-            </LinkContainer>
+                </ListGroup.Item>
-          )}
+              </LinkContainer>
-          { this.state.files.map((f) =>
+            )}
-              <ListGroup.Item key={f} action onClick={() => this.openInfo(f)}>
+            { this.state.files.map((f) =>
-                <Stack direction="horizontal">
+                <ListGroup.Item key={f}>
-                  <div><BsFileEarmarkText /> { f }</div>
+                  <Stack direction="horizontal">
-                  <div className="ms-auto">
+                    <div><BsFileEarmarkText /> { f }</div>
-                    <Button size="sm" variant="info" onClick={(event) => {
+                    <div className="ms-auto">
-                      event.stopPropagation();
+                      <Button size="sm" className="mx-1" variant="primary" onClick={(event) => {
-                      downloadFile(this.props.client, this.props.bucket, this.props.prefix + f, f);
+                        event.stopPropagation();
-                    }}>
+                        downloadFile(this.props.client, this.props.bucket, this.props.prefix + f, f);
-                      <BsDownload />
+                      }}>
-                    </Button>
+                        <BsDownload />
-                  </div>
+                      </Button>
-                </Stack>
+                      <Button size="sm" className="mx-1" variant="danger" onClick={(event) => {
-              </ListGroup.Item>
+                        event.stopPropagation();
-          )}
+                        this.deleteFile(f);
-        </ListGroup>
+                      }}>
+                        <AiOutlineDelete />
+                      </Button>
+                      <Button size="sm" className="mx-1" variant="secondary" onClick={(event) => {
+                        event.stopPropagation();
+                        this.openInfo(f);
+                      }}>
+                        <BsInfoCircle />
+                      </Button>
+                    </div>
+                  </Stack>
+                </ListGroup.Item>
+            )}
+          </ListGroup>
+        :
+          <Alert variant="secondary">Loading...</Alert>
+        }
       </>
     );
   }