Created
November 25, 2017 04:40
-
-
Save kkm/2c0d0a4ba82ebe61c4b6c839c4b5a8e0 to your computer and use it in GitHub Desktop.
Firstore Storage Upload in Javascript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>File Upload</title> | |
| <meta name="description" content="kkm's Upload in Power Cloud"> | |
| <style> | |
| #log { | |
| display: none; | |
| } | |
| .center, #log { | |
| margin: auto; | |
| width: 50%; | |
| padding: 50px; | |
| } | |
| #files { | |
| border: 5px solid green; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <input type="file" name="file" id="file" style="display: none"/> | |
| <div class="center"> | |
| <h1>File Upload - FU</h1> | |
| </pre> | |
| </div> | |
| <div class="center" id="files"> | |
| Click here... | |
| </div> | |
| <br> | |
| <div id="log"></div> | |
| <script src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-firestore.js"></script> | |
| <script> | |
| var config = { | |
| apiKey: "xxxx", | |
| authDomain: "yyyyy.firebaseapp.com", | |
| storageBucket: "xxxxx.appspot.com" | |
| }; | |
| firebase.initializeApp(config); | |
| var storageRef = firebase.storage().ref(); | |
| $(document).ready(function () { | |
| $("#files").click(function () { | |
| $("#file").click(); | |
| }); | |
| $('#file').on("change", function () { | |
| var file = this.files[0]; | |
| var metadata = { | |
| 'contentType': file.type | |
| }; | |
| var uploadTask = storageRef.child("uploader/" + file.name).put(file, metadata); | |
| uploadTask.on('state_changed', function (snapshot) { | |
| $("#log").show(); | |
| var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; | |
| $("#log").html('Upload is ' + progress.toFixed(2) + '% done'); | |
| switch (snapshot.state) { | |
| case firebase.storage.TaskState.PAUSED: // or 'paused' | |
| console.log('Upload is paused'); | |
| break; | |
| case firebase.storage.TaskState.RUNNING: // or 'running' | |
| console.log('Upload is running'); | |
| break; | |
| } | |
| }, function (error) { | |
| $("#log").show(); | |
| $("#log").html(JSON.stringify(error)); | |
| }, function () { | |
| var downloadURL = uploadTask.snapshot.downloadURL; | |
| $("#log").show(); | |
| $("#log").html("Download Links: <br>" + downloadURL); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment