0

I'm hosting a static website on Amazon S3. In my Bucket there are also some .txt , .pdf, .svg files stored. I want to display a list of these files (only names no content) on my html website with javascript. As users can upload files to the bucket the names always change. That's why I want to list them. And I do not want to list all files instead of showing the html file but show html file with a table that lists files from a specific folder in the bucket.

I do not use nodejs just js for browsers. I try not to use any new modules. The Project should remain simple.

I already read tutorials on using nodejs modules like 'fs' in the browser with help of browserify. I didn't manage that or any other ideas I've found.

I read something about FileSystemDirectoryReader for js but that's not generally supported yet. Would WebKitFileSystem meet my needs? I understood that most of the fileSystem APIs work with virtuall directories not the directory i need.

Now I wonder if I actually need anything like npm modules as I do not want to access the Client FileSystem but my own fileSystem on S3. I already read data from those files with XMLHttpRequest but can I also just list the names?

It'd be great if I had some code like: var arrFiles = []; arrFiles = readFiles("./files/*");

Another Approach would be using AWS Lambda to read all file names, save those as a list in a text file and read that file with js to print the names on the website. Seems to be complicated.

If that makes any sense. Thanks in advance

tamara d
  • 320
  • 5
  • 18
  • Browsers can't access server's filesystem without help of the server, you definitely need some server-side code for this. – Teemu Aug 16 '18 at 07:56
  • ok thanks :). but why can I then read the content of these files but not the names of all files together? – tamara d Aug 16 '18 at 07:59
  • @TamDo - Because those are fundamentally different things, with different security implications, and the one is allowed in browsers and the other isn't. You might be able to configure your S3 website to have an "index" page (fairly standard feature for web servers, but S3's a different beast). If you can, then you could query and parse that page from your browser-based JavaScript code. But I don't know about S3 website hosting, so I don't know if that's possible. – T.J. Crowder Aug 16 '18 at 08:01
  • ok I didn't think about that. thanks for the answers. I'll try the aws lambda solution. – tamara d Aug 16 '18 at 08:03
  • It looks like [you can configure an index document](https://stackoverflow.com/questions/27899/is-there-a-way-to-have-index-html-functionality-with-content-hosted-on-s3), but since it will be shown when someone comes to the root of your site, you probably don't want to go that way. Lambda or frankly just a manually-maintained file sound like your best bets. – T.J. Crowder Aug 16 '18 at 08:04
  • jup that index doc is already configured because thats the site users should see when they enter the bucket url – tamara d Aug 16 '18 at 08:07
  • Which front end framework are you using? Because it is possible to list the files under a folder or bucket – Tiisetso Tjabane Aug 16 '18 at 08:12
  • I'actually not using any frontend functionality framework. just basic js with jquery library – tamara d Aug 16 '18 at 08:15
  • You can check out this library. I am not the author, so please direct your questions to the author. https://github.com/rufuspollock/s3-bucket-listing – dereli Aug 16 '18 at 11:42
  • Possible duplicate of [Directory Listing in S3 Static Website](https://stackoverflow.com/questions/9253512/directory-listing-in-s3-static-website) – dereli Aug 16 '18 at 11:43

2 Answers2

0

With AWS AWS Mobile CLI and the aws-amplify it is possible. They is great documentationa and examples on there site

Basically you create an aws mobile hub, configure your S3 bucket, cognito, dynamodb and any other aws services you will need.

First install AWS mobile cli with node js 

npm install -g awsmobile-cli

configure it.

awsmobile configure

initialize your project 

awsmobile init

once than install the aws-amplify node package in your project

npm i install aws-amplify

Import the necessary modules and configure it.

import Amplify, { Storage } from 'aws-amplify';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);

Finally just call the List function, it will list keys under path specified.

Storage.list('photos/')
       .then(result => console.log(result))
       .catch(err => console.log(err));

You can perform a variety of functionality like upload, download and delete. They are maintained and supported by an AWS team and are not just limited to S3.

They are compatible with both Angular and react js.

Tiisetso Tjabane
  • 2,088
  • 2
  • 19
  • 24
  • thanks for the answer. I'm not using nodejs, Angular or react. So I thik I'll stick to the simple AWS Lambda AWS.S3 class which I found out supports the listObjectsV2 Method. – tamara d Aug 16 '18 at 08:41
  • You can use it with the traditional javascript with the script tag without the need for angular or react js But the Lamdba way is easier. Good luck and happy coding – Tiisetso Tjabane Aug 16 '18 at 08:47
0

I now generated the table content with a lambda function.

In that lambda function I use the aws.s3 class and listObjectsV2(). It reads all data in a specific folder. I write the names of all found files to a text file that is stored in the bucket.

The js file uses an XMLHttp Request to read that text file everytime the page reloads. So it gets the content of the bucket folder and can write the names to the table. The lambda funtion is always triggered when I go back to the main page of my website where the table is shown.

tamara d
  • 320
  • 5
  • 18