Code Monkey home page Code Monkey logo

aws-s3-explorer's Introduction

AWS S3 Explorer

This is an S3 Explorer for AWS. It provides a simple and straightforward way for users to login using SSO and explore available S3 Buckets. Everything is done in the browser and requires only minimal setup using either AWS Cognito or Authress.

This is an open source project managed by the Authress Engineering team at Rhosys.

Rhosys hosts an explorer to use out of the box for the community. For obvious security reasons, this is a UI only tool, and makes ZERO api calls to anywhere other than AWS. The following is a link to that explorer. However, if for some reason, other than security there is a benefit to hosting a clone of this, feel free to fork the repo and make any necessary changes. Alternatively, please contribute!

Go to the => AWS S3 Explorer

The S3 Explorer:

Folder selected screen

Configuration: The only setup step

Jump over to the AWS S3 explorer configuration to deploy the Cognito CFN template, and configure your SSO provider. That's it!

Troubleshooting

If you run into any problems just try running through the suggested Troubleshooting steps and if that doesn't help, file an issue, we are usually quick to respond.

Standard use cases:

View all objects in folder: Folder selected screen

View all objects in bucket: Bucket traversal screen

Upload objects to a bucket: Bucket upload request screen

Upload objects to a bucket succeeded: Bucket upload confirmation screen

Delete objects from a bucket: Bucket object delete request screen

Delete objects from a bucket succeeded: Bucket object delete confirmation screen

Contribution

Development

This project uses Vue 3, and as this is much different from Vue 2, recommend reading is available:

Troubleshooting builds

Error: OpenIDConnect provider's HTTPS certificate doesn't match configured thumbprint - Update AWS IAM to use the thumbprint details of the issue are available here.

aws-s3-explorer's People

Contributors

manouchka94 avatar wparad avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

aws-s3-explorer's Issues

Running locally

Hi @wparad,

Is there any way to run this locally as when I try to build, it launches SAM and Cloudformation to provision resources on AWS? Is there any way, to run it locally like any other vue app? Please, let me know. Thanks

Call refresh function if current bucket is present

Hi @wparad.

I noticed the following behavior after login to the app.

Even if the store.currentBucket value contains the name of a bucket, you must click on the Refresh button to display the contents of the bucket.

The idea I propose is to call the refresh function if the store.currentBucket value is filled.

onMounted(async () => {
  if (store.loggedOut) {
    store.showSettings = true;
    store.globalLoader = false;
    return;
  }

  if (!store.initialized) {
    await login();
    await fetchSharedSettings();
    store.globalLoader = false;

    if (!store.tokens) {
      store.showSettings = true;
      store.objects = [];
      return;
    }

    if (!store.currentBucket) {
      if (getBuckets().length) {
        store.currentBucket = getBuckets()[0].bucket?.trim().toLowerCase();
        return;
      }
      store.showBucketSelector = true;
      store.objects = [];

      return;
    }
    // Call refresh() function if store.currentBucket contains a bucket name
    else {
      refresh()
    }
  }
  store.globalLoader = false;
});

Custom Domain Settings for S3 bucket

Thanks for sharing this project. I am trying to set up a Cognito access to one of my private S3 buckets so that Cognito users can view contents of the bucket and download contents. Your projects appears to be best fit for my requirements. I have set up as per your instructions and added generated callback url to Cognito app client settings. Then I created a user pool and when I try to sign in I see an error message. Also, not sure at what stage I can point to my private bucket. Please, let me know what I'm missing. Thanks
image

Async S3 listing

Hi,

When we try to access a folder with many objects, it takes a long time without showing anything on the page. To the user, it looks like the folder is empty. In AWS alpha-v2 repo, the listing is paginated and the contents of the first page are shown while the application is still listing the contents of the folder.

Would it be possible to add this change?

Replace BootBox

Alerts from bootbox are always met with the same error:

TypeError: Cannot read properties of undefined (reading 'extend')
    at f (VM87:1)
    at m (VM87:1)
    at Object.u.alert (VM87:1)
    at VM86:1

Integration with existing Cognito User Pool

@wparad thanks for batch download feature. I was trying to integrate the app with existing Cognito user pool. I tried to edit configuration file in S3 bucket and edit S3_Explorer_Authenticated_User-${AWS::Region} to associate with identityPoolId (trust relationship conditions). However, it didn't work. When I try to go to my app, it is still going to CF created Amazon Cognito domain rather than existing one (which I definedin config file). I assume it is because, Cloudfront is directing there. I couldn't figure out how to use an existing user pool so far. Not sure even if it is possible. Please, let me know if that can be implemented. Thanks in advance

Enable sorting S3 objects by date

Hi @wparad . How easy is to sort objects by last modified date (or perhaps toggle sorting ascending - descending on column headers click)? I have tried to change

const sortedObjects = computed(() => store.objects.sort((a, b) => a.key.localeCompare(b.key)));

to

const sortedObjects = computed(() => store.objects.sort((a, b) => new Date(a.date) - new Date(b.date)));

and

<tr v-for="path in sortedObjects.filter(o => o.type === 'PATH' && o.key.split(store.delimiter).slice(-1)[0])"
  :key="path.key">

to

<tr v-for="path in sortedObjects.filter(o => o.type === 'PATH' && o.key.split(store.delimiter).slice(-1)[0])"
  :key="path.lastModified">

something like that. Vue and JS are not really area of my specialty so I might have done something completely wrong hence it didn't work. Please, let me know if that can be implemented by changing lines above? Thanks

Display percentage of data uploaded

Hello @wparad,

I use your project to upload big files (100 mo and more) to S3 bucket.
During the upload step the percentage of data uploaded is initially fixed at 0% and when upload is finished it's set to 100%.

In the progressUpdatedHandler function in uploadModal.vue file I use two properties of the evt (evt.loaded and evt.total) to calculate the percentage of data uploaded.

Thus, the percentage value is updated dynamically and helps to follow the progress of the upload for big files.
What do you think about this proposal ?

const progressUpdatedHandler = evt => {
  DEBUG.log('File:', file, 'Part:', evt.part, evt.loaded, 'of', evt.total);
  // Use evt.loaded and evt.total to calculate the percentage of data uploaded
  state.completionPercentageMap[fileIndex] = Math.round((evt.loaded * 100) / evt.total);
};

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.