Cloudinary Blog

Uploading Vue Files and Rich Media in Two Easy Steps

Uploading Vue Files to Cloudinary

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.

This article steers you through a painless setup process for Vue file upload's to Cloudinary. Follow the procedures below.

How to Optimize for Page Load Speed

Set Up a Vue Project

The most straightforward way in which to quickly set up a Vue project is through Vue CLI.

First, install Vue CLI:

Copy to clipboard
npm install -g vue-cli

Second, create a Vue project:

Copy to clipboard
vue create upload

Now run the project:

Copy to clipboard
npm run serve

Set Up File Uploads

Step 1: Edit App.vue.

Edit the App.vue file, as follows:

1. Within the <template> tag, delete all the code except for the <img> and <HelloWorld> components.

2. Add an Upload files button:

Copy to clipboard
<div>
      <button @click="openUploadModal">Upload files</button>
</div>

@click=”openUploadModal means that clicking Upload files calls the openUploadModal function.

3. Add the openUploadModal function to the JavaScript section of the file:

Copy to clipboard
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  methods: {
    openUploadModal() {
     }
}
</script>

Step 2: Integrate With the Cloudinary Upload Widget.

Use the Cloudinary upload widget for Vue file uploads. Seamless to integrate, that widget also offers many other remarkable features, including transformation and delivery.

Do the following:

1. Open your public/index.html file and add the widget script to the <body> tag:

Copy to clipboard
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>

2. In App.vue, populate the openUploadModal function with this code:

Copy to clipboard
  window.cloudinary.openUploadWidget(
        { cloud_name: '<your-cloud-name>',
          upload_preset: '<your-upload-preset>'
        },
        (error, result) => {
          if (!error && result && result.event === "success") {
            console.log('Done uploading..: ', result.info);          }
        }).open();

The code above calls the widget’s openUploadWidget function, invoking a robust upload modal and uploading the file.

Note: Obtain your cloud name and value for the upload preset from your Cloudinary account’s dashboard and settings page, respectively, for the values of your-cloud-name and your-upload-preset. Signing up for a Cloudinary account is a prerequisite.

presets
Settings Page for Upload Presets

Now click Upload files for the upload widget:

Cloudinary Upload Widget
Cloudinary Upload Widget

Open your browser’s DevTools so that you can watch the console during the upload:

DevTools

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 and assign the URL from the returned JSON response to the variable, as follows:

Copy to clipboard
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  data() {
    return {
      url: '',
    }
  },
  mounted() {

  },
  methods: {
    openUploadModal() {
      window.cloudinary.openUploadWidget(
        { cloud_name: 'unicodeveloper',
          upload_preset: 'b9ej8dr5'
        },
        (error, result) => {
          if (!error && result && result.event === "success") {
            console.log('Done uploading..: ', result.info);
            this.url = result.info.url;
          }
        }).open();
    }
  }
}
</script>

Finally, add the following to your template below the code for the **Upload files** button:

```html
....
.
.

<div>
        <img :src="url" />
</div>

Now upload again.

Vue File Upload

Yes! That’s a direct Vue file upload with no back-end setup, and pure vibes.

Other Enhancements

With Cloudinary’s upload widget, you can do a lot more than just uploading files. An entire suite of drop-in Vue UI components are available for cropping, transformation, video display, and numerous other tasks.

Why not try a few by sprinkling them in your codebase to enhance the display of your uploaded image? Follow these steps:

1. Install Cloudinary’s Vue SDK:

Copy to clipboard
npm install cloudinary-vue

2. Update App.vue to—

  • Import the components from the cloudinary-vue package.
  • Place the UI components in the template.
  • Add a publicId variable to the Vue data() function.
  • Assign the public_id value returned from Cloudinary’s JSON response to the data variable’s public ID (public_id).
Copy to clipboard
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js File Upload App"/>

    <div>
      <button @click="openUploadModal">Upload files</button>
    </div>

    <div>
      <cld-context cloudName="<your-cloud-name>">
        <div style="display: flex; justify-content: center;">
          <cld-image :publicId="publicId" width="250" crop="scale" />
          <cld-image :publicId="publicId" width="300" crop="scale" />
          <cld-image :publicId="publicId" width="350" crop="scale" />
          <cld-image :publicId="publicId" width="400" crop="scale" />
          <cld-image :publicId="publicId" width="450" crop="scale" />
        </div>
      </cld-context>
    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { CldContext, CldImage } from 'cloudinary-vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    CldContext,
    CldImage
  },
  data() {
    return {
      url: '',
      publicId: ''
    }
  },
  methods: {
    openUploadModal() {
      window.cloudinary.openUploadWidget(
        { cloud_name: '<your-cloud-name>',
          upload_preset: '<your-upload-preset>'
        },
        (error, result) => {
          if (!error && result && result.event === "success") {
            console.log('Done uploading..: ', result.info);
            this.url = result.info.url;
            this.publicId = result.info.public_id;
          }
        }).open();
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Now upload your files. Yaaaaay!

vue file upload

A Challenge for You

Here’s a challenge for you: take Vue file uploads to a more sophisticated level. Maybe start with the CldTransformation and CldPoster components.

The sky’s the limit as to how many amazing things you can do with Cloudinary to enhance your app’s media capabilities. Do start right away! You’ll be happy you did.

Want to Learn More About File Uploads?

Recent Blog Posts

Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more