Mudark

A simple component to upload photos

by Jay Angelo Valmocina

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"  type="text/stylesheet"/>
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
    <title>Muff Dark</title>
  </head>
  ?<body>
  
    <div class="file has-name is-fullwidth">
  <label class="file-label">
    <input type="file"  hidden class="file-input" value="upload" id="fileButton"/>
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
  
    </span>
  </label>
  </div>
   <!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://www.gstatic.com/firebasejs/5.4.0/firebase-app.js"></script>
      <script src="https://www.gstatic.com/firebasejs/5.4.0/firebase-storage.js"></script>    
   </body>
</html>

CSS

body {
        display: flex;
        min-height: 100vh;
        width: 100%;
        padding: 0;
        margin: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

#uploader {
  -webkit-appearance: none;
  -appearance: none;
  width: 50%;
  margin-bottom: 10px;
}

JavaScript

var config = {
            apiKey: "AIzaSyA2nitCsJVmj_5EYFa4pJtZX58lAj1chCw",
            authDomain: "learntools-2c585.firebaseapp.com",
            databaseURL: "https://learntools-2c585.firebaseio.com",
            projectId: "learntools-2c585",
            storageBucket: "gs://learntools-2c585.appspot.com",
            messagingSenderId: "443185504444"
        };
        
        firebase.initializeApp(config);
          
     
         $("#fileButton").change(function(e){

           // get file
            var file = e.target.files[0]   

            // upload file
            var storageRef =  firebase.storage().ref('iPhone/'+ file.name);
            var task = storageRef.put(file);       

            task.on('state-changed', function(snapshot){
                var percentage = (snapshot.bytesTransferred/snapshot.totalBytes) * 100;
                $('#uploader').value = percentage; 
              });
         })