Add upload api and integrate it with object browser on UI

Author: cesnietor

portal-ui/bindata_assetfs.go

@@ -16,27 +16,28 @@
 
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
-import { Button } from "@material-ui/core";
-import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
 import { BucketObject, BucketObjectsList } from "./types";
 import api from "../../../../../../common/api";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import TableWrapper from "../../../../Common/TableWrapper/TableWrapper";
-import { MinTablePaginationActions } from "../../../../../../common/MinTablePaginationActions";
-import { CreateIcon } from "../../.././../../../icons";
 import { niceBytes } from "../../../../../../common/utils";
-import Moment from "react-moment";
 import DeleteObject from "./DeleteObject";
+
 import {
   actionsTray,
   containerForHeader,
   searchField,
 } from "../../../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../../../Common/PageHeader/PageHeader";
 import storage from "local-storage-fallback";
+import { isNullOrUndefined } from "util";
+import { Button, Input } from "@material-ui/core";
+import * as reactMoment from "react-moment";
+import { CreateIcon } from "../../../../../../icons";
+import Snackbar from "@material-ui/core/Snackbar";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -88,6 +89,8 @@ interface IListObjectsState {
   selectedObject: string;
   selectedBucket: string;
   filterObjects: string;
+  openSnackbar: boolean;
+  snackBarMessage: string;
 }
 
 class ListObjects extends React.Component<
@@ -104,6 +107,8 @@ class ListObjects extends React.Component<
     selectedObject: "",
     selectedBucket: "",
     filterObjects: "",
+    openSnackbar: false,
+    snackBarMessage: "",
   };
 
   fetchRecords = () => {
@@ -141,6 +146,73 @@ class ListObjects extends React.Component<
     });
   }
 
+  showSnackBarMessage(text: string) {
+    this.setState({ openSnackbar: true, snackBarMessage: text });
+  }
+
+  closeSnackBar() {
+    this.setState({ openSnackbar: false, snackBarMessage: `` });
+  }
+
+  upload(e: any, bucketName: string, path: string) {
+    let listObjects = this;
+    if (isNullOrUndefined(e) || isNullOrUndefined(e.target)) {
+      return;
+    }
+    const token: string = storage.getItem("token")!;
+    e.preventDefault();
+    let file = e.target.files[0];
+    const fileName = file.name;
+
+    const objectName = `${path}${fileName}`;
+    let uploadUrl = `/api/v1/buckets/${bucketName}/objects/upload?prefix=${objectName}`;
+    let xhr = new XMLHttpRequest();
+
+    xhr.open("POST", uploadUrl, true);
+    xhr.setRequestHeader("Authorization", `Bearer ${token}`);
+
+    xhr.withCredentials = false;
+    xhr.onload = function(event) {
+      // TODO: handle status
+      if (xhr.status == 401 || xhr.status == 403) {
+        listObjects.showSnackBarMessage(
+          "An error occurred while uploading the file."
+        );
+      }
+      if (xhr.status == 500) {
+        listObjects.showSnackBarMessage(
+          "An error occurred while uploading the file."
+        );
+      }
+      if (xhr.status == 200) {
+        listObjects.showSnackBarMessage("Object uploaded successfully.");
+        listObjects.fetchRecords();
+      }
+    };
+
+    xhr.upload.addEventListener("error", (event) => {
+      // TODO: handle error
+      this.showSnackBarMessage("An error occurred while uploading the file.");
+    });
+
+    xhr.upload.addEventListener("progress", (event) => {
+      // TODO: handle progress with event.loaded, event.total
+    });
+
+    xhr.onerror = () => {
+      listObjects.showSnackBarMessage(
+        "An error occurred while uploading the file."
+      );
+    };
+
+    var formData = new FormData();
+    var blobFile = new Blob([file]);
+
+    formData.append("upfile", blobFile);
+    xhr.send(formData);
+    e.target.value = null;
+  }
+
   download(bucketName: string, objectName: string) {
     var anchor = document.createElement("a");
     document.body.appendChild(anchor);
@@ -184,9 +256,11 @@ class ListObjects extends React.Component<
       selectedBucket,
       deleteOpen,
       filterObjects,
+      snackBarMessage,
+      openSnackbar,
     } = this.state;
     const displayParsedDate = (date: string) => {
-      return <Moment>{date}</Moment>;
+      return <reactMoment.default>{date}</reactMoment.default>;
     };
 
     const confirmDeleteObject = (object: string) => {
@@ -197,6 +271,25 @@ class ListObjects extends React.Component<
       this.download(selectedBucket, object);
     };
 
+    const uploadObject = (e: any): void => {
+      // TODO: handle deeper paths/folders
+      let file = e.target.files[0];
+      this.showSnackBarMessage(`Uploading: ${file.name}`);
+      this.upload(e, selectedBucket, "");
+    };
+
+    const snackBarAction = (
+      <Button
+        color="secondary"
+        size="small"
+        onClick={() => {
+          this.closeSnackBar();
+        }}
+      >
+        Dismiss
+      </Button>
+    );
+
     const tableActions = [
       { type: "download", onClick: downloadObject, sendOnlyId: true },
       { type: "delete", onClick: confirmDeleteObject, sendOnlyId: true },
@@ -226,6 +319,11 @@ class ListObjects extends React.Component<
             }}
           />
         )}
+        <Snackbar
+          open={openSnackbar}
+          message={snackBarMessage}
+          action={snackBarAction}
+        />
         <PageHeader label="Objects" />
         <Grid container>
           <Grid item xs={12} className={classes.container}>
@@ -249,6 +347,23 @@ class ListObjects extends React.Component<
                   ),
                 }}
               />
+
+              <>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  startIcon={<CreateIcon />}
+                  component="label"
+                >
+                  Upload Object
+                  <Input
+                    type="file"
+                    onChange={(e) => uploadObject(e)}
+                    id="file-input"
+                    style={{ display: "none" }}
+                  />
+                </Button>
+              </>
             </Grid>
             <Grid item xs={12}>
               <br />

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -58,6 +58,7 @@ type MinioClient interface {
 	listObjects(ctx context.Context, bucket string, opts minio.ListObjectsOptions) <-chan minio.ObjectInfo
 	getObjectRetention(ctx context.Context, bucketName, objectName, versionID string) (mode *minio.RetentionMode, retainUntilDate *time.Time, err error)
 	getObjectLegalHold(ctx context.Context, bucketName, objectName string, opts minio.GetObjectLegalHoldOptions) (status *minio.LegalHoldStatus, err error)
+	putObject(ctx context.Context, bucketName, objectName string, reader io.Reader, objectSize int64, opts minio.PutObjectOptions) (info minio.UploadInfo, err error)
 }
 
 // Interface implementation
@@ -128,6 +129,10 @@ func (c minioClient) getObjectLegalHold(ctx context.Context, bucketName, objectN
 	return c.client.GetObjectLegalHold(ctx, bucketName, objectName, opts)
 }
 
+func (c minioClient) putObject(ctx context.Context, bucketName, objectName string, reader io.Reader, objectSize int64, opts minio.PutObjectOptions) (info minio.UploadInfo, err error) {
+	return c.client.PutObject(ctx, bucketName, objectName, reader, objectSize, opts)
+}
+
 // MCClient interface with all functions to be implemented
 // by mock when testing, it should include all mc/S3Client respective api calls
 // that are used within this project.