Question

Build an application (web) in the firebase console and use the firebase storage service in your application

Note / Any web application can be used

Answer 1

Step 1:

To create an application in firebase console

Add Security rule for Firebase Storage:

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
       // Only Authenticated user can upload the file
       allow read, write: if request.auth != null;       // Anyone can upload the file/ No Auth Require 
       // allow read, write: true;
    }
  }
}

Step 2:

In this step we create a simple file input tag and add a JavaScript event onchange() with id files.

<input type="file" onchange="uploadFile()" id="files" name="files[]" multiple />

Step 3:

Create a reference for Firebase Storage, In order to upload or download files, delete files, or get or update metadata, you must create a reference to the file you want to operate on. A reference can be thought of as a pointer to a file in the cloud. References are lightweight, so you can create as many as you need, and they are also reusable for multiple operations.

Create references from the storage() service in your Firebase app. This reference points to the root of your Cloud Storage bucket.

// Created a Storage Reference with root dir
var storageRef = firebase.storage().ref();

Get the file from the DOM and Create a reference to file

// Get the file from DOM
var file = document.getElementById("files").files[0];
console.log(file);//dynamically set reference to the file name
var thisRef = storageRef.child(file.name);

Upload from a Blob or File Once you’ve created an appropriate reference, you then call the put() method. put() takes files via the JavaScript File and Blob APIs and uploads them to Cloud Storage.

//put request upload file to firebase storagethisRef.put(file).then(function(snapshot) {
    console.log('Uploaded a blob or file!');
});

and Complete code:

<input type="file" onchange="uploadFile()" id="files" name="files[]" multiple /><script>    //function to save file
    function uploadFile(){
      
      // Created a Storage Reference with root dir
      var storageRef = firebase.storage().ref();      // Get the file from DOM
      var file = document.getElementById("files").files[0];
      console.log(file);
      
      //dynamically set reference to the file name
      var thisRef = storageRef.child(file.name);

      //put request upload file to firebase storage
      thisRef.put(file).then(function(snapshot) {
         alert("File Uploaded")
         console.log('Uploaded a blob or file!');
      });
    }

 </script>