61509

How to make ajax call to AWS S3 bucket to get file names from folder?

Question:

I am trying to get image file names from folder to add them dynamically as an HTML element to my web page. In order to do that, I found this piece of code which works perfectly on the local host.

var folder = "img/gallery/"; $.ajax({ url: folder, success: function(data) { $(data).find("a").attr("href", function(i, val) { if (val.match(/\.(jpe?g|png|gif)$/)) { // TODO: Filter and Title strings needs to be changed var lightboxElement = "<img src=\"img\/gallery\/" + val + "\">"; $("#lightbox").append(lightboxElement); } }); }, error: function(exception) { console.log(data); } });

Basically, what this piece of code does is search different type of image files in a specified folder and returns their names. Then, an img element with image's source address added to the determined HTML object (#lightbox).

When I run the whole project on my local server, it works perfectly fine. However, when uploading it to AWS S3 bucket, that ajax call does not work. When I searched, I found a couple of possible solutions.

1) They suggest adding Cross-Origin Resource Sharing (CORS) file to the bucket. I added the file with the following rule. But it did not work.

<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

2) In the S3 bucket options, there is "Make Public" option. I used that option for both "img" and "gallery" folders and it did not work.

3) Some suggest using Amazon Route53 CNAME as a path for the folder which looks like this.

var folder = "http://example.com.s3-website-us-east-1.amazonaws.com/img/gallery/";

This also did not work.

Finally, below you can find two error messages I get when I load the page.

1) Failed to load resource: the server http://example.com/img/gallery/ responded with a status of 404 (Not Found) 2) Uncaught ReferenceError: data is not defined at Object.error (custom.js:21) at i (jquery.min.js:2) at Object.fireWith [as rejectWith] (jquery.min.js:2) at z (jquery.min.js:4) at XMLHttpRequest.<anonymous> (jquery.min.js:4)

Also, you can find the returned message from the Network tab of Chrome inspect below.

Code: NoSuchKey Message: The specified key does not exist. Key: img/gallery/index.html RequestId: KSDJGSL3405309lkjLKJ087944GHFG654hJHGjhk8979 HostId: LD0349823= An Error Occurred While Attempting to Retrieve a Custom Error Document Code: NoSuchKey Message: The specified key does not exist. Key: error.html

Thanks in advance!

Answer1:

<strong>I would highly recommend against allowing public listings of bucket contents</strong> but if that is your intention, here is the solution:

Using the REST endpoint (<em>not</em> the web site endpoint) of the bucket (e.g. <a href="https://example-bucket.s3.amazonaws.com" rel="nofollow noreferrer">https://example-bucket.s3.amazonaws.com</a>) your URL looks like this -- line breaks added for clarity.

https://example-bucket.s3.amazonaws.com/ ?prefix=img/gallery/ &delimiter=/

This will return the first 1000 objects under /img/gallery (but note there is no leading / in the prefix).

This is the List Objects V1 API. For anonymous access, you don't need any AWS libraries... but you'll need to parse XML and handle the pagination.

<a href="http://docs.aws.amazon.com/AmazonS3/latest/API/RESTBucketGET.html" rel="nofollow">http://docs.aws.amazon.com/AmazonS3/latest/API/RESTBucketGET.html</a>

There is also a V2 API, mentioned at the above page as well.

Recommend

  • Python: ascii codec can't encode en-dash
  • How can I resolve all SVN conflicts automatically? (Windows CLI)
  • Random Colors with preference
  • Struct vs test double in ruby
  • Java 8, why not a ZonedTime class?
  • Spring @Secured and @PreAuthorize have no effect in plain (non-web) application
  • How to Convert String to DateTime in specified format?
  • Need help adding not responding check to batch file
  • javascript window.location do I need to escape?
  • Unable to sort the JTable by Date
  • composer self-update TransportException
  • iPad launch image problem
  • Play framework select input validation
  • CosmicMind/Material SideMenu, how to change viewController?
  • Store Input File Selected in Redux to Upload Later
  • Python3 Windows multiprocessing passing socket to process
  • How can I move mouse by detected face and Eye using OpenCV and Python
  • SQLSTATE[HY000] [1045] exception while connecting to database using 000webhost
  • TeamCity: Scripting elements jsp:declaration, jsp:expression, jsp:scriptlet are disallowed here
  • spring-data-redis Jackson serialization
  • Average of every two lines for all columns except the first one
  • Google Charts: Animation doesn't work for one chart, pointing annotations in the title area
  • Eclipse ADT Plugin crashed after updating to version 22.0
  • Returning local reference created by JNI from a native method
  • no endpoints available for service \\“kubernetes-dashboard\\”
  • Combine two jagged lists into one
  • cSPADE data mining in R using arulesSequences - Error while converting to “transactions” format
  • Admob in ListView not clickable
  • Unable to start a WebView from an AsyncTask
  • Haskell program that can handle any arbitrary deterministic finite automaton
  • time column in sqlite using gorm
  • trigger ontouch event programmatically
  • Creating 2d platforms using JavaScript
  • How to write seo friendly url's using htaccess?
  • Is there a better way for handling SpatialPolygons that cross the antimeridian (date line)?
  • Unable to create Access token grant type in wso2 API manager store to test API
  • How do I add a mouse over tooltip to an Image using .DrawImage()
  • Using redis as an LRU cache for postgres
  • `$http:badreq Bad Request Configuration` - from angular post method, what is wrong here?
  • How to check if object is null in Java?