authress-engineering/aws-s3-explorer

A public open source S3 explorer for public/private buckets that can be deployed anywhere.

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

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);
};

Allow default list of buckets

Allow defining a default list of buckets for the account that are always available to anyone that signs in.

Add Search widget for easy searching within the displayed bucket prefix items

Hi!

Would it be possible the have the v2-alpha version from AWS with this cognito integration?
https://github.com/awslabs/aws-js-s3-explorer/tree/v2-alpha

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

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

Batch download as zip file

Please, add a feature that allows batch downloading in zip format. Thanks

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?