export class ViewerLoadFromLocalExample {
private _viewer: lt.LEADVIEW.Viewer = null;
private _file: File = null;
public constructor() {
if(lt.RasterSupport.kernelExpired)
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null);
}
public run = (divID: string, buttonID: string): void => {
const lv = new lt.LEADVIEW.Viewer();
// Builds a new instance of LEADVIEW.
// For the full list of options that can be passed to the run method,
// refer to the settings JSON files that are included in the LEADVIEW demo application.
// Settings files can also be generated from the LEADVIEW application itself.
lv.run(null, {
'rootDivId': divID,
'showMainMenu': false,
'serviceHost': 'http://localhost:40000', // or wherever your host is
'servicePath': '', // the path to the root of the service, which is nothing for this example
'serviceApiPath': 'api', // Routing occurs at "/api", unless you change the routing in the DocumentsService
});
this._viewer = lv;
document.getElementById(buttonID).onchange = this.onFileChange;
}
private onFileChange = (event: any) => {
this._file = (event.target.files.length === 0) ? null : event.target.files[0];
if(this._file)
this.loadFromLocal();
}
private loadFromLocal = () => {
const loadOptions:lt.LEADVIEW.ILoadFromLocalParams = {
file: this._file,
annFile: null,
loadFailCallback: this.errorHandler,
uploadFailCallback: this.errorHandler,
loadOptions: null,
loadingDialogCallback: null,
loadAlwaysCallback: null,
loadSuccessCallback: (document: lt.Document.LEADDocument) => {
this._viewer.getDocumentViewer().setDocument(document);
},
uploadProgressCallback: null,
uploadSuccessCallback: null
};
this._viewer.loadFromLocal(loadOptions);
}
private errorHandler = (serviceError: lt.Document.ServiceError) => {
alert(`There was an error loading in the document. ${serviceError.message}`);
}
}
<!doctype html>
<html lang="en">
<title>LV Examples | LoadFromLocal</title>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="../LT/Leadtools.js"></script>
<script src="../LT/Leadtools.Controls.js"></script>
<script src="../LT/Leadtools.Annotations.Engine.js"></script>
<script src="../LT/Leadtools.Annotations.Designers.js"></script>
<script src="../LT/Leadtools.Annotations.Rendering.Javascript.js"></script>
<script src="../LT/Leadtools.Annotations.Automation.js"></script>
<script src="../LT/Leadtools.ImageProcessing.Main.js"></script>
<script src="../LT/Leadtools.ImageProcessing.Color.js"></script>
<script src="../LT/Leadtools.ImageProcessing.Core.js"></script>
<script src="../LT/Leadtools.ImageProcessing.Effects.js"></script>
<script src="../LT/Leadtools.Document.js"></script>
<script src="../LT/Leadtools.Document.Viewer.js"></script>
<script src="../LT/Leadtools.LEADVIEW.js" defer></script>
<link href="../css/Leadtools.LEADVIEW.css" type="text/css" rel="stylesheet">
<!-- All typescript files compiled from /src/ will be bundled and dropped into the root folder `bundle.js`-->
<script src="../bundle.js" type="text/javascript"></script>
</head>
<body>
<div>
Set Current Document
<input type="file" id="setCurrentDocument">
</div>
<div id="runDemo" style="width: 100%; height: 97vh;"></div>
</body>
<script>
window.onload = () => {
const example = new window.examples.ViewerLoadFromLocalExample();
example.run('runDemo', 'setCurrentDocument');
};
</script>
</html>