Menu
- Get Started
- Programmable Media overview
- Developer kickstart
- SDK quick starts
- Try it!
- Video tutorial library
- Programmatic asset management
- Programmatic upload
- Upload programmatically
- Create upload presets
- Auto upload
- Auto-tag assets
- Moderate images with AI
- Upload images in Flutter
- Upload images in Node.js
- Upload multiple files in Node.js
- Upload videos in Node.js
- Upload images in Python
- Upload videos in Python
- Upload assets in a React app
- Upload assets in a Vue.js app
- Drag-and-drop uploads in React
- Upload assets in a Next.js app
- Upload assets with Server Actions
- Upload assets in Svelte
- Upload assets in a SvelteKit app
- Upload assets in a Remix app
- Use webhooks to remove backgrounds
- Interaction with Cloudinary APIs
- Cloudinary SDKs
- Find your credentials
- Configure the JavaScript SDK
- Configure the React SDK
- Configure the Flutter SDK
- Configure Svelte Cloudinary
- Configure the Javascript SDK in Svelte
- Configure the Node.js SDK
- Configure the Python SDK
- Configure the Go SDK
- Configure the Vue.js SDK
- Configure the Next.js SDK
- List images in Next.js
- Captioning on upload with Node.js
- Delete assets with Node.js
- Manage images in a Django app
- Cloudinary CLI
- Widgets
- Administration
- Programmatic upload
- Optimization and delivery
- Transformations
- Get started with transformations
- Advanced transformation features
- Text overlay transformations
- Complex transformations
- Named transformations
- Named transformations using TX Builder
- Advanced image components
- Trim videos in Node.js
- Splice videos in Node.js
- Zoompan effect
- Video transformations
- Crop and resize images in React
- Crop and resize videos in React
- Crop and resize images in Python
- Remove backgrounds and add drop shadows
- AI generative fill in Next.js
- Color accessibility in JavaScript
- Transformations for social media
- Dev Hints on YouTube
- Programmatic asset management
- Additional onboarding resources
- Guides
- Upload
- Transform and customize
- Image transformations
- Image transformations overview
- Resizing and cropping
- Placing layers on images
- Effects and enhancements
- Generative AI transformations
- Face-detection based transformations
- Custom focus areas
- Animated images
- Transformations on 3D models
- Conditional transformations
- User-defined variables and arithmetic transformations
- Custom functions
- Video transformations
- Eager and incoming transformations
- Media Editor widget
- How are transformations counted?
- Add-ons
- Image transformations
- Optimize and deliver
- Manage and analyze
- Video
- User-generated content
- AI in action
- Native mobile
- Add-ons
- Advanced Facial Attributes Detection
- Amazon Rekognition AI Moderation
- Amazon Rekognition Video Moderation
- Amazon Rekognition Auto Tagging
- Amazon Rekognition Celebrity Detection
- Aspose Document Conversion
- Cloudinary AI Background Removal
- Cloudinary AI Content Analysis
- Cloudinary AI Vision (Beta)
- Cloudinary Duplicate Image Detection
- Google AI Video Moderation
- Google AI Video Transcription
- Google Auto Tagging
- Google Automatic Video Tagging
- Google Translation
- Imagga Auto Tagging
- Imagga Crop and Scale
- Perception Point Malware Detection
- Microsoft Azure Video Indexer
- OCR Text Detection and Extraction
- Pixelz - Remove the Background
- URL2PNG Website Screenshots
- VIESUS™ Automatic Image Enhancement
- WebPurify Image Moderation
- References
- SDKs
- Release Notes
Last updated: Jan-25-2024
On this page:
When using the Vue.js 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
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).
Notes
- Each of the upload options described above can also be performed as a signed upload, but in this case, an authentication signature must be generated on your backend server. This can be implemented in conjunction with one of Cloudinary's backend SDKs, which implement helpers to automatically generate the authentication signature for the upload.
- If you are using jQuery in your app, you can take advantage of the built-in upload functionality in Cloudinary's jQuery SDK. This solution uses HTML5 cross-origin resource sharing (CORS) and gracefully degrades to a seamless iframe based solution for older browsers.
Code examples
- 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.
✔️ Feedback sent!
✖️
Error
Unfortunately there's been an error sending your feedback.