Skip to content
This repository was archived by the owner on May 19, 2025. It is now read-only.

Commit 71e9fba

Browse files
e111077e111077
authored
Merge pull request #226 from tjmonsi/adding-firebase-storage
Adding firebase storage
2 parents 091c14a + c7ec1f2 commit 71e9fba

10 files changed

+1132
-3
lines changed

‎bower.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@
2525
"devDependencies": {
2626
"iron-component-page": "PolymerElements/iron-component-page#1 - 2",
2727
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
28-
"web-component-tester": "Polymer/web-component-tester#^6.0.0"
28+
"web-component-tester": "Polymer/web-component-tester#^6.0.0",
29+
"paper-progress": "PolymerElements/paper-progress#1 - 2",
30+
"paper-toast": "PolymerElements/paper-toast#1 - 2"
2931
},
3032
"variants": {
3133
"1.x": {
@@ -37,7 +39,9 @@
3739
"devDependencies": {
3840
"iron-component-page": "PolymerElements/iron-component-page#^1.0",
3941
"web-component-tester": "^4.0.0",
40-
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
42+
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
43+
"paper-progress": "PolymerElements/paper-progress#^1.0",
44+
"paper-toast": "PolymerElements/paper-toast#^1.0"
4145
},
4246
"resolutions": {
4347
"webcomponentsjs": "^0.7"

‎demo/firebase-storage-auto.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<!--
3+
@license
4+
Copyright 2016 Google Inc. All Rights Reserved.
5+
Use of this source code is governed by a BSD-style
6+
license that can be found in the LICENSE file or at
7+
https://github.com/firebase/polymerfire/blob/master/LICENSE
8+
-->
9+
10+
<html>
11+
<head>
12+
<meta charset="utf-8">
13+
<title>firebase-storage-multiupload demo</title>
14+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
15+
<link rel="import" href="../../polymer/polymer.html">
16+
<link rel="import" href="./firebase-storage-multiupload-auto.html">
17+
18+
</head>
19+
<body>
20+
<firebase-storage-multiupload-auto></firebase-storage-multiupload-auto>
21+
</body>
22+
</html>

‎demo/firebase-storage-multiupload-auto.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!--
2+
@license
3+
Copyright 2016 Google Inc. All Rights Reserved.
4+
Use of this source code is governed by a BSD-style
5+
license that can be found in the LICENSE file or at
6+
https://github.com/firebase/polymerfire/blob/master/LICENSE
7+
-->
8+
9+
<link rel="import" href="../../polymer/polymer.html">
10+
<link rel="import" href="../../paper-progress/paper-progress.html">
11+
<link rel="import" href="../../paper-toast/paper-toast.html">
12+
<link rel="import" href="../polymerfire.html">
13+
14+
<dom-module id="firebase-storage-multiupload-auto">
15+
<template>
16+
<firebase-app
17+
auth-domain="polymerfire-test-6abc0.firebaseapp.com"
18+
database-url="https://polymerfire-test-6abc0.firebaseio.com"
19+
api-key="AIzaSyBxZI1BAgX9obocHQw_yhmHV9BIOpaNWZo"
20+
storage-bucket="polymerfire-test-6abc0.appspot.com">
21+
</firebase-app>
22+
23+
<firebase-auth
24+
id="auth"
25+
user="{{user}}"
26+
provider="google"
27+
on-error="catchError">
28+
</firebase-auth>
29+
30+
<button on-tap="signIn">Sign In</button> <br>
31+
32+
<template is="dom-if" if="{{user}}">
33+
<firebase-storage-multiupload
34+
id="fs"
35+
path="/users/{{user.uid}}/files"
36+
files="[[files]]"
37+
upload-tasks="{{uploadedFiles}}"
38+
on-error="catchError"
39+
force-unique
40+
auto>
41+
</firebase-storage-multiupload>
42+
43+
<input id="file-uploader" type="file" on-change="onFileUpload" multiple /> <br>
44+
45+
<hr>
46+
47+
<template is="dom-repeat" items="[[uploadedFiles]]">
48+
<div style="padding: 20px">
49+
<firebase-storage-upload-task
50+
task="[[item]]"
51+
id="task-[[index]]"
52+
bytes-transferred="{{item.bytesTransferred}}"
53+
total-bytes="{{item.totalBytes}}"
54+
state="{{item.state}}"
55+
download-url="{{item.downloadUrl}}"
56+
metadata="{{item.metadata}}"
57+
path="{{item.path}}">
58+
</firebase-storage-upload-task>
59+
60+
path from snapshot: [[item.snapshot.ref.fullPath]] <br>
61+
path from upload-task: [[item.path]] <br>
62+
bytes transferred: [[item.bytesTransferred]] <br>
63+
storage uri: [[gsUri]] <br>
64+
state: [[item.state]] <br>
65+
metadata-contentType: [[item.metadata.contentType]] <br>
66+
67+
<br>
68+
69+
<template is="dom-if" if="[[!isEqual(item.state, 'success')]]">
70+
<paper-progress
71+
value="{{item.bytesTransferred}}"
72+
min="0"
73+
max="{{item.totalBytes}}">
74+
</paper-progress>
75+
</template>
76+
77+
<br>
78+
79+
<template is="dom-if" if="{{isEqual(item.state, 'success')}}">
80+
<firebase-storage-ref
81+
path="{{item.path}}"
82+
storage-uri="{{gsUri}}"
83+
id="ref-[[index]]"
84+
metadata="{{item.refMetadata}}"
85+
download-url="{{item.refDownloadUrl}}">
86+
</firebase-storage-ref>
87+
88+
<a href="{{item.refDownloadUrl}}">{{item.refDownloadUrl}}</a> <br>
89+
90+
<button on-tap="download" value="{{index}}">Download</button>
91+
92+
<button on-tap="deleteFile" value="{{index}}">Delete</button>
93+
</template>
94+
95+
<template is="dom-if" if="[[!isEqual(item.state, 'success')]]">
96+
<template is="dom-if" if="[[isEqual(item.state, 'running')]]">
97+
<button on-tap="cancel" value="{{index}}">Cancel</button>
98+
<button on-tap="pause" value="{{index}}">Pause</button>
99+
</template>
100+
101+
<template is="dom-if" if="[[isEqual(item.state, 'paused')]]">
102+
<button on-tap="resume" value="{{index}}">Resume</button>
103+
</template>
104+
</template>
105+
106+
<br>
107+
</div>
108+
</template>
109+
</template>
110+
111+
<paper-toast id="toaster"></paper-toast>
112+
</template>
113+
114+
<script>
115+
(function() {
116+
'use strict';
117+
118+
Polymer({
119+
is: 'firebase-storage-multiupload-auto',
120+
121+
properties: {
122+
user: Object,
123+
124+
files: {
125+
type: Array,
126+
notify: true,
127+
value: [],
128+
},
129+
130+
uploadTasks: {
131+
type: Array,
132+
observer: '_uploadTasksChanged'
133+
},
134+
135+
uploadedFiles: {
136+
type: Array,
137+
}
138+
},
139+
140+
catchError(e) {
141+
this.$$('#toaster').show({
142+
text: e.detail.message
143+
});
144+
},
145+
146+
cancel(e) {
147+
this.$$('#task-' + e.target.value).cancel();
148+
},
149+
150+
resume(e) {
151+
this.$$('#task-' + e.target.value).resume();
152+
},
153+
154+
pause(e) {
155+
this.$$('#task-' + e.target.value).pause();
156+
},
157+
158+
download(e) {
159+
this.$$('#ref-' + e.target.value).getDownloadURL().then(function(d) {
160+
console.log(d)
161+
window.open(d, '_blank')
162+
})
163+
},
164+
165+
deleteFile(e) {
166+
this.$$('#ref-' + e.target.value).delete().then(function(d) {
167+
console.log(d)
168+
})
169+
},
170+
171+
_uploadTasksChanged(uploadTasks) {
172+
console.log(uploadTasks);
173+
},
174+
175+
_uploadedFilesChanged(uploadedFiles) {
176+
console.log(uploadedFiles);
177+
},
178+
179+
onFileUpload(e) {
180+
this.files = e.target.files;
181+
console.log(this.files)
182+
},
183+
184+
isEqual(a, b) {
185+
return a === b;
186+
},
187+
188+
signIn: function() {
189+
this.$.auth.signInAnonymously();
190+
}
191+
});
192+
})();
193+
</script>
194+
</dom-module>

0 commit comments

Comments
 (0)