An extensive jQuery Plugin for rendering files
<div id="foo" data-file-name="myFile.jpg" data-file-path="content\myfile.jpg" data-file-contenttype="image/jpg"></div>$('#foo').fileViewer();<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();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"
);It is possible changes all parameters on fileViewer plugin, even viewers properties or viewers templates
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'}) This library passed on tests in the IE11 Browser.
MIT License © Rafael Cachoeira
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent