https://github.com/SparrowJang/ngFileReader

This is file reader component on angular.
https://github.com/SparrowJang/ngFileReader

angularjs filereader reader

Last synced: 4 months ago
JSON representation

This is file reader component on angular.

• Host: GitHub
• URL: https://github.com/SparrowJang/ngFileReader
• Owner: SparrowJang
• License: mit
• Created: 2014-03-08T07:30:45.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2017-04-11T15:08:34.000Z (over 7 years ago)
• Last Synced: 2024-08-04T04:04:47.265Z (4 months ago)
• Topics: angularjs, filereader, reader
• Language: JavaScript
• Size: 266 KB
• Stars: 25
• Watchers: 3
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
ngFileReader

=============

![demo image](/images/screenprint.png)

This is file reader component on angular.

## LiveDemo

[demo](http://www.sparrowjang.com/ngFileReader/example/index.html)

## Support

* IE8+

* chrome

* firefox

## Dependency

* angularjs

* jQuery

* [FileReader](https://github.com/Jahdrien/FileReader)

You need load **jQuery** and **FileReader** if browser is not support `FileReader`.

And The base64 size only limit 32kb if you use base64 to set image on IE8.

You also use other [FileReader](https://github.com/Phlow2001/FileReader) version,if you don't want to use `fixed` position by flash.

## Install

```bash

bower install ngFileReader

```

or

```bash

npm install ngFileReader

```

## Usage

Set some attrs of element.

```html



size:{{file.size | fileSize}}



```

Set a reader method.

```js

$scope.readMethod = "readAsDataURL";

```

Add a `on-readed` callback to set file size and img data.

```js

$scope.onReaded = function( e, file ){

  $scope.img = e.target.result;

  $scope.file = file;

};

```

You are able to follow this If you use browserfiy.

```js

var app = angular.module('myApp', [require('ngFileReader')]);

```

## Attribute

### filereader

This is `swf` path, if you use ie8 ~ ie9.

### multiple

Input multiple property.

### debug-mode

Use `swf` only.

**ex:**

Set the attr on tag.

```

debug-mode="true"

```

### accept

accept file extensions.

##Parameter

### read-method

This is file reader method,when you selected file to call `read-method` method.

**ex:** `readAsDataURL`、`readAsText`、`readAsBinaryString`

Set the attr.

```js

read-method="readMethod"

```

Set a string value.

```js

$scope.readMethod = "readAsDataURL"

```

## Event

### on-selected `Event`

It will trigger this event if you has selected.

### on-readed `Event`

It will trigger this event When the selected file has readed by file reader.

## Filter

### fileSize

Transfer file size from number to unit.

```html

{{file.size | fileSize}}

```

You can write this if you need round off to the 2nd decimal place.

```html

{{file.size | fileSize:2}}

```

## Run

 

run a server:

```bash

grunt server

```

 

Finally,open your brower,enter [http://localhost:3000/example/index.html](http://localhost/example/index.html).

## Minification

Just run `npm install` to install dependencies. Then run `grunt` for minification.