Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

odra/angular-file-input

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#Angular File Input

Simple angular js directive to handle the File Reader API.

Usage

Check the demo folder (demo/index.html) for examples.

Installation

bower install simple-angular-file-input

Module dependency

angular
.module('app', ['angularFileInput'])

Files to be used in production are located in the folder "angular-file-input/dist"

Including the required files (js and css)

<script src="angular-file-input.min.js"></script> 

Docs

The directive supports three parameters:

  • mode: the file reader mode to be used;
  • callback: a callback function with the file object
  • ng-model: bind the file object to a ng-model (see demo/ngmodel.html)

Available mode options:

  • data-url: read file content as data url
  • array-buffer: read file content as data buffer
  • binary-string: read file content as a binary string
  • text: read file content as text/plain

If you do not provide a mode, it will assume "data-url" as default.

The File object response

The file object used in the callback function will have the following properties:

  • name
  • size
  • content
  • mimetype
  • encoding (only available in "data-url" mode)

Samples

<ng-file-input mode="data-url" callback="callback(file)"></ng-file-input>
<ng-file-input mode="data-url" ng-model="file"></ng-file-input>
<ng-file-input mode="array-buffer" callback="callback(file)"></ng-file-input>
<ng-file-input mode="binary-string" callback="callback(file)"></ng-file-input>
<ng-file-input mode="text" callback="callback(file)"></ng-file-input>

Custom buttom view

You can specify a template file to be used as the button view, its firts element/node should be a button or a link.

<!-- button.html  -->
<button>Custom Upload Button</button>
<ng-file-input mode="data-url" callback="callback(file)" tmpl="'button.html'"></ng-file-input>

License

Angular File Input is licensed under MIT License.

About

Simple angularjs directive to handle the File Reader API.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
Morty Proxy This is a proxified and sanitized view of the page, visit original site.