Build an image gallery app in the cloud

Get the code

Summary

To illustrate object storage options in the cloud, you can use a code pattern to build a simple web gallery application that frees up storage space on your hard drive and moves all photos to the cloud.

Description

The Web Gallery in Cloud Oject Storage is a simple Node.js app running on IBM Cloud that uses the Express framework to create a basic two tier web app that can pull data from and push data to Cloud Object Storage using a simple web form. See Tutorial: Image Gallery.

At the heart of the server side app is the Node.js IBM Cloud Object Storage SDK package, which handles the authentication and connectivity to Cloud Object Storage. Express handles the routing, which then allows the business logic to be handled by the controller. The upload form uploads an image to an express route, which calls functions from the IBM Cloud Oject Storage SDK, multer, and multer-s3 functions to upload it to the designated Cloud Object Storage bucket. A request for the image gallery view invokes Cloud Object Storage SDK functions to get the URL for each image in the bucket. The URL data is sent back in the response and merged with the EJS view template during the view rendering.

When you use this code pattern, you learn how to complete the following tasks:

  • Deploy a Node.js app (optionally using Cloud Foundry).
  • Provision a service instance of Cloud Object Storage.
  • Use the Node.js IBM Cloud Object Storage SDK to interact with Cloud Object Storage.

Flow

flow

  1. From the Image Upload form, the user of the image gallery app selects an image and clicks Upload.
  2. The form performs a POST request to the app, and the app uses the S3 SDK to generate a PUT to the IBM Cloud Object Storage server.
  3. The user of the image gallery app clicks the Gallery tab, which makes a GET request to the app for the gallery view.
  4. The app performs a GET request through the S3 SDK to retrieve the image URLs of the images that are stored in the IBM Cloud Object Storage bucket. The image URLs passed back in the response are merged with the view template, which is rendered for the user so that the images are displayed.

Instructions

Find detailed technical steps for this code pattern in the README.md file in the GitHub repository.

  1. Deploy the app to IBM Cloud.
  2. To prepare to run the app locally, first clone the repo.
  3. Configure IBM Cloud Object Storage.
  4. Run the application.