Implement object deletion

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});
   }
@@ -187,16 +200,28 @@ class ObjectList extends React.Component<Props, State> {
             </LinkContainer>
           )}
           { this.state.files.map((f) =>
-              <ListGroup.Item key={f} action onClick={() => this.openInfo(f)}>
+              <ListGroup.Item key={f}>
                 <Stack direction="horizontal">
                   <div><BsFileEarmarkText /> { f }</div>
                   <div className="ms-auto">
-                    <Button size="sm" variant="info" onClick={(event) => {
+                    <Button size="sm" className="mx-1" variant="primary" onClick={(event) => {
                       event.stopPropagation();
                       downloadFile(this.props.client, this.props.bucket, this.props.prefix + f, f);
                     }}>
                       <BsDownload />
                     </Button>
+                    <Button size="sm" className="mx-1" variant="danger" onClick={(event) => {
+                      event.stopPropagation();
+                      this.deleteFile(f);
+                    }}>
+                      <AiOutlineDelete />
+                    </Button>
+                    <Button size="sm" className="mx-1" variant="secondary" onClick={(event) => {
+                      event.stopPropagation();
+                      this.openInfo(f);
+                    }}>
+                      <BsInfoCircle />
+                    </Button>
                   </div>
                 </Stack>
               </ListGroup.Item>