4

I'm totally new to AWS services and was wondering if there are any online tutorials on how to build a photo gallery web app to allow me to browse photos stored in folders and subfolders in an S3 bucket.

The web app should allow me to view the contents of a folder as thumbnails and when I click on a thumbnail, the full image will appear.

Any help would be greatly appreciated.

Thanks!

sam.

John Rotenstein
  • 241,921
  • 22
  • 380
  • 470
Sam Lim
  • 41
  • 1
  • 1
  • 2

3 Answers3

1

Considering you want it serverless with AWS services :

here is the tutorial for exactly what you want

https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

Mausam Sharma
  • 852
  • 5
  • 10
1

AWS has gone through many growth spurts since this question was first asked. The Serverless platform was introduced which incorporated AWS CLI functionalities. API gateway now incorporates App Sync, security and Lambda. Now the best and easiest way is a service called AWS Amplify. It uses all the aforementioned technologies with the integration of cloud formation templates. Some of the great features include Hosting, Authorization, Storage and API's using REST or GraphQL.

In just a few lines of code add Auth flow. In 10 minutes you can set up a backend with S3 pictures and an S3 Album straight out of the box.

Check out Amplify Storage, Amplify S3 and S3Album here. They offer support for many languages. I personally work with JavaScript in React and was able to import S3Album, configure storage in one line and display it within the render method like this:

import './App.css';
import Amplify from 'aws-amplify';
import { S3Album, withAuthenticator, S3Image } from 'aws-amplify-react';
Amplify.configure(awsmobile);

Class App extends Component {
  render() {
    return (
      <div className="App">
        <S3Album path="pictures/" picker />
      </div>
    );
  }
}

export default withAuthenticator(App, true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
KrisCodes2
  • 73
  • 7
0

Came across this project https://github.com/toehio/s3album while looking for something similar to what OP asked.

Overview

Browse your bucket for photos.
Publish albums from your photos.
Share albums with their public URL.

The albums you publish are private: they can only be found if you know the album's URL.

Being a pure web-app means:

Configuration-free: upload the scripts to S3 and start publishing albums right away.
Database-free: no database is required for creating or viewing albums. Albums are self contained and portable.
No server-side scripts: all the operations are done in your browser, including resizing photos and thumbnails.
zennni
  • 1,397
  • 15
  • 12