{"id":22119,"date":"2020-07-07T23:11:23","date_gmt":"2020-07-07T23:11:23","guid":{"rendered":"http:\/\/uploading_vue_files_and_rich_media_in_two_easy_steps"},"modified":"2022-04-05T15:03:09","modified_gmt":"2022-04-05T22:03:09","slug":"uploading_vue_files_and_rich_media_in_two_easy_steps","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/uploading_vue_files_and_rich_media_in_two_easy_steps","title":{"rendered":"Uploading Vue Files and Rich Media in Two Easy Steps"},"content":{"rendered":"

Vue.js, one of the most popular JavaScript front-end frameworks, is renowned for its simplicity and intuitiveness. Additionally, an active community ensures that plugins or packages, which you can quickly integrate with your app, are available for the Vue.js capabilities.<\/p>\n

This article steers you through a painless setup process for Vue file upload\u2019s<\/a> to Cloudinary. Follow the procedures below.<\/p>\n

Set Up a Vue Project<\/h2>\n

The most straightforward way in which to quickly set up a Vue project is through Vue CLI<\/a>.<\/p>\n

First, install Vue CLI:<\/p>\n

npm install -g vue-cli\n<\/code><\/span><\/pre>\n
Second, create a Vue project:<\/p>\n
vue create upload\n<\/code><\/span><\/pre>\n
Now run the project:<\/p>\n
npm run serve\n<\/code><\/span><\/pre>\n
Set Up File Uploads<\/h2>\n
Step 1: Edit App.vue.<\/h3>\n
Edit the  App.vue<\/code> file, as follows:<\/p>\n
1.<\/strong> Within the <template><\/code> tag, delete all the code except<\/strong> for the <img><\/code> and <HelloWorld><\/code> components.<\/p>\n
2.<\/strong> Add an Upload files<\/strong> button:<\/p>\n
<div<\/span>><\/span>\n      <button<\/span> @click<\/span>=\"openUploadModal\"<\/span>><\/span>Upload files<\/button<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
@click=\u201dopenUploadModal<\/code>  means that clicking Upload files<\/strong> calls the openUploadModal<\/code> function.<\/p>\n
3.<\/strong> Add the openUploadModal<\/code> function to the JavaScript section of the file:<\/p>\n
<script<\/span>><\/span>\nimport<\/span> HelloWorld from<\/span> '.\/components\/HelloWorld.vue'<\/span>\n\nexport<\/span> default<\/span> {\n  name<\/span>: 'App'<\/span>,\n  components<\/span>: {\n    HelloWorld,\n  },\n  methods<\/span>: {\n    openUploadModal() {\n     }\n}\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Step 2: Integrate With the Cloudinary Upload Widget.<\/h3>\n
Use the Cloudinary upload widget for Vue file uploads. Seamless to integrate, that widget also offers many other remarkable features, including transformation and delivery.<\/p>\n
Do the following:<\/p>\n
1.<\/strong> Open your public\/index.html<\/code> file and add the widget script to the <body><\/code> tag:<\/p>\n
<script<\/span> src<\/span>=\"https:\/\/widget.cloudinary.com\/v2.0\/global\/all.js\"<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
2.<\/strong> In App.vue<\/code>, populate the openUploadModal<\/code> function with this code:<\/p>\n
  window<\/span>.cloudinary.openUploadWidget(\n        { cloud_name<\/span>: '<your-cloud-name>'<\/span>,\n          upload_preset<\/span>: '<your-upload-preset>'<\/span>\n        },\n        (error, result) => {\n          if<\/span> (!error && result && result.event === \"success\"<\/span>) {\n            console<\/span>.log('Done uploading..: '<\/span>, result.info);          }\n        }).open();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The code above calls the widget\u2019s openUploadWidget<\/code> function, invoking a robust upload modal and uploading the file.<\/p>\n
\n
Note: Obtain your cloud name and value for the upload preset from your Cloudinary account\u2019s dashboard and settings page, respectively, for the values of your-cloud-name<\/code> and your-upload-preset<\/code>. Signing up for a Cloudinary account<\/a> is a prerequisite.<\/p>\n<\/blockquote>\n
\"presets\"\nSettings Page for Upload Presets<\/em><\/p>\n
Now click Upload files<\/strong> for the upload widget:<\/p>\n
\"Cloudinary\nCloudinary Upload Widget<\/em><\/p>\n
Open your browser\u2019s DevTools so that you can watch the console during the upload:\n\"DevTools\"<\/p>\n
The console returns all the information on the upload, including the URL. To display the image on your app, add a data variable to your JavaScript code in App.vue<\/code> and assign the URL from the returned JSON response to the variable, as follows:<\/p>\n
<script<\/span>><\/span>\nimport<\/span> HelloWorld from<\/span> '.\/components\/HelloWorld.vue'<\/span>\n\nexport<\/span> default<\/span> {\n  name<\/span>: 'App'<\/span>,\n  components<\/span>: {\n    HelloWorld,\n  },\n  data() {\n    return<\/span> {\n      url<\/span>: ''<\/span>,\n    }\n  },\n  mounted() {\n\n  },\n  methods<\/span>: {\n    openUploadModal() {\n      window<\/span>.cloudinary.openUploadWidget(\n        { cloud_name<\/span>: 'unicodeveloper'<\/span>,\n          upload_preset<\/span>: 'b9ej8dr5'<\/span>\n        },\n        (error, result) => {\n          if<\/span> (!error && result && result.event === \"success\"<\/span>) {\n            console<\/span>.log('Done uploading..: '<\/span>, result.info);\n            this<\/span>.url = result.info.url;\n          }\n        }).open();\n    }\n  }\n}\n<\/span><\/script<\/span>><\/span>\n\nFinally, add the following to your template below the code for the **Upload files** button:\n\n```html\n....\n\u2026.\n\u2026.\n\n<div<\/span>><\/span>\n        <img<\/span> :src<\/span>=\"url\"<\/span> \/><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now upload again.<\/p>\n
\"Vue<\/p>\n
Yes! That\u2019s a direct Vue file upload with no back-end setup, and pure vibes.<\/p>\n
Other Enhancements<\/h2>\n
With Cloudinary\u2019s upload widget, you can do a lot more than just uploading files. An entire suite of drop-in Vue UI components<\/a> are available for cropping, transformation, video display, and numerous other tasks.<\/p>\n
Why not try a few by sprinkling them in your codebase to enhance the display of your uploaded image? Follow these steps:<\/p>\n
1.<\/strong> Install Cloudinary\u2019s Vue SDK:<\/p>\n
npm install cloudinary-vue\n<\/code><\/span><\/pre>\n
2.<\/strong> Update App.vue<\/code> to\u2014<\/p>\n