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

@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

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

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?

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

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

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

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

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