Striven File Viewer

Supported Frameworks

🥋 Knockout | ✌ Vue

Getting Started

Install Package

$ npm install @striven-erp/striven-fileviewer

Initialize File Viewer

The element that is passed in will be bound to an onclick event that triggers the file view lightbox.

import { StrivenFileViewer } from '@striven-erp/striven-fileviewer';

const viewerOptions = {
    path: './assets/images/image.jpeg',
    name: 'image',
    type: 'jpeg'
}

const fileviewer = new StrivenFileViewer(fileviewerEl, viewerOptions);

Initializing with a View Element

Alternatively, you can pass an element that you want the file to displayed in. This will disable the lightbox feature.

import { StrivenFileViewer } from '@striven-erp/striven-fileviewer';

const viewerOptions = {
    path: './assets/images/image.jpeg',
    name: 'image',
    type: 'jpeg'
}

const fileviewer = new StrivenFileViewer(fileviewerEl, viewerOptions, viewEl);

Implementing with Vue

Import the Vue Directive

import Vue from 'vue';
import App from './App.vue'

import { VueStrivenFileViewer } from '@striven-erp/striven-fileviewer';

new VueStrivenFileViewer(Vue);

new Vue({
  render: h => h(App),
}).$mount('#app')

Bind the directive to the element

<a vue-fileviewer="viewerOptions" href="#" />

export default {
    data () {
        return {
            viewerOptions: {
                path: './assets/images/image.jpeg',
                name: 'image',
                type: 'jpeg'
            }
        }
    }
}

Binding with a view element

<a vue-fileviewer="viewerOptions" href="#" />

export default {
    data () {
        return {
            viewerOptions: {
                path: './assets/images/image.jpeg',
                name: 'image',
                type: 'jpeg',
                viewer: document.getElementById('view-element');
            }
        }
    }
}

Implementing with Knockout

Import the Knockout Binding

import ko from 'knockout';
import { KoStrivenFileViewer } from '@striven-erp/striven-fileviewer';

new KoStrivenFileViewer(ko);

Template the binding

Attach the binding to the element you want the StrivenFileViewer to attach the onclick event to.

<a href="#" data-bind="fileViewer: imagePath">View this File</a>

Binding with a view element

<a href="#" data-bind="fileviewer: imagePath, viewElement: viewElement">View this File</a>

Example View Model

function AppViewModel() {
    this.imagePath = './path/to/the/file.jpeg/';
    this.viewElement = document.getElementById('view-element');
}

ko.applyBindings(new AppViewModel());

File Viewer Properties

Property	Type	Description
path	String	Path to the file to view.
name	String	Name of the viewing file Download purposes.
type	String	Extension of the viewing file Viewing behavior purposes.
useSVG	Boolean	Use default SVG icons provided If false, must pass class names
downloadIconClass	String	Class name for icon Example: fa fa-download
closeIconClass	String	Class name for icon Example: fa fa-close

File Viewer Methods

Method	Return Type	Description
downloadFile	None	Manually invoke the downloading of the referenced file
viewFile	None	Manually invoke the click event that views the file