roxus/file-drop-zone

Polymer 2.0 element for dragging and dropping files into a customizable dropzone.

file-drop-zone

<style>
file-drop-zone {
  border: 1px dashed transparent;
  color: #aaa;
  background-color: #efefef;
  width: 560px;
  height: 300px;
  transition: all .3s;
}
file-drop-zone.dragover {
  border: 1px dashed #E91E63;
  transition: all .3s;
}
file-drop-zone:hover > [slot='drop-zone'],
file-drop-zone.dragover > [slot='drop-zone'] {
  color: #E91E63;
  transition: all .3s;
}
file-drop-zone.errored {
  background-color: #FFEBEE;
  transition: all .3s;
}
file-drop-zone[has-files] {
  color: #2196F3;
  transition: all .3s;
}
[slot='drop-zone'] {
  text-align: center;
  font-size: 1.1em;
  --iron-icon-height: 64px;
  --iron-icon-width: 64px;
}
[slot='drop-zone'] > .title {
  font-size: 1.2em;
}
[slot='drop-zone'] > .small{
  font-size: 0.6em;
}
</style>
<file-drop-zone
  multiple
  accept=".csv, .tsv"
  files="{{files}}"
  last-error="{{error}}"
  on-error="onError">

  <!-- Custom slot element to style the interior of the drop zone -->
  <div slot="drop-zone" class="layout vertical center center-justified">
    <iron-icon icon="description"></iron-icon>
    <div class="title">Drop CSV or TSV files here</div>
    <!-- error message -->
    <div class="small">[[error.message]]</div>
    <!-- list of file selected -->
    <template is="dom-repeat" items="[[files]]">
      <div class="small">[[item.name]]</div>
    </template>
  </div>

</file-drop-zone>

file-drop-zone is a Polymer 2.0 element for dragging and dropping files into a customizable dropzone.

API documentations and examples can be found at file-drop-zone webcomponents page.

Installation

bower install --save PolymerVis/file-drop-zone

Disclaimers

PolymerVis is a personal project and is NOT in any way affliated with Polymer or Google.

Quick Start

file-drop-zone is a wrapper around an invisible file input. The most basic use case is to style the file-drop-zone directly, and set the appropriate attributes (required, accept, multiple, name) for the file input.

file-drop-zone {
  width: 200px;
  height: 200px;
  background-color: #fafafa;
}

<file-drop-zone multiple accept="image/*" files="{{files}}"></file-drop-zone>

You can also customize the interior of the file-drop-zone via slot named drop-zone.

<file-drop-zone multiple accept="image/*" files="{{files}}">
  <div slot="drop-zone">
    <iron-icon icon="description"></iron-icon>
    <h3>Drop your file here</h3>
  </div>
</file-drop-zone>

Styling

You can style file-drop-zone normally, but there are 3 additional states available for styling.

.dragover
You can style file-drop-zone when a file is dragged over the drop-zone with the dragover class.

file-drop-zone.dragover { border: 1px dashed grey; }

.errored
You can style file-drop-zone when there is any error with the errored class.

file-drop-zone.errored { border: 1px dashed red; }

[has-files]
You can style file-drop-zone when there are at least 1 selected file with the has-files attribute.

file-drop-zone[has-files] { border: 1px solid grey; }