Programmable Media

Vue.js image and video upload

Last updated: Aug-04-2024

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 widget

The Upload widget is a ready-made, responsive user interface that enables your users to upload files from a variety of sources directly to Cloudinary. You can customize and embed this UI within your web application with just a few lines of code.

Check out the following Upload Widget Sandbox that you can fork to try out some sample configuration changes:

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:

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

Tip
Enjoy interactive learning? Check out more code explorers!

✔️ Feedback sent!

Rate this page: