{"id":15675101,"url":"https://github.com/unicodeveloper/angular-2-cloudinary","last_synced_at":"2025-04-24T03:02:19.730Z","repository":{"id":87983103,"uuid":"79834163","full_name":"unicodeveloper/angular-2-cloudinary","owner":"unicodeveloper","description":"An implementation of Uploads \u0026 Transformations in Angular 2 With Cloudinary","archived":false,"fork":false,"pushed_at":"2017-01-25T05:59:43.000Z","size":17,"stargazers_count":13,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T06:14:36.391Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unicodeveloper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-23T18:29:45.000Z","updated_at":"2025-03-05T20:40:37.000Z","dependencies_parsed_at":"2023-03-03T04:30:20.053Z","dependency_job_id":null,"html_url":"https://github.com/unicodeveloper/angular-2-cloudinary","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicodeveloper%2Fangular-2-cloudinary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicodeveloper%2Fangular-2-cloudinary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicodeveloper%2Fangular-2-cloudinary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicodeveloper%2Fangular-2-cloudinary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unicodeveloper","download_url":"https://codeload.github.com/unicodeveloper/angular-2-cloudinary/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250552077,"owners_count":21449164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T15:56:26.635Z","updated_at":"2025-04-24T03:02:19.660Z","avatar_url":"https://github.com/unicodeveloper.png","language":"HTML","readme":"Cloudinary Angular 2 Photo Album Project\n=======================================\n\n\u003e Learn how to upload images in an Angular 2 app to Cloudinary and perform all sorts of transformation.\n\nThis sample project shows:\n\n1. How to use the Cloudinary Angular directives.\n2. 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](https://github.com/valor-software/ng2-file-upload)\n3. How to use the dynamic list resource in order to maintain a short list of resources aggregated by tags.\n\n## Configuration ##\n\nThere are 2 settings you need to change for this demo to work. Open up `app/config.ts` and edit the following:\n\n1. **cloud_name** - Should be change to the cloud name you received when you registered for a Cloudinary account.\n2. **upload_preset** - You should first \"Enable unsigned uploads\" in the [\"Upload Settings\"](https://cloudinary.com/console/settings/upload) 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.\n3. Additionally, in your Cloudinary console in the [\"Security Settings\"](https://cloudinary.com/console/settings/security) section you should uncheck the \"list\" item.\n\n## Setup ##\n\nRun `npm install` to install the required dependencies for this module.\n\n## Running ##\n\nRun `npm start` to start the server and automatically open a browser and navigate to the application's url.\n\nThe application is deplyoed at http://localhost:3000/\n\n## Internals ##\nThis project is using [SystemJS](https://github.com/systemjs/systemjs) for bundling and serving the application.\n\nThe project creates a new NgModule, and depends on CloudinaryModule which is imported from the SDK module.\n\n### Sample main components ###\n\n#### Routing ####\n\nThe application routes are defined in [app/app.routing.ts](app/js/app.routing.ts)\n\nThe application has 2 routes:\n\n* **/photos** - Presents a list of images tagged by `myphotoalbum`\n* **/photos/new** - Presents an upload control that allows uploading multiple files by a file input or drag-and-grop.\nUploads have a dynamic progress bar. In addition it displays the details of successful uploads.  \n\nThe default route is set to `/photos`.\n\n#### Services ####\n[photo-album.service.ts](app/js/model/photo-album.service.ts) retrieves the list of images from Cloudinary based on the `myphotoalbum` tag name.\n\n#### Components ####\n\u003e Photo list\n* [photo-list.component.ts](app/js/photo-list/photo-list.component.ts) sets up the list of images displayed via one-way binding by [photo-list.component.html](app/js/photo-list/photo-list.component.html)\n* [photo-list.component.html](app/js/photo-list/photo-list.component.html) displays the bound images and displays basic transformations for each image\n\n\u003e Photo Upload\n* [photo-upload.component.ts](app/photo-upload/photo-upload.component.ts) initializes the upload widget and sets up listeners on the progress events.\n* [photo-upload.component.html](app/photo-upload/photo-upload.component.html) displays the upload control and lists the properties of the uploaded images once upload completes successfully.\n\n**Important observations**:\n* This implementation is based on an Angular file uploader.\n* 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.\n* 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.\n\n### Unsigned Upload ###\n\nIn 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`.\nWhile 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.\n\n### List Resource ###\n\nCloudinary supports a JSON list resource. \nThis list represents all resources marked with a specific tag during upload (or later through other APIs).\nWhenever a new resource is uploaded with a tag, or an existing resource already tagged is deleted then the list is recalculated. \nThis 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.\n[Learn more](http://cloudinary.com/documentation/image_transformations#client_side_resource_lists)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funicodeveloper%2Fangular-2-cloudinary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funicodeveloper%2Fangular-2-cloudinary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funicodeveloper%2Fangular-2-cloudinary/lists"}