directive that allows you to show a file preview from a given url
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs/images
sass
src Initial commit Nov 20, 2015
tests
.editorconfig
.gitignore
.jshintrc
CHANGELOG.md
LICENSE
README.md
bower.json
gulpfile.js
karma.conf.js
package.json

README.md

Angular Doc Preview

This library is a directive that allows you to show a file preview from a given url. The preview can be:

  • a link showing the file name with an icon corresponding with the file extension.
  • a thumbnail if the document's url represents an image file.

Installation

bower install https://github.com/platanus/angular-doc-preview --save

Include the JS files in your project and the library as an Angular Dependency

angular.module('yourapp', ['platanus.docPreview']);

The library comes with a proposed stylesheet under /dist/angular-doc-preview.css. You can use it or create your own.

Usage

This directive allows you to show a file preview from a given url. By default, this directive, will try to infer the file type from the url. For example, if the given url has the value: http://server.platan.us/files/my-file.xls?1435170296, the directive will notice the url represents an Excel file and will show a link with an "Excel icon". If, for example, the url contains http://server.platan.us/files/my-smiley-face.png then, by default, will show a thumbnail with a link.

Link

{
  "documentUrl": "http://server.platan.us/promotions/9/download",
  "documentName": "my-xls-file",
}
<doc-preview
  document-extension="xls"
  document-name="data.documentName"
  document-url="data.documentUrl">
</doc-preview>

{
  "documentUrl": "http://server.platan.us/files/goten.png",
}

Thumbnail

<doc-preview
  render-image-as="thumb"
  document-url="data.documentUrl">
</doc-preview>

Directive Options:

Mandatory

  • document-url: the url containing the image to show.

Optional

  • document-name: set this value if you want a custom text for the resultant link. By default, will show the url.
  • document-extension: sometimes, the url does not have information about the file type (for example: http://server.platan.us/users/9/download). But, if you know the url file type you can pass it as option.
  • no-document-text: custom message to show when the url is empty. By default, will show nothing.
  • render-image-as: this option is only for images. You can choose, to show images: as link or thumb. If this attribute is not present will show thumbnail and link.

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Credits

Thank you contributors!

Platanus

angular-doc-preview is maintained by platanus.

License

angular-doc-preview is © 2015 platanus, spa. It is free software and may be redistributed under the terms specified in the LICENSE file.