DEV Community

Rafael Cachoeira
Rafael Cachoeira

Posted on

3 2

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

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay