> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # Vue.js image and video upload 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](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](https://codesandbox.io/s/upload-widget-vue-hmezny) that you can fork to try out some sample configuration changes: #### Video tutorial Watch this video tutorial to see how to integrate the Upload widget into your Vue.js app: This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language. #### Tutorial contents This tutorial presents the following topics. Click a timestamp to jump to that part of the video. #### Introduction to the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=0 :sec=05 :player=cld} | Cloudinary has many ways to upload files to your Media Library to take advantage of Cloudinary's extensive features and capabilities. In a Vue.js app you can use the Upload widget as a quick and easy way to provide a full upload experience. | #### Add the Upload widget script to your Vue.js app {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=0 :sec=48 :player=cld} | Start with an empty Vue.js application and add the Upload widget JavaScript file. Paste the code, which you can find in the [Upload widget documentation](upload_widget#unsigned_uploads), into the `` section of **index.html**. | #### Add a button to open the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=1 :sec=38 :player=cld} | In **App.vue**, add a button that calls a function `openUploadWidget()` when it's clicked. Create that function, and inside it, call `widget.open();`. | #### Initialize the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=1 :sec=59 :player=cld} | Use the `createUploadWidget` method to initialize the widget. Pass in your cloud name (which you can find in the Console Dashboard) and an unsigned upload preset. | #### Create an upload preset {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=2 :sec=46 :player=cld} | In your Cloudinary Console, navigate to **Settings > Upload > Upload presets** to create a new unsigned [upload preset](upload_presets). | #### Create a callback function {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=3 :sec=30 :player=cld} | Create a new callback function to handle the response from the Upload widget. | #### Test it out {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=3 :sec=40 :player=cld} | Click the button to open the Upload widget and upload a file to your Media Library. You can open the uploaded image by copying the `secure_url` parameter from the log and pasting it in a browser. | ### Upload endpoint The [upload endpoint](image_upload_api_reference#upload) is `https://api.cloudinary.com/v1_1/${cloudName}/upload`. To use the endpoint in your application, use the [JavaScript Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/fetch) to call the Cloudinary `upload` endpoint and pass: * an **unsigned** [upload preset](upload_presets) with the [upload method options](image_upload_api_reference#upload) you want to apply for all files * the file(s) to upload * other [unsigned upload parameters](image_upload_api_reference#unsigned_upload_parameters) to apply to the selected files (e.g. `tags`, if needed). Check out the [Upload images with Fetch API video tutorial](upload_images_with_fetch_api_tutorial), which walks through setting up upload parameters with FormData and making HTTP requests to upload images programmatically from the browser. > **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](cloudinary_sdks), which implement helpers to [automatically generate the authentication signature](authentication_signatures#using_cloudinary_backend_sdks_to_generate_sha_authentication_signatures) 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](jquery_image_and_video_upload#direct_uploading_from_the_browser). 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](upload_widget#quick_example). * **Code explorer:** [Upload multiple files using a form](client_side_uploading#code_explorer_upload_multiple_files_using_a_form_unsigned) in pure JavaScript using the Cloudinary upload endpoint. * **CodePen:** [Use the JavaScript Fetch API to upload files](https://codepen.io/team/Cloudinary/pen/OJreJmz) in vanilla JavaScript using the Cloudinary upload endpoint for unsigned uploading with an upload preset. * **Sample project:** [Perform signed uploads from the browser](client_side_uploading#sample_project_upload_multiple_files_using_a_form_signed) by generating a signature on the server.* **Git sample project:** Upload files using the Upload Widget and the REST API in the [Photo Album](https://github.com/cloudinary-devs/vue-photo-album) sample project. > **TIP**: Enjoy interactive learning? Check out more [code explorers](code_explorers)!