sparrowjang / ngfilereader

This is file reader component on angular.

ngFileReader

This is file reader component on angular.

LiveDemo

demo

Support

• IE8+
• chrome
• firefox

Dependency

• angularjs
• jQuery
• 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 version,if you don't want to use fixed position by flash.

Install

bower install ngFileReader

or

npm install ngFileReader

Usage

Set some attrs of element.

<div ng-file-reader on-readed="onReaded( event, file )" read-method="readMethod"  multiple></div>

size:{{file.size | fileSize}}

<img ng-src="{{img}}">

Set a reader method.

$scope.readMethod = "readAsDataURL";

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

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

  $scope.img = e.target.result;
  $scope.file = file;
};

You are able to follow this If you use browserfiy.

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.

read-method="readMethod"

Set a string value.

$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.

<!-- 1048576 => 1 m -->
{{file.size | fileSize}}

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

{{file.size | fileSize:2}}

Run

run a server:

grunt server

Finally,open your brower,enter http://localhost:3000/example/index.html.

Minification

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

ngfilereader's Issues

Missing License

Hey, I would love to use your code in one of our projects! However, as there's no licensing information provided, my hands are tied...

so please head over to choosealicense.com and attach a proper OSS license to your project. that would help everyone a lot!

thx.

Note (Bower) ngFileReader is compatible with Angular 1.5.0

Hello,

I'm coming to upgrade my project with Angular 1.5.0 and i use also the last version of ngFileReader (0.0.6).

For me, ngFileReader work fine !

For testing :

1. Go to this page ;
2. Click on 'Essayez gratuitement' button ;
3. drop this file on the 'FICHIER EDI' block ;
4. Finally, click on 'Importer' button.

I think that you can set the dependency of Angular to ~1.5.0.

npm package?

Hi, we have moved over to using npm for managing packages. Would love this to be in there as well! Thanks!

Issue on IE9

Hi !

I have got the following error when I use your lib, following exactly your installation steps :

TypeError: Object doesn't support property or method 'fileReader'<div style="position: relative;" class="ng-isolate-scope" multiple="" debug-mode="true" filereader="../vendor/filereader.swf" read-method="readMethod" on-readed="onReaded( event, file )" ng-file-reader="">