Angular (Legacy) image and video upload

When using the Angular SDK, you can use one of several options to upload files directly to Cloudinary without the need for server-side operations or authentication signatures.

Upload options

 

• 3rd party Angular upload tools: There are a number of Angular and Angular 2.x and later 3rd party upload tools available. Configure your upload tool to upload to your Cloudinary product environment and use an upload preset to define your upload parameters.

Upload endpoint

The upload endpoint is https://api.cloudinary.com/v1_1/${cloudName}/upload. To use the endpoint in your application, use the JavaScript Fetch API to call the Cloudinary upload endpoint and pass:

• an unsigned upload preset with the upload method options you want to apply for all files
• the file(s) to upload
• other unsigned upload parameters to apply to the selected files (e.g. tags, if needed).

Code examples

• Git sample project: Use ng2-file-upload in the photo-upload.component.ts file of the Photo Album sample project on GitHub.
• Code sample: Implement the upload widget.
• Code explorer: Upload multiple files using a form in pure JavaScript using the Cloudinary upload endpoint.
• CodePen: Use the JavaScript Fetch API to upload files in vanilla JavaScript using the Cloudinary upload endpoint for unsigned uploading with an upload preset.
• Glitch: Perform signed uploads from the browser by generating a signature on the server.
• Git sample project: Upload files from your Angular application using jQuery, in the Photo album with jQuery sample project.