Created
April 23, 2017 07:33
-
-
Save mottaquikarim/5a0de3c13621dfc880e7565db127b0d2 to your computer and use it in GitHub Desktop.
firebase storage / completed example with refactored code
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
| (() => { // protect the lemmings! | |
| const validate = () => { | |
| throw new Error('This is a required arg'); | |
| }; // validate | |
| const uploadFiles = ( | |
| fileSelectSel = validate(), | |
| fileElemSel = validate(), | |
| onFileChanged = validate() | |
| ) => { | |
| // select anchor tag and file input | |
| const fileSelect = document.querySelector(fileSelectSel); | |
| const fileElem = document.querySelector(fileElemSel); | |
| if (fileSelect === null || fileElem === null) { | |
| throw new Error('Required DOM elements not found by querySelector'); | |
| } | |
| // click handler for fileElem | |
| fileSelect.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| fileElem && fileElem.click(); | |
| }); | |
| // change handler for fileSelect | |
| fileElem.addEventListener('change', (e) => onFileChanged(e.target.files)) | |
| } // uploadFiles | |
| // 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" | |
| }; | |
| // Name of file storage ref "folder" | |
| const FILE_STORAGE_REF = 'images'; | |
| // initialize firebase | |
| firebase.initializeApp(config); | |
| // Get a reference to the storage service, which is used to create references in your storage bucket | |
| const storageRef = firebase.storage().ref().child(FILE_STORAGE_REF); | |
| uploadFiles('.js-fileSelect', '.js-fileElem', (files) => { | |
| if (!storageRef) { | |
| throw new Error('Storage Ref not set!'); | |
| } | |
| const fileUploads = Array.from(files).map((currFile) => { | |
| // we store the name of the file as a storage ref | |
| const fileRef = storageRef.child(currFile.name); | |
| // we return a promise where we first "put" or upload the file | |
| // and then once the upload is complete, we return promise with | |
| // download URL string of the file we uploaded | |
| return fileRef.put(currFile).then((snapshot) => snapshot.downloadURL); | |
| }); | |
| Promise.all(fileUploads).then((items) => { | |
| console.log(items); | |
| }); | |
| }); // upload files | |
| })(); |
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> | |
| <input type="file" class="js-fileElem" multiple accept="image/*" style="display:none"> | |
| <a href="#" class="js-fileSelect">Select some files</a> | |
| <script src="https://www.gstatic.com/firebasejs/3.8.0/firebase.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment