Created
April 23, 2017 06:52
-
-
Save mottaquikarim/849600d6ed5d7cdcc1cae84d43836390 to your computer and use it in GitHub Desktop.
firebase storage / with file upload
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> | |
| <head></head> | |
| <body> | |
| <!-- ADDED THESE LINES --> | |
| <input type="file" class="js-fileElem" multiple accept="image/*" style="display:none"> | |
| <a href="#" class="js-fileSelect">Select some files</a> | |
| <!-- END ADDED THESE LINES --> | |
| <script src="https://www.gstatic.com/firebasejs/3.8.0/firebase.js"></script> | |
| <script> | |
| (() => { // protect the lemmings! | |
| // Initialize Firebase | |
| const config = { | |
| apiKey: "XXX-XXX", | |
| authDomain: "XXX-XXX-XXX.firebaseapp.com", | |
| databaseURL: "https://XXX-XXX-XXX.firebaseio.com", | |
| projectId: "XXX-XXX-XXX", | |
| storageBucket: "XXX-XXX-XXX.appspot.com", | |
| messagingSenderId: "XXX" | |
| }; | |
| firebase.initializeApp(config); | |
| // Get a reference to the storage service, which is used to create references in your storage bucket | |
| const storage = firebase.storage(); | |
| // Create a storage reference from our storage service | |
| const storageRef = storage.ref(); | |
| // Create a child reference | |
| const imagesRef = storageRef.child('images'); | |
| // imagesRef now points to 'images' | |
| // Create a ref to a file - space.jpg | |
| const spaceRef = imagesRef.child('space.jpg'); | |
| // ^^^ now you should have a "path" in your firebase storage that looks like: 'images/space.jpg' | |
| /* ADDED THESE LINES */ | |
| // select anchor tag and file input | |
| const fileSelect = document.querySelector('.js-fileSelect'); | |
| const fileElem = document.querySelector('.js-fileElem'); | |
| // click handler for fileElem | |
| fileSelect.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| // trigger click on input type="file" | |
| // this will call the change event defined below | |
| if (fileElem) { | |
| fileElem.click(); | |
| } | |
| }); | |
| // change handler for fileSelect | |
| fileElem.addEventListener('change', (e) => { | |
| // e.target.files contains File object references | |
| // to all chosen items by user | |
| console.log(e.target.files); | |
| }); | |
| /* END ADDED THESE LINES */ | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thank you so much sir for this how can i upload file into Dropbox ,google drive like this way can you plz hellp me