AngularJS File Directive
A common component in web applications is the form <input type="file">
.
To connect this input any kind of logic or just render a preview of the selected files tends to be a hassle involving a POST
to some server-side code.
For some cases it would be a lot easier containing parts of this on the client-side.
After implementing this for various angular projects a pretty useful directive started to emerge.
Usage
angular.module('myApp', ['file']);
<!-- Bind the values to $scope.files -->
<input type="file"
file="files"
accept="image/*"
multiple>
<!-- Render the selected files directly in the view -->
<div ng-repeat="file in files">
<h4>{{ file.name }}</h4>
<img alt="{{ file.name }}"
ng-src="data:{{ file.type }};base64,{{ file.body }}">
</div>
Example
-
-
{{ file.name }}
How it works
- Listen for change in input element.
- For each targeted file:
- Read the file as
text
orbinary string
. - Base64 encode body if file type is
binary string
. - Compile type, name & body.
- Apply new values to
$scope
when last file is done.
- Read the file as
- For each targeted file:
Installation
Install with Bower:
$ bower install angular-file-directive
Include from a RawGit’s CDN:
<script src="//cdn.rawgit.com/vpegado/angular-file-directive/v1.2.1/file.js"></script>
Or download manually.
The code
Please check it out on GitHub and submit any issues encountered.