facebook
George Anderson
Frontend and backend development guru, lover of all things computer... and cats! Hopes to make your coder life a breeze by sharing some tips and tricks of the trade.
Posted on Aug 13th 2019

One of the most used features of a webpage is the ability to be able to upload files, so in this article, we will learn how to upload files using Vue and Firebase.

Firebase provides a realtime database and backend as a service, also, we can utilize the Firebase API to synchronize data from the client to the cloud. Today we will be using Firebase Storage to store the selected file from our system. Let’s begin with the setup of our Firebase project and after it is up, we’ll focus on creating a Vue project on CodeMix for our application.

Firebase Setup

Firebase is a Google Service, so we need to log into our Google account to access the Firebase Console, once we log with our account, we need to create a Firebase Project in our account.


Secondly, we need to name our project, let’s use Vue-upload for the project’s name.

The next step will ask us if we want to enable Google Analytics for our Firebase project, in this case as it is only for demonstration we will select Not right now and click on Add Firebase.

After a few seconds, we will be now on our Firebase console, and from there we will have to go to Project Settings and then click on Add web app.

Here we will obtain the information needed to access Firebase from our app.
As the information is unique to each Firebase project, we have blurred the code for security purposes. As you can see, there is nothing on the storageBucket line, so, we have to create a bucket and allow the upload of files to Firebase without authentication, for that we need to change the Storage Rules to allow uploading without authenticating, changing the value from null to true.

Note: If you keep getting an empty storageBucket value, try refreshing the page or logging out and then logging back into Firebase.


If now we take a look at our Firebase snippet, we will find that there is now data on the storageBucket line, and now we are ready to start uploading files to Firebase.

Configuring the Development Environment

For this tutorial, we will be using the Eclipse IDE with the CodeMix plugin installed.

If you’re looking for an IDE to take on development with frameworks like Angular, React, and Vue.js, or languages like Python and Rust, CodeMix has you covered. For Vue, install the Vue pack or the famed Vetur extension for Vue support. Codemix is compatible with all Eclipse-based IDEs and tools, such as MyEclipse, Spring Tools Suite, and JBoss Tools.

Creating a Vue Project using CodeMix

We can now create our application using the CodeMix Project Wizard. To create a new Vue Project, navigate to File > New > Project > CodeMix > Vue Project. Ensure you choose the, “A Vue CLI-built application” option in the wizard before clicking Finish.

Once the project is completed, open the integrated Terminal+ for the project using Ctrl/Cmd + Shift + P, and executing the command, “Terminal: Create New Integrated Terminal”. If you have more than one project in your workspace, you will be asked to select your project in the command palette before the Terminal is opened.

In the Terminal, run the following commands to install the required Node modules.
npm install

Here you can create the content that will be used within the module.

Building the App

First of all, we will have to install Firebase in our project, for this we will need to open a terminal instance and use the npm install firebase command.

Once it is installed, we will need to import Firebase to our project, for that we need to open the main.js file and import using import firebase from 'firebase' and use firebase.initializeApp and insert inside of it the lines of code we got from the Firebase console.



In the components folder, create a file named Upload.vue. You can do this by using the New > Vue file wizard accessible from the project’s context menu. Here we can use scaffold to insert the base code for our component. 

Note: For more on CodeMix’s Vue capabilities, please read this article.

Template

Inside the template tags, we are going to use an input tag with the file attribute to select the image file to upload, we are adding a progress tag to show the percentage of the upload. We need to insert an img tag to preview our file and a button to execute the upload.
<template>
  <div>
    <div >
      <p>Upload an image to Firebase:</p>
      <input type="file" @change="previewImage" accept="image/*" >                
    </div>
    <div>
      <p>Progress: {{uploadValue.toFixed()+"%"}}
      <progress id="progress" :value="uploadValue" max="100" ></progress>  </p>
    </div>
    <div v-if="imageData!=null">                     
        <img class="preview" :src="picture">
        <br>
      <button @click="onUpload">Upload</button>
    </div>   
  </div>
</template>

As you can see we used the method previewImage when a file is selected, this method will allow us to store the data from the files array into a variable named imageData that we are going to declare inside the script tag.

On the src field we are instantiating a picture variable, which will store the actual image to display when the upload is completed with the onUpload method.

Script

Inside the script tags, we need to import firebase and create the variables alongside the methods mentioned above.
The onUpload method will make use of the Firebase API to store the file selected. So, we need to create a const named storageRef that will be used to access all of the data and be used to create a Snapshot of the upload to obtain data from it, like te percentage of the upload and also the URL where the file is being stored.

Once the upload is finished, the image URL will be stored in picture.

<script>
import firebase from 'firebase';
 
export default {
  name: 'Upload',
  data(){	  
	return{
      imageData: null,  
      picture: null,
      uploadValue: 0
	}
  },
  methods:{
    previewImage(event) {
      this.uploadValue=0;
      this.picture=null;
      this.imageData = event.target.files[0];
    },
 
    onUpload(){
      this.picture=null;
      const storageRef=firebase.storage().ref(`${this.imageData.name}`).put(this.imageData);
      storageRef.on(`state_changed`,snapshot=>{
        this.uploadValue = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
      }, error=>{console.log(error.message)},
      ()=>{this.uploadValue=100;
        storageRef.snapshot.ref.getDownloadURL().then((url)=>{
          this.picture =url;
        });
      }      
      );
    }
  
  }
}
</script>

Style

Another thing to keep in mind, is to include inside our style the format we want to give to our components, in this case a width of 200px to the preview component.

<style scoped="">
img.preview {
    width: 200px;
}
 
</style>

Final Touches

Finally, the last step would be importing our Upload component to the App.vuefile like below:

<template>
   <div id="app">
      <upload></upload>
   </div>
</template>
 
<script>
import Upload from './components/Upload.vue'
 
export default {
  name: 'app',
  components: {
    Upload
  },
}
</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>

If we have the latest CodeMix version, we can just launch our app from the Live Preview button, wait just a little while until the server is running and then upload a file into our storage in Firebase as shown in the following GIF.

Conclusion

In this article, we’ve learned how to create a file upload component with Vue, and used Firebase as a storage service for our files. While CodeMix provides superlative support when editing Vue files, we also see how the new Live Preview makes it easy for us to see changes in our app as we develop it.

You can download the source code from our GitHub repository.

On a remote dev team? Try CodeTogether—it’s free!

• Live share IDEs & coding sessions
• See changes in real time
• Cross-IDE support for VS Code, IntelliJ & Eclipse
• Guests join from Browser or IDE
• End-to-end source encryption


www.codetogether.com