DEV Community

Rafael Cachoeira
Rafael Cachoeira

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
$('#foo').fileViewer();
Enter fullscreen mode Exit fullscreen mode

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>
...
...
Enter fullscreen mode Exit fullscreen mode
$('.bar').fileViewer();
Enter fullscreen mode Exit fullscreen mode

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"
);
Enter fullscreen mode Exit fullscreen mode

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*/
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

Browser Support

This library passed on tests in the IE11 Browser.

License

MIT License © Rafael Cachoeira

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

Discussion (0)