rramona2
8/5/2016 - 7:29 AM
firebase qs storage
firebase qs storage
html, body {
font-family:'Roboto', 'Helvetica', sans-serif;
}
.mdl-grid {
max-width: 1024px;
margin: auto;
}
.mdl-layout__header-row {
padding: 0;
}
h3 {
background: url('firebase-logo.png') no-repeat;
background-size: 40px;
padding-left: 50px;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firebase Storage Example</title>
<!-- Material Design Theming -->
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="main.css">
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyD3pHDCzX-WLWtuv174Jum_Su0MASb4m_w",
authDomain: "quotes-b769e.firebaseapp.com",
databaseURL: "https://quotes-b769e.firebaseio.com",
storageBucket: "quotes-b769e.appspot.com",
};
firebase.initializeApp(config);
</script>
</head>
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Header section containing title -->
<header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
<div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<h3>Storage Quickstart</h3>
</div>
</div>
</header>
<main class="mdl-layout__content mdl-color--grey-100">
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
<!-- Container for the demo -->
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
<h2 class="mdl-card__title-text">Upload a file</h2>
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600" id="messagesDiv">
<p>Select a file below. When it is uploaded, a link will be displayed to the uploaded file.</p>
<h6>Choose File</h6>
<input type="file" id="file" name="file"/>
<h6>File URL:</h6>
<span id="linkbox"></span>
</div>
</div>
</div>
</main>
</div>
<script>
var auth = firebase.auth();
var storageRef = firebase.storage().ref();
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var file = evt.target.files[0];
var metadata = {
'contentType': file.type
};
// Push to child path.
// [START oncomplete]
storageRef.child('images/' + file.name).put(file, metadata).then(function(snapshot) {
console.log('Uploaded', snapshot.totalBytes, 'bytes.');
console.log(snapshot.metadata);
var url = snapshot.metadata.downloadURLs[0];
console.log('File available at', url);
// [START_EXCLUDE]
document.getElementById('linkbox').innerHTML = '<a href="' + url + '">Click For File</a>';
// [END_EXCLUDE]
}).catch(function(error) {
// [START onfailure]
console.error('Upload failed:', error);
// [END onfailure]
});
// [END oncomplete]
}
window.onload = function() {
document.getElementById('file').addEventListener('change', handleFileSelect, false);
document.getElementById('file').disabled = true;
// Sign the user in anonymously since accessing Storage requires the user to be authorized.
auth.signInAnonymously().then(function(user) {
console.log('Anonymous Sign In Success', user);
document.getElementById('file').disabled = false;
}).catch(function(error) {
console.error('Anonymous Sign In Error', error);
});
}
</script>
</body>
</html>{
"hosting": {
"public": "./",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}