Image for post
Image for post

Upload files to Cloudinary using Vue & Vuetify

Nicky Christensen
Jan 27, 2020 · 6 min read

Not long ago I was building a SaaS platform where we were using Cloudinary to store images. The file upload had to be done from the client-side, so I had two options. Either use the Cloudinary upload widget or build it on my own. I chose the latter, as the upload widget came with a lot of JS overhead in size, and had minimal ways to style it.

So let’s get to it.

Just for doing the whole thing from scratch, we will start off by creating a new project.

Boot up a new Vue app by using the command vue create cloudinary-demo

After the process is done, we’ll add Vuetify by running vue add vuetify — For this purpose, just choose the default setup.

Great, so now that we’ve got a running project, we can get started on what this article is all about.

Let’s start by opening the your project in your favourite editor, i’m using WebStorm.

If you dont want to follow this article step by step, you can check out a link to the full source code on Git in the bottom of this article.

Open the file App.vue and clean it up, so it looks something like

Now that we have a clean component, we can get started.

For uploading images to Cloudinary, we need to have a file input type, so we can choose the files we want to upload. We’ll use the component <v-file-input /> (see the documentation here)

We’ll add this component inside <v-content></v-content>

The component needs to be hooked to to a change event so we can catch the files chosen. Add a function to methods{}, i’ll call this onAddFiles() and add that to the component as well.

In the function we’ve created in methods, we can catch all the files selected from the component.
We need to have a parameter in the function. This parameter will contain the files. The file input component will return an array of File Objects to the method. Go ahead and add this as well.

Try logging the parameter in the function, and see the console in the browser after you’ve selected a few files.

You should see an array of files. This means we can work with that data. Next step in to take each file and upload it too Cloudinary.

If you haven’t already got an account on Cloudinary, you can go sign up now, it’s free.

When you’ve signed up, you need to setup a few things. Go to “settings” -> “upload” and enable “unsigned uploads”.

Image for post
Image for post

This will generate an upload preset that we need to use to upload our files. We need to add that in our code together with API base url (which can be found on the “Dashboard” tab, under “Account details”), later on.

Image for post
Image for post

Now that that we’ve got the upload preset and the API Base Url, we can go back to the code.

Cloudinary doesn’t support sending an array of files, which means we will have to iterate over the files array and upload each file separately.

Extend the method to:

Now that we’ve got each file, we need to create the upload function that can pass the files onto Cloudinary.

In this function, we’ll need the two things. The upload preset and the API Base Url as I mentioned earlier.

NOTE: We’ll need to extend the base url with /upload/ for it to work correctly.

Add a new function in methods, i’ll name it uploadFileToCloudinary() and add the following code:

You need to replace CLOUDNAME and YOURUPLOADPRESET in the two variables CLOUDINARY_URL and CLOUDINARY_UPLOAD_PREEST with the base url and upload preset from before.

Next, we’ll add a few additional properties to the data that will come in handy later on.

Add the following:

Now we’ll modify the onAddFiles(), call the upload method for each file, and push the response to this.files, which points to the empty array that we’ve created in the data.

Let’s modify the HTML a bit, so we can see which files are uploaded when done and also display an error message if the upload failed.

Last thing and we’re done.
Right now we’re just alerting all errors from the uploadFileToCloudinary() function. We need to change this in order to see the error in the UI.

Replace all alerts with:

Done, and there you have it, we’ve got a fully functional way of uploading files to Cloudinary.

Your end result should be looking something like this after you’ve uploaded your files:

Image for post
Image for post

To sum up: this is an ultra simple way of uploading files to Cloudinary, and can be extended in multiple ways to make it even better and more flexible.

I’ve also added the full source code on Github, so be sure to make a fork from there if you’re in doubt:

I hope you enjoyed the article and found it easy and useful.
Uploading files can sometimes be tricky, but using Vue, Cloudinary and Vuetify, it’s a breeze.

If you’d like to catch up with me sometime, follow me on Twitter | LinkedIn| Facebook or simply visit my portfolio website (That is however in Danish)

Vue.js Developers

Helping web professionals up their skill and knowledge of…

Nicky Christensen

Written by

Head of development @ AccuRanker— VueJS Fanboy — In love with most frontend related stuf — /

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Nicky Christensen

Written by

Head of development @ AccuRanker— VueJS Fanboy — In love with most frontend related stuf — /

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store