Upload files using Vue and Firebase

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

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

• Download Eclipse IDE here.
• CodeMix can be installed from the Eclipse marketplace or via genuitec.com.
• Install the Vue pack using the CodeMix extension browser.

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

<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

<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.

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