Directory

file-uploader - Vaadin Add-on Directory

Polymer-based web component for D2L file uploader file-uploader - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/BrightspaceUI/file-uploader](https://github.com//BrightspaceUI/file-uploader/blob/v1.7.0/README.md) on 2019-05-10 ]** # file-uploader [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/file-uploader) [![Bower version][bower-image]][bower-url] [![Build status][ci-image]][ci-url] [Polymer](https://www.polymer-project.org) component for uploading files with drag and drop capability. This component does not perform the actual uploading work, it simply provides visual cues and exposes an event when files have been uploaded. ![screenshot of file uploader](/screenshots/file-uploader.gif?raw=true) For further information on this and other components, refer to [The Brightspace UI Guide](https://github.com/BrightspaceUI/guide/wiki). ## Installation `d2l-file-uploader` can be installed from [Bower][bower-url]: ```shell bower install d2l-file-uploader ``` ## Usage Include the [webcomponents.js](https://www.webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-file-uploader.html`: ```html ``` ### Basic Usage with Accessible Label It's important to always provide an accessible label which describes the purpose of the uploader using the `label` attribute. The label will be hidden visually but associated with the upload input for those using assistive technologies such as a screen reader. ```html ``` ### Multi-file Uploads To allow for multiple files to be uploaded, add the `multiple` attribute: ```html ``` ### Localization The file uploader will automatically render using the language found on the HTML element -- i.e. ``. If the language attribute is not present or isn't supported, the uploader will render in English. ![screenshot of file uploader localized](/screenshots/localized.png?raw=true) ### Feedback Messages If you encounter a scenario where you'd like to display feedback about the uploaded file(s) -- like a warning or an error -- use the `feedback` and `feedback-type` attributes. The `feedback-type` defaults to "warning": ```html ``` ![screenshot of file uploader in warning state](/screenshots/warning.png?raw=true) But `feedback-type` can also be set to "error": ```html ``` ![screenshot of file uploader in error state](/screenshots/error.png?raw=true) #### Feedback Changed Event To listen for when feedback changes within the uploader, register for the `feedback-changed` event. Vanilla JavaScript: ```html ``` From within another Polymer element you can use [Polymer's annotated event listeners](https://www.polymer-project.org/2.0/docs/devguide/events#annotated-listeners): ```html ``` ### Handling Uploaded Files When the user uploads one or more files, a `d2l-file-uploader-files-added` event is fired. To listen for this event, wire up an event listener to the `` element. The listener will be passed an event with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects from the [File API](https://developer.mozilla.org/en/docs/Web/API/File). Vanilla JavaScript: ```html ``` From within another Polymer element you can use [Polymer's annotated event listeners](https://www.polymer-project.org/2.0/docs/devguide/events#annotated-listeners): ```html ``` ## Developing, Testing and Contributing After cloning the repo, run `npm install` to install dependencies. If you don't have it already, install the [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) globally: ```shell npm install -g polymer-cli ``` To start a [local web server](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests: ```shell polymer serve ``` To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint)): ```shell npm run lint ``` To run unit tests locally using [Polymer test](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#tests): ```shell polymer test --skip-plugin sauce ``` To lint AND run local unit tests: ```shell npm test ``` [bower-url]: http://bower.io/search/?q=d2l-file-uploader [bower-image]: https://badge.fury.io/bo/d2l-file-uploader.svg [ci-url]: https://travis-ci.org/BrightspaceUI/file-uploader [ci-image]: https://travis-ci.org/BrightspaceUI/file-uploader.svg ## Versioning Commits and PR merges to master will automatically do a minor version bump which will: * Update the version in `package.json` * Add a tag matching the new version * Create a github release matching the new version By using either **[increment major]** or **[increment patch]** notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.
GitHub Homepage
Documentation
Issue tracker
View on GitHub
Online Demo

file-uploader version 0.0.1
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3

file-uploader version 0.0.2
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3

file-uploader version 0.0.3
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3

file-uploader version 0.0.4
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2

file-uploader version 0.0.5
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2

file-uploader version 0.0.6
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2

file-uploader version 0.0.7
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2

file-uploader version 0.0.8
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2

file-uploader version 0.0.9
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2

file-uploader version 0.0.10
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2

file-uploader version 0.0.11
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2

file-uploader version 0.0.12
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2

file-uploader version 0.0.13
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 * d2l-typography#^5.4.0

file-uploader version 0.0.14
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 * d2l-typography#^5.4.0

file-uploader version 0.0.15
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 * d2l-typography#^5.4.0

file-uploader version 0.0.16
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 * d2l-typography#^5.4.0

file-uploader version 0.0.17
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 * d2l-typography#^5.4.0

file-uploader version 0.0.18
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 * d2l-typography#^5.4.0

file-uploader version 0.0.19
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 * d2l-typography#^5.4.0

file-uploader version 0.0.20
### Dependencies * polymer#^1.9.1 * d2l-colors#^2.2.3 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 * d2l-typography#^5.4.0

file-uploader version 0.0.21
### Dependencies * polymer#Polymer/polymer#^1.9.1 || ^2.0.0 * d2l-colors#^2.4.0 || ^3.1.0 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 || ^2.0.0 * d2l-typography#^5.4.0 || ^6.0.0

file-uploader version 0.1.0
### Dependencies * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 || ^2.0.0 * d2l-colors#^2.4.0 || ^3.1.0 * d2l-offscreen#^3.0.1 || ^2.2.5 * polymer#Polymer/polymer#^1.9.1 || ^2.0.0

file-uploader version 0.1.1
### Dependencies * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 || ^2.0.0 * d2l-colors#^2.4.0 || ^3.1.0 * d2l-offscreen#^3.0.1 || ^2.2.5 * polymer#Polymer/polymer#^1.9.1 || ^2.0.0

file-uploader version 0.2.0
### Dependencies * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 || ^2.0.0 * d2l-colors#^2.4.0 || ^3.1.0 * d2l-offscreen#^3.0.1 || ^2.2.5 * polymer#Polymer/polymer#^1.9.1 || ^2.0.0

file-uploader version 0.2.1
### Dependencies * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 || ^2.0.0 * d2l-colors#^2.4.0 || ^3.1.0 * d2l-offscreen#^3.0.1 || ^2.2.5 * polymer#Polymer/polymer#^1.9.1 || ^2.0.0

file-uploader version 0.0.22
### Dependencies * polymer#Polymer/polymer#^1.9.1 || ^2.0.0 * d2l-colors#^2.4.0 || ^3.1.0 * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 || ^2.0.0 * d2l-typography#^5.4.0 || ^6.0.0

file-uploader version 0.2.2
### Dependencies * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 || ^2.0.0 * d2l-colors#^2.4.0 || ^3.1.0 * d2l-offscreen#^3.0.1 || ^2.2.5 * polymer#Polymer/polymer#^1.9.3 || ^2.0.2

file-uploader version 0.2.3
### Dependencies * app-localize-behavior#PolymerElements/app-localize-behavior#^1.0.2 || ^2.0.0 * d2l-colors#^2.4.0 || ^3.1.0 * d2l-offscreen#^3.0.1 || ^2.2.5 * polymer#Polymer/polymer#^1.9.3 || ^2.0.2

file-uploader version 0.3.0
### Dependencies * d2l-colors#^2.4.0 || ^3.1.0 * d2l-localize-behavior#^1.0.0 * d2l-offscreen#^3.0.1 || ^2.2.5 * polymer#Polymer/polymer#^1.9.3 || ^2.0.2

file-uploader version 0.3.1
### Dependencies * d2l-colors#^2.4.0 || ^3.1.0 * d2l-localize-behavior#^1.0.0 * d2l-offscreen#^3.0.1 || ^2.2.5 * polymer#Polymer/polymer#^1.9.3 || ^2.0.2

file-uploader version 0.4.0
### Dependencies * d2l-colors#^3.1.2 * d2l-localize-behavior#^1.0.0 * d2l-offscreen#^3.0.3 * polymer#1 - 2

file-uploader version 0.5.0
### Dependencies * d2l-colors#^3.1.2 * d2l-localize-behavior#^1.0.0 * d2l-offscreen#^3.0.3 * polymer#1 - 2