jquery-file-viewer: An extensive jQuery Plugin for rendering files

An extensive jQuery Plugin for rendering files

Basic Usage

Declare a div target

<div id="foo" data-file-name="myFile.jpg" data-file-path="content\myfile.jpg" data-file-contenttype="image/jpg"></div>

$('#foo').fileViewer();

It is also possible to instantiate with many divs.

<div class="bar" data-file-name="myFile.jpg" data-file-path="content\myfile.jpg" data-file-contenttype="image/jpg"></div>
<div class="bar" data-file-name="anotherFile.mp3" data-file-path="content\anotherFile.mp3" data-file-contenttype="audio/mpeg"></div>
...
...

$('.bar').fileViewer();

Advanced Options

All options can be informed by html attributes or parameters options method or defaults ($.fn.fileViewer.defaults).

$('.bar').fileViewer(
    filePath: 'content\myfile.jpg',
    fileName: 'myFile.jpg', 
    fileExtension: '.jpg', //optional
    contentType: 'image/jpg', //optional: If a contentType a not filled, it will be discovered by fileExtension
    generateId: true //Sets the id to element render, e.g: id="pdf-viewer"
);

Changing defaults

It is possible changes all parameters on fileViewer plugin, even viewers properties or viewers templates

Adding new viewer support

First, we make the viewer object

$.fn.fileViewer.defaults.viewers.cad = {
    id: 'cad-viewer',
    class: 'cad-viewer',
    render: function (file) {
        return ''; /*Add here a Cad template render*/
    }
}

After, we making the map for extension file to match the new viewer

$.extend($.fn.fileViewer.defaults.map.extension, { '.dwg': 'cad'}) 

(Optional) Also, it is possible makes the map with contentType

$.extend($.fn.fileViewer.defaults.map.contentType, { 'application/acad': 'cad'}) 

Browser Support

This library passed on tests in the IE11 Browser.

License

MIT License © Rafael Cachoeira

Code: https://github.com/raafacachoeira/jquery-file-viewer