JavaScript for Accessing Files on the Server Side

I have a static website running on Amazon S3, where I store .txt, .pdf, and .svg files in my Bucket. I'm looking to display just the names of these files (without their content) on my HTML site using JavaScript. Since users can upload files to the bucket regularly, the filenames keep changing, which is why I need to list them dynamically. Instead of displaying all the files, I want to show an HTML file with a table listing files from a specific folder in the bucket.

I am only using plain JS for browsers, no Node.js or additional modules to keep the project simple.

I've explored tutorials on utilizing Node.js modules like 'fs' in the browser with tools like Browserify, but haven't been successful yet. I also came across FileSystemDirectoryReader for JS, but it's not widely supported. Would WebKitFileSystem be a suitable alternative? Most filesystem APIs seem to work with virtual directories rather than the specific directory I require.

Do I really need npm modules since I'm not accessing the client filesystem but my own filesystem on S3? I've already retrieved data from these files using XMLHttpRequest, but can I simply list their names?

It would be ideal if I could use code like this: var arrFiles = []; arrFiles = readFiles("./files/*");

Another option could be using AWS Lambda to fetch all file names, save them in a text file as a list, then read that file with JS to display the names on the website. This approach seems complex.

If there are any suggestions or solutions, I'd appreciate your input. Thanks in advance.

javascriptamazon-web-servicesamazon-s3xmlhttprequestfilesystems

Answer №1

Utilizing the AWS AWS Mobile CLI along with aws-amplify makes it achievable. The documentation and examples on their website are exceptional.

Start by setting up your aws mobile hub, configuring S3 bucket, cognito, dynamodb, and other required aws services.

Begin by installing AWS mobile cli using node js 

npm install -g awsmobile-cli

Configure it.

awsmobile configure

Initialize your project 

awsmobile init

Then proceed to install the aws-amplify node package in your project

npm i install aws-amplify

Import the necessary modules and configure them.

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

Lastly, call the List function to list keys under the specified path.

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

You have the option to perform various functions such as upload, download, and delete. These features are fully supported by an AWS team and go beyond just S3 capabilities.

Compatibility extends to both Angular and react js frameworks.

Answer №2

Using a lambda function, I have successfully created the table content.

Within this lambda function, I am utilizing the aws.s3 class and listObjectsV2() to gather all data from a designated folder. Subsequently, I compile the names of all located files into a text file that is then stored within the bucket.

The corresponding js file employs an XMLHttp Request to access and retrieve the contents of this text file each time the page reloads. This enables the script to extract the names from the bucket folder and populate the table accordingly. Notably, the lambda function automatically executes whenever I return to the main page of my website where the table is displayed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve API data utilizing the $http service

My current project involves using the Riot Games API, but this example utilizes the REST Countries API. You can find more information at The technology stack I am using is MEAN.IO and below you will see a snippet of my code: test.html <html ng-app="l ...

javascriptangularjsrestmean.io

The function type '() => JSX.Element' cannot be assigned to the type 'ReactNode'

I am encountering an issue while trying to display a component using an object. The code is throwing an error: const Login = () => <>login</> const publicRoutes = [ { path: '/login', component: Login } ] function AppR ...

javascriptreactjstypescripttypeerror

Exploring the usage of promises with data in VueJS async components

Experimenting with VueJS 2.0 RC and utilizing the fetch API to retrieve data for certain components. Here's a sample scenario: const Component = { template: '#comp', name: "some-component", data: function () { return { basic ...

javascriptasynchronouspromisevue.jsvue-component

JavaScript: handle null values along nested object keys by providing a default value

I am dealing with a complex JSON structure that requires pulling out specific information like this let result = data["a"]["b"][0]["c"]["d"][0]["e"][0] What is a streamlined approach to extract the data? A ...

javascript

Struggling to transfer data from componentDidMount as it constantly remains undefined

Having an issue with fetching data from the server in the componentDidMount method and passing it to the handleSubmit function, but it keeps returning undefined: constructor() { super(); this.state = { data: [] }; } componentDidMount() ...

javascriptdjangoreactjsdjango-rest-framework

Create a dynamic 3D model of the human body using JavaScript, AngularJS, or Three.js with

Looking to develop an interactive 3D human model that allows users to input data by clicking on various body parts. Interested in exploring capabilities using JavaScript, AngularJS or Three.js. ...

javascriptangularjsangularthree.js

Tips for validating the values in a multi-value dictionary against each key in node.js?

I have a dictionary with multiple values and I need to check if any of those values are equal to the respective URL while iterating through the loop. console.log("Hello World") const dns =require('dns') //Verifying the status of the URL fun ...

javascriptarraysnode.jsobject

Display the image before submitting it on Shiny platform

I'm currently developing a Shiny app that enables users to upload images directly to the server. I am wondering if there is a way to display the image on the screen without going through the process of uploading it first and then receiving the rendere ...

javascriptrshinyshinyjs

What is the best way to attach functions to specific jQuery objects and exclude others?

Imagine having an unordered list <ul>: <ul class="products"> ... </ul> You want to use jQuery to select it and then add custom functions to that specific object. For instance, you wish to include an addProduct(productData) function ...

javascriptjquery

Increase the space below the footer on the Facebook page to allow for an

I recently created a webpage at and noticed that it is adding extra height below the footer on my Facebook page: "" I am seeking assistance on how to remove this additional 21px height below all content in the footer. I have tried various templates but n ...

javascriptphphtmlcssfacebook

Exporting Material UI v1 components with Redux: A step-by-step guide

In my current project, I am integrating Material-UI v1 with stajuan's Redux-Saga Login template that can be found here. My goal is to merge the functionality of exporting the default class from both by combining two functions. Here is a snippet of the ...

javascriptreactjsecmascript-6react-reduxmaterial-ui

Encountering an issue such as "Exceeding the maximum number of re-renders. React restricts the amount of renders to avoid

Currently, I am attempting to update the state within the request data method for a string variable as shown below: const ViewChangeRequest = () => { const [requestStageValue, setRequestStage] = useState(''); const { data: request ...

javascriptreactjsstatereact-hooks

When you try to import a component, it may result in a blank page displaying an error message stating: "TypeError: Cannot set property 'components'

One interesting feature is the Vue component named DisplayContent, <template> <div></div> </template> <script lang="ts"> import { Vue, Component } from "vue-property-decorator"; import Home from "@/ ...

javascriptvue.jsvuejs2vuetify.js

What is the process for initiating a javascript-based download on SourceForge?

Looking to implement a download mechanism similar to how sourceforge initiates the download on their page, including providing a direct link as an alternative. I'm having trouble finding the JavaScript code that triggers the download popup on sourcef ...

asp.netjavascriptdownloadpopup

What is the best way to remove top divs without causing the bottom divs to shift upwards?

I am faced with a scenario where I must remove the topmost divs in a document without altering the user's view. Essentially, I need to transition from: ---------start of document div1 div2 div3 ---------start of window div4 div5 ------- ...

javascriptjqueryhtml

Having trouble getting CSS Animation to work in a React project?

I am currently developing a Next.js application using React. const partyButton = useRef(null) const handleParty = () => { setTimeout(() => { partyButton.current.classList.add('party-time'); console.log(party ...

javascriptcssreactjsnext.jsreact-hooks

Invoking a Typescript function from the Highcharts load event

Struggling to call the TypeScript function openDialog() from the events.load of Highcharts? Despite using arrow functions, you are running into issues. Take a look at the code snippet below: events: { load: () => { var chart : any = this; ...

javascriptangulartypescripthighcharts

What is the best way to change a string into JSON format using JavaScript?

For a recent web project, I utilized the Django framework in conjunction with a MongoDB database. In this project, I implemented a feature where a set of data objects from the database are assigned to a combobox. Interestingly, I incorporated two comboboxe ...

javascripthtmljsondjangocombobox

My array contains a list, and I need to determine how to ensure that a specific element is displayed first based on a condition in the mapping

Here is the object. let newObj = { firstValue:"abc", content:[ { "value": "123", "checked": true }, { "value": "456", "checked": false }, { "value": "789", "checked": tr ...

javascriptarrays

Exploring JSON parsing in AngularJS without running into reserved keywords

var jsonURL='../../json/xx.json' var myApp = angular.module('myApp',[]); myApp.controller('loaddata_traceroute', ['$scope','$http',function($scope, $http){ $http.get(jsonURL).success(function(data) { ...

javascriptangularjsjsonparsing