In This Topic ▼

loadFromFile(file) Method

Summary

Attempts to load a file from a Blob or File object.

Syntax

TypeScript

JavaScript

loadFromFile = function(file)

loadFromFile(file: Blob | File): void;

Parameters

file

The uploaded resource to load.

Remarks

The file will be routed to the appropriate registry based off the Content-Type for the resource. If no registry exists for the Content-Type of the resource, or if there is no default registry handler, an error will be thrown.

Example

Load.ts

Load.js

Load.html

 
export class ContentManager_Load { 
   protected manager: lt.ContentManager.ContentManager = null; 
 
   private pdfUrl = 'https://demo.leadtools.com/images/pdf/leadtools.pdf'; 
   private pngUrl = 'https://demo.leadtools.com/images/png/ocr1.png'; 
 
 
   public constructor() { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      this.manager = new lt.ContentManager.ContentManager(); 
 
      this.setup(); 
      this.addClickEvents(); 
   } 
 
   private addClickEvents = () => { 
      const loadPdfBtn = document.getElementById('loadPdf'); 
      const loadPngBtn = document.getElementById('loadPng'); 
      const loadLocal = document.getElementById('loadLocal'); 
 
      loadPdfBtn.onclick = () => this.manager.loadFromUri(this.pdfUrl); 
      loadPngBtn.onclick = () => this.manager.loadFromUri(this.pngUrl); 
 
      loadLocal.onchange = (e: any) => { 
         const file = e.target.files[0]; 
         if (!file) 
            return; 
 
         this.manager.loadFromFile(file); 
      } 
   } 
 
   private setup = () => { 
      const registry = this.manager.registry; 
 
      // The ContentManager's allow you to specify precise workflows for different content types. 
      // First, we will create a specific handler for PNG files. 
      registry.register({ 
         mimetypes: ['image/png'], 
         onLoadFromFile: this.onLocalPng, 
         onLoadFromUri: this.onUriPng 
      }); 
 
      // We are also able to create a default handler 
      // The ContentManager will prioritize handlers in the following order: 
      //    1. Specific content type matches 
      //    2. Default handler 
      registry.register({ 
         default: true, 
         mimetypes: [], 
         onLoadFromFile: this.onLocalDefault, 
         onLoadFromUri: this.onUriDefault 
      }) 
   } 
 
   private onLocalDefault(blob: File | Blob) { 
      alert('Upload default triggered!') 
   } 
 
   private onUriDefault(url: string) { 
      alert('Default URI load triggered!'); 
   } 
 
   private onLocalPng(blob: File | Blob) { 
      alert('Uploaded PNG triggered!'); 
   } 
 
   private onUriPng(url: string) { 
      alert('PNG URI load triggered!'); 
   } 
}

 
export class ContentManager_Load { 
   manager = null; 
 
   pdfUrl = 'https://demo.leadtools.com/images/pdf/leadtools.pdf'; 
   pngUrl = 'https://demo.leadtools.com/images/png/ocr1.png'; 
 
 
   constructor() { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      this.manager = new lt.ContentManager.ContentManager(); 
 
      this.setup(); 
      this.addClickEvents(); 
   } 
 
   addClickEvents = () => { 
      const loadPdfBtn = document.getElementById('loadPdf'); 
      const loadPngBtn = document.getElementById('loadPng'); 
      const loadLocal = document.getElementById('loadLocal'); 
 
      loadPdfBtn.onclick = () => this.manager.loadFromUri(this.pdfUrl); 
      loadPngBtn.onclick = () => this.manager.loadFromUri(this.pngUrl); 
 
      loadLocal.onchange = (e) => { 
         const file = e.target.files[0]; 
         if (!file) 
            return; 
 
         this.manager.loadFromFile(file); 
      } 
   } 
 
   setup = () => { 
      const registry = this.manager.registry; 
 
      // The ContentManager's allow you to specify precise workflows for different content types. 
      // First, we will create a specific handler for PNG files. 
      registry.register({ 
         mimetypes: ['image/png'], 
         onLoadFromFile: this.onLocalPng, 
         onLoadFromUri: this.onUriPng 
      }); 
 
      // We are also able to create a default handler 
      // The ContentManager will prioritize handlers in the following order: 
      //    1. Specific content type matches 
      //    2. Default handler 
      registry.register({ 
         default: true, 
         mimetypes: [], 
         onLoadFromFile: this.onLocalDefault, 
         onLoadFromUri: this.onUriDefault 
      }) 
   } 
 
   onLocalDefault(blob) { 
      alert('Upload default triggered!') 
   } 
 
   onUriDefault(url) { 
      alert('Default URI load triggered!'); 
   } 
 
   onLocalPng(blob) { 
      alert('Uploaded PNG triggered!'); 
   } 
 
   onUriPng(url) { 
      alert('PNG URI load triggered!'); 
   } 
}

<!doctype html> 
<html lang="en"> 
<title>ContentManager Example | Load</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.ContentManager.js"></script> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <div> 
      <button type="button" id="loadPdf">Load PDF From Uri</button> 
      <button type="button" id="loadPng">Load PNG From Uri</button> 
   </div> 
   <div> 
      <label>Load Local File:</label> 
      <input type="file" id="loadLocal" style="margin-top: 5px;"> 
   </div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.ContentManager.Load(); 
   }; 
</script> 
 
</html>

Requirements

Target Platforms