Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/convoo/file-fire
Simple way to upload and download files from Firebase Storage.
https://github.com/convoo/file-fire
firebase polymer webcomponents
Last synced: 8 days ago
JSON representation
Simple way to upload and download files from Firebase Storage.
- Host: GitHub
- URL: https://github.com/convoo/file-fire
- Owner: convoo
- License: mit
- Created: 2016-07-24T07:00:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-12T14:17:28.000Z (over 7 years ago)
- Last Synced: 2024-10-10T08:14:00.895Z (about 1 month ago)
- Topics: firebase, polymer, webcomponents
- Language: HTML
- Homepage:
- Size: 67.4 KB
- Stars: 13
- Watchers: 2
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# file-fire
Simple way to upload and download files from Firebase Storage.
---
## Install
```
bower install file-fire --save
```
# \
An element that uploads files and provides download url from Firebase Storage. For images, it can resize and provide a placeholder as well.
After resizing, it can also generate 2x 3x image sizes. This is determined by the `max-scale` and `scale-step` properties. Some examples:
1. `max-scale` of 3 and `scale-step` of 1 will generate 1x, 2x and 3x images.
1. `max-scale` of 2 and `scale-step` of 0.5 will generate 1x, 1.5x and 2x images.
It can also fetch images from elsewhere (such as a twitter profile image) and upload that to your Firebase Storage.
```html
```
# \
An enhanced version of \ that allows dragging and dropping a file. This element can have contents that are displayed unless a file is dragged over it.
```html
This text will be visible unless you hover over it while dragging a file
This text will be visible unless you hover over it while dragging a file
This text will be visible unless you hover over it while dragging a file
```
# \
An element that retrieves the download url from the file storage path in Firebase Storage.
```html
```
## Dependencies
Element dependencies are managed via [Bower](http://bower.io/). You can
install that via:
npm install -g bower
Then, go ahead and download the element's dependencies:
bower install
## Playing With Your Element
If you wish to work on your element in isolation, we recommend that you use
[Polyserve](https://github.com/PolymerLabs/polyserve) to keep your element's
bower dependencies in line. You can install it via:
npm install -g polyserve
And you can run it via:
polyserve
Once running, you can preview your element at
`http://localhost:8080/components/image-fire/`, where `image-fire` is the name of the directory containing it.
## Testing Your Element
Simply navigate to the `/test` directory of your element to run its tests. If
you are using Polyserve: `http://localhost:8080/components/image-fire/test/`
### web-component-tester
The tests are compatible with [web-component-tester](https://github.com/Polymer/web-component-tester).
Install it via:
npm install -g web-component-tester
Then, you can run your tests on _all_ of your local browsers via:
wct
#### WCT Tips
`wct -l chrome` will only run tests in chrome.
`wct -p` will keep the browsers alive after test runs (refresh to re-run).
`wct test/some-file.html` will test only the files you specify.
## Yeoman support
If you'd like to use Yeoman to scaffold your element that's possible. The official [`generator-polymer`](https://github.com/yeoman/generator-polymer) generator has a [`seed`](https://github.com/yeoman/generator-polymer#seed) subgenerator.