File-droplet NPM

A CanJS Component that enables live-bound file drag-and-drop-ability to its contents.

Installation

npm install file-droplet --save

You can use any of the builds in the dist folder to meet your project needs.

Using CanJS's built-in support for StealJS, you can now import the module directly inside your templates. For example:

<can-import from="file-droplet"/>

<file-droplet>
  <h2>List of Files</h2>
  <ul>
    {{#each files}}
      <li>
        <span>{{name}}</span>
        <span>{{extension}}</span>
      </li>
    {{/each}}
  </ul>

  <h2>List of Extensions</h2>
  <ul>
    {{#each fileTypes}}
      <li>
        <!-- %key is the file extension. -->
        {{%key}}

        <ul>
          {{#each .}}
            <li>
              <span>{{name}}</span>
              <span>{{extension}}</span>
            </li>
          {{/each}}
        </ul>
      </li>
    {{/each}}
  </ul>
</file-droplet>

demo

Usage

The file-droplet component is meant to be used as a wrapper for content in your stache templates. It will allow you to drag and drop files inside its borders and provides live-bound attributes that you can utilize to list and process files. A couple of possible use cases include a file-upload component or the file-router component. See the API, below, for the list of attributes that you can use.

It comes with a single style: file-droplet {display: inline-block;}, so it won't get in the way of your design.

API

files: The master list of files. As you continue to drop more files, this list will grow.
fileTypes: An object keyed by file extension. Each key will contain the list of all files with that extension. Files without an extension will be available on the other key.
batches: Each time a file drop occurs, an array of files is created, whether it was one file or many. The batches property is an array that contains the list of each dropped batch.
lastFileBatch: This is a virtual property that will return the last batch in the batches list.