Latest commit b5e431a Jul 31, 2018
Permalink
..
Failed to load latest commit information.
app Angular6 (#148) Jul 16, 2018
README.md Update README.md Jul 31, 2018
package-lock.json Angular5 (#115) Nov 22, 2017
package.json Angular6 (#148) Jul 16, 2018
tsconfig.json Angular2 SDK Jan 8, 2017
webpack.config.js Angular6 (#148) Jul 16, 2018
yarn.lock Angular6 (#148) Jul 16, 2018

README.md

Cloudinary Angular Photo Album Sample

This sample project shows:

  1. How to use the Cloudinary Angular directives.
  2. How to upload files to Cloudinary in an unsigned manner, using an upload preset. The upload control is based on the open source file uploader ng2-file-upload
  3. How to use the dynamic list resource in order to maintain a short list of resources aggregated by tags.
  4. How to delete an image uploaded from the browser with an unsigned upload. You can find additional details in this knowledge base article. Don't forget to set the Return delete token setting of your unsigned upload preset to true.

Configuration

There are 2 settings you need to change for this demo to work. Copy or rename app/js/config.ts.sample to app/js/config.ts and edit the following:

  1. cloud_name - Should be change to the cloud name you received when you registered for a Cloudinary account.
  2. upload_preset - You should first "Enable unsigned uploads" in the "Upload Settings" of your Cloudinary console and assign the resulting preset name to that field. Note, you may want to tweak and modify the upload preset's parameters.
  3. Additionally, in your Cloudinary console in the "Security Settings" section you should uncheck the "list" item.

Setup

Run npm install to install the required dependencies for this module.

Running

Run npm start to start the server and automatically open a browser and navigate to the application's url.

The application is deplyoed at http://localhost:8002/

Internals

This sample is using Webpack for bundling and serving the application.

index.html bootstraps the application by loading the bundle.js script generated by Webpack.

The sample creates a new NgModule, and depends on CloudinaryModule which is imported from the SDK module.

Sample main components

Routing

The application routes are defined in app/js/app.routing.ts

The application has 2 routes:

  • /photos - Presents a list of images tagged by myphotoalbum
  • /photos/new - Presents an upload control that allows uploading multiple files by a file input or drag-and-grop. Uploads have a dynamic progress bar. In addition it displays the details of successful uploads.

The default route is set to /photos.

Services

photo-album.service.ts retrieves the list of images from Cloudinary based on the myphotoalbum tag name.

Components

Photo list

Photo Upload

Important observations:

  • This implementation is based on an Angular file uploader.
  • Changes to the title field are propagated to the formData being sent in the upload request. This is meant to illustrate the possibility of attaching extra meta-data to each upload image.
  • The upload control uses the upload_preset we configured in Configuration step. This uses the settings defined on Cloudinary side to process the uploaded file.

Unsigned Upload

In order to add images to our photo album that would later be retrievable from the Cloudinary service we must select a tag which will serve as our source for the list. In this case myphotoalbum. While this tag can be set in the upload preset and remain hidden from the client side, in this sample we included it in the request itself to make this sample work without further configuration steps.

List Resource

Cloudinary supports a JSON list resource. This list represents all resources marked with a specific tag during upload (or later through other APIs). Whenever a new resource is uploaded with a tag, or an existing resource already tagged is deleted then the list is recalculated. This enables you to group a list of resources which can be retrieved by a single query. The size of the list is currently limited to 100 entires. Learn more