Drag and Drop Image Upload with Vue.js, Dropzone, and Firebase

Diligent Dev
Feb 26 · 4 min read

Uploading images is a necessary but tedious task found in many web applications. It’s also something that many junior developers struggle with. Luckily, there are some great packages that take a lot of the legwork out of this process. In this article, we’ll cover how to upload images using Vue, Dropzone, and Firebase Storage.

Video Tutorial

Video Tutorial

Project Setup

To get started you’ll need NodeJs installed. For this tutorial, we’ll also be using VS Code as our code editor but you can use whatever you’d like.

Creating the Vue Project

To create our Vue project, open your terminal, cd into your desired directory and run the following command:

npx vue create firebase-image-upload

Then, choose the default preset (default (babel, eslint)). This will create a standard Vue project that we will be working out of. After this has finished, open the project in VS Code.

Installing Packages

Now we’re going to install some npm packages that will make the uploading our images super easy. Open a new terminal in VS Code (Terminal -> New Terminal) and run the following command:

npm install --save firebase vue2-dropzone uuid

Creating the Firebase Project

Before we go any further, we’ll need to create our Firebase project and include it in our Vue app. Head over to Firebase and create an account if you don’t already have one. Don’t worry about the cost as Firebase as a very generous free tier.

Once you’ve created your account and signed in, click on “Go to Console” in the upper right corner of the screen. Then click the “Create New” Project button and choose all of the default settings.

In the left-hand menu, click on Develop then Storage.

You will then see a “Get Started” button. Click on that and select all the defaults from the pop-up. Firebase automatically sets up storage rules. The default rules require a user to be logged in to upload files.

Since I’m not covering authentication in this tutorial we’re going to edit the default rules. At the top of the main storage screen, you should see a tab for Rules. Navigate to that section, paste the code below your rules and publish them:

rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;
}
}
}

** IMPORTANT: These rules will allow anyone to upload to this bucket. For production apps, you should lock this down. To learn more about how to do that visit the Firebase storage rules documentation. **

After the project and storage have been set up, click on Project Overview in the left-hand menu then click on the web icon.

Firebase Web Start

Give your app a Nickname and click next. You will then be presented with some code. Inside of the <script> tags copy everything.

Firebase Config

Now head back to your Vue project, open src/main.js. At the top of the file, underneath the existing imports, add the following:

import firebase from 'firebase'

Then paste in the firebase config. Your main.js file should look like this:

Image Upload

Now that we have Firebase added to our Vue project, we can start on the image upload. Inside of our src/App.vue file, we’ll remove all the boilerplate code inside of the template, script, and style tags. In the script tag, we’ll import Dropzone and Firebase at the top.

import firebase from 'firebase';
import dropzone from 'vue2-dropzone';
import "vue2-dropzone/dist/vue2Dropzone.min.css";

Underneath our imports, we’ll add dropzone as a component and some Dropzone options. Dropzone has a built-in function called @vdropzone-complete that fires every time an upload completes. We’ll hook into that and create a method called afterComplete with our own method to save our images to firebase.

Next, we’ll add the Dropzone component with our config to the template. And, just for some finishing touches, we’ll add an images property to our data object and display the images below dropzone with a v-for.

In the end, your App.vue file should look like this:

There you have it. An easy drag and drop image uploader with Vue, Firebase, and Dropzone. If you have any questions or concerns about this article, please feel free to leave a comment below!

JavaScript in Plain English

Learn the web's most important programming language.

Diligent Dev

Written by

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

How to Secure Your API With JSON Web Tokens

More from JavaScript in Plain English

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade