Angular Material File Input

A Html file input enhance base on angular material.

This directive try to make input file or file upload intuitive.

Demo

Live Demo

Getting Started

Install with Bower or download the files directly from the dist folder in the repo.

bower install lf-ng-md-file-input --save

Add dist/lf-ng-md-file-input.js and dist/lf-ng-md-file-input.css to your index.html.

<link rel="stylesheet" href="../bower_components/lf-ng-md-file-input/dist/lf-ng-md-file-input.css">
<script src="../bower_components/lf-ng-md-file-input/dist/lf-ng-md-file-input.js"></script>

Add lfNgMdFileInput as a module dependency for your module.

var app = angular.module('app', ['ngMaterial','ngMdIcons','lfNgMdFileInput']);

##Usage

This directive will return a array via lf-files attribute binding, the object in array contain some object include lfFile and lfDataUrl, that you can grab file and preview dataurl easily.

###Basic

<lf-ng-md-file-input lf-files="files"></lf-ng-md-file-input>

###Accept

Accept attribute can set file extension (e.g: .png) or MIME type (e.g: image/*)

<lf-ng-md-file-input lf-files="files" accept=".png"></lf-ng-md-file-input>

###Multiple

<lf-ng-md-file-input lf-files="files" multiple></lf-ng-md-file-input>

###Placeholder

<lf-ng-md-file-input lf-files="files" lf-placeholder="my placeholder"></lf-ng-md-file-input>

###Preview

<lf-ng-md-file-input lf-files="files" preview></lf-ng-md-file-input>

###Drag

<lf-ng-md-file-input lf-files="files" drag></lf-ng-md-file-input>

###Change labels

<lf-ng-md-file-input lf-files="files" lf-drag-and-drop-label="Drag and Drop this" drag></lf-ng-md-file-input>

<lf-ng-md-file-input lf-files="files" lf-browse-label="Browse..."></lf-ng-md-file-input>

<lf-ng-md-file-input lf-files="files" lf-remove-label="Trash"></lf-ng-md-file-input>

Release History

• v0.1.0 - Initial release.
• v1.0.0 - Standard features.
• v1.1.0 - New attributes: lf-drag-and-drop-label, lf-browse-label and lf-remove-label