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
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:
Include from a RawGit’s CDN:
Or download manually.
The code
Please check it out on GitHub and submit any issues encountered.