How to upload images on Firebase Storage Download

Upload images on Firebase Storage

Upload images on Firebase Storage

In this tutorial, We’re going to learn how to Upload images on Firebase Storage from a web application and store the image path in MySQL database using javascript and curl PHP. Also, we can show the progress bar of uploading an image to the end-user. Once the document is successfully uploaded in the firebase storage, the Firebase storage returns the URL of that uploaded file so that we can access the URL through a hyperlink or store it in the database and show it as per our requirement.

What is Firebase?

Firebase is an app-development platform on Google Cloud Platform development launched in 2011 by Firebase and acquired by Google in 2014. Started with the Firebase Realtime Database and API that synchronizes software data across Android, and Web applications and stores it on the firebase cloud server. The Firebase is used for application development on a cloud platform.

How to create the Firebase project?

The following steps to create the Firebase project.

  1. Create a Firebase Project: Before starting any project we need to create a Firebase project on the Google Cloud to connect to your website or mobile app. Open the Google Firebase URL and click on the Create Project button.
Create a Firebase Project

2. Enter your project name, check on the terms and conditions check box, and click on the continue button.

Create a Firebase Project

3. On step three click on the continue button and proceed.

create the Firebase project

4. Select your country in the location dropdown, check all three checkboxes, and click on the create project button.

create the Firebase project

5. After clicking the create project button you have received a message “Your new project is ready“.

create the Firebase project

6. Click on the continue button to redirect the firebase dashboard.

create the Firebase project

How to enable Firebase Storage in the Firebase project?

How to enable Firebase Storage in the Firebase project

Open your Firebase console and select your project and click on the storage link which is available on the left menu. Follow the given instruction on the webpage.
After creating the storage in firebase we need to set the rules to access firebase storage with authentication.

But now in this tutorial, I will skip the authentication part and explain the simple Firebase image upload functionality.

How to enable Firebase Storage in the Firebase project

Click on the rule tab and replace the below script to change the access.

For Non-authentication Rules

For Authentication Rules

After adding the above code click on the publish button. Now your configuration is ready to use.

Include the below Javascript library on the header section

Copy the below Firebase configuration object and paste it on the footer section of your web page.

Firebase configuration object

Creating the Database Table

Create the database table in the MySQL database to store the image path. The Create table script looks like this.

Creating the HTML form

Image uploaded in Firebase storage using JavaScript

Create the HTML form to browse the images from your local folder and upload them on Firebase storage using Javascript.

The HTML code looks like this.

The Javascript Code

The following Javascript will upload the images to the Firebase storage and return the uploaded image path.

The PHP Code

Writing the PHP upload code.

Image uploaded in Firebase storage using JavaScript php

Full Source Code

Important Files Name

  1. index.php
  2. dbconfig.php
  3. common.php

Create index.php

Create dbconfig.php

Creating common.php

Images in Firebase storage using Javascript, PHP, and MySQL

Conclusion

Congratulations! You’ve successfully uploaded the images in Firebase storage using Javascript, PHP, and MySQL. You can modify this code as per your requirement.

If you enjoyed this tutorial so please do not forget to share on social media.

For demo and source code please check out the demo and download link.