Creating a Vue.js Application for Uploading Assets to Cloudinary

Cloudinary provides software development kits (SDKs) in multiple languages, widgets, and jQuery plugins. These all enable users to programmatically upload files of all types to the cloud. But, did you know you can use Cloudinary's Upload API in a front-end framework like Vue.js to create your own upload component? In this tutorial, we walk through and share code to enable you to create your own Cloudinary upload component.

This tutorial shows the steps to create a Vue.js application that allows you to upload an image to the cloud. For further information about Cloudinary's ability to use the Upload API, we recommend reviewing our documentation on the subject. We also recommend reviewing our documentation for help with rendering images using the Vue.js SDK.

You can follow along with the application demo and code repository on GitHub.com.

Tutorial Sections

• Watch a Video
• Preparation
• Security
• Demo
• Code
• Media Library
• Challenge
• Documentation

Watch a Video

• Background music provided by Gunnar Olsen.

Go back to the top of the tutorial.

Preparation

This tutorial explains how to upload data using a Cloudinary API with Vue.js. Using the methods presented in this video, you can control the upload of files to the Cloudinary cloud. This is done without a server, but using familiar front-end HTTP clients. The component that is built in this tutorial uses the axios library. However, you could use other HTTP clients such as the Fetch API, the XMLHttpRequest object, jQuery, the browser-request library, or the superagent library.

You should have experience setting up the Vue.js Hello World component and familiarity with coding templates and scripts.

Besides vue, this script has only two dependencies. Both are available on npmjs.org:

• axios library, which is a promised-based client for HTTP requests
• vuejs-progress-bar, which produces an SVG vector-based progress bar

You should also register for an account on Cloudinary. There, you will create a cloud name and an unsigned upload preset in the Management Console's Settings section.

You'll be assigned or can provide your own cloud name when you register for an account. The video portion of this tutorial contains a silent walk through showing how to create an unsigned upload preset. 

Go back to the top of the tutorial.

Security

We’ll use a cloud name and an unsigned upload preset as credentials for performing an upload to the cloud. 

Cloudinary provides robust security and signed presets, which rely on API_KEY and API_SECRET.  We don’t want to or need to expose those in this front-end application. You’ll see links that copy the key and secret to the clipboard in order to reduce exposure. API_SECRET should be used only when it can be hidden behind a server.

The unsigned upload preset provides a way to limit access to those users who should have the ability to upload to the cloud. 

There are many options available that can be added to the POST when using an unsigned preset, but you cannot use the full set of options available to a signed preset.

More details on building upload presets are available in our free, self-paced Cloudinary Academy Fundamentals for Developers course, particularly in the “Direct Upload from Browser” and the “Creating and Using Upload Presets” lessons.

Additionally, upload presets provide many features that are not covered in this tutorial. See our documentation for more information on upload presets.

Go back to the top of the tutorial.

Demo

Before looking at the code, we can demonstrate the file upload using a Vue.js app. The user must supply credentials in the form of a cloud name and a preset.

In this demonstration, we are keeping it simple by uploading a single local file.  It is possible to upload multiple assets from a number of sources. There is a JavaScript-based Upload Widget from Cloudinary, which can be configured to upload from non-local locations. This widget could be wrapped in a Vue.js component.

Next, the user can select a file from their local file system.

Once the file is selected, the user can upload the file to Cloudinary and monitor the upload with a status bar.

Once the upload is complete, the user can view the uploaded file on the web page.

Note that this is an instructional application. There are many ways to provide the cloud name and upload preset to an application. They are not considered secret credentials.  We are using them as form inputs for instructional purposes.  Depending on how your application is used and deployed, they may be included as constants in the application.

Go back to the top of the tutorial.

Code

We can use a Cloudinary API endpoint in a Vue.js app to upload files to Cloudinary. In this tutorial, we’ll upload images, but we can use the same endpoint to upload videos and raw files.

In keeping with the component-based paradigm supported by Vue.js and other frameworks, we’ll create a "CloudinaryUpload" component.

We can now use this component wherever it is needed in this app by importing it and then using a semantic tag in the template.

Submitting the Form

Let’s start with the form in our vuejs template. We'll prevent submitting our form to a server because this is a single-page app and we don’t want a page refresh. Instead, we instruct vue.js to execute the upload method when a user triggers the submit action. Also, we control the posting of the file to Cloudinary from the browser. This means we don’t need to encode the file input as a multipart/form.

Filename Extracted from Input Change Event

Our user selects an image from their local file system using the standard HTML file input.  Notice that we are limiting the file type to an image format in the application.  If we modified or removed this attribute, we would be able to select other types of files with the HTML file input element. 

The change handler will be called after the user selects a file.  The information about the file is contained in the $event object.

Next, we get the name of the file from the event triggered by the user selection. The event target contains a files array and since we just want one file, we take the first one. The filesSelected variable is set to the number of files in the target. This variable is a flag to indicate that that at least one file has been selected. We'll use this flag to determine if the Upload button should be enabled.

Using the File Reader API

With the filename, we use the Web FileReader API to read the contents of the file as a Base64-encoded string. After the API is instantiated, a "load" listener is attached. This code will be triggered once the file read is complete.  If a file has been selected, it is then read.

Form Data and Upload Endpoint

We call a function to package up the form data and we complete the endpoint by adding the cloud name created at registration and found in the Management Console's Dashboard section.

In preparation for posting the image to the cloud, we package up a Cloudinary preset, the file contents, and any API options in a JavaScript FormData object.

The tags parameter is optional. It is a comma-delimited string. Tags are provided as comma-delimited strings. For example, if I want to assign a single tag in this code, I would set:

this.tags = "unsigned upload"

However, if I wanted to assign multiple tags, I would set:

"this.tags="unsigned upload,vue-upload" 

I can name the tags whatever I want, except I wouldn't put a comma in the name. They can be created during upload, configured within a preset or manually added in the Management Console.  Tags help with organizing and accessing media assets. More information about using tags with your Cloudinary assets can be found in our documentation.

Post the Form Data with Axios

We’re using the Axios library to post the data to the endpoint. So, we’ll create a request object that contains the form data, the URL and the method, which is POST. We also include a function callback that receives upload information from Cloudinary and enables us to show progress to the user.  We bind this to the onUploadProgress function so that the callback can access Vue.js state data.

Finally, we are ready to post to the upload endpoint using axios.  The sequence for this promise-driven process is:

1. Show the progress bar.
2. Execute Axios with the request object options.
3. Capture the results if the post is successful.
4. Capture the errors if the post fails.
5. When all events are complete, wait one second to hide the status bar.

Use URL Returned from Successful Upload to Display Image

When the upload has successfully completed, we can get a secure URL from the response. This is used to render the uploaded image back to our user.

The secure_url can be bound to the Vue.js template to give visual feedback to the user.

Go back to the top of the tutorial.

Media Library

Once you’ve completed an upload, you can go to your Management Console's Media Library section. 

My upload preset specified that all images be loaded into the vue-upload folder.

Notice that my upload preset also allows for multiple copies of the image. Cloudinary assigns them with unique Public IDs.

With your uploaded image, you can work on image transformations!

Go back to the top of the tutorial.

Challenge

If you want a challenge, upload a video or raw file by

• removing the accept attribute in the file input tag and
• adding a resource type equal to auto to the form data

Go back to the top of the tutorial.

Documentation

Live Demo and Code Repository

You can find more information related to this tutorial online. This includes the full application demo and code repository on GitHub.com.

You can also find out more about how to create and use upload presets online in our documentation, Knowledge Base and the Cloudinary Academy.

If you have questions, our support team can help you out.

Go back to the top of the tutorial.