使用JavaScript进行服务器端文件系统访问

Question

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

Answer 1

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.

Answer 2

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.