In This Topic ▼

uploadDocument Method

Summary

Uploads raw data to the cache.

Syntax

TypeScript

JavaScript

uploadDocument = function( 
   uri, 
   data, 
   offset, 
   length 
)

static uploadDocument( 
   uri: string, 
   data: ArrayBuffer, 
   offset: number, 
   length: number 
): JQueryPromise<any>;

Parameters

uri

The URI to upload to, which came from the result of beginUpload or beginUploadDocument.

data

The binary data, of JavaScript type ArrayBuffer, to upload.

offset

The position within data to get the chunk to upload.

length

The length of the chunk from data to upload, relative to offset.

Return Value

A voidPromise object that may resolve successfully.

Remarks

Use UploadDocumentBlob to upload the data contained in a JavaScript Blob/File object.

After beginUpload or beginUploadDocument has resolved and returned a URI, this method can be used to upload chunks of the document.

BeginUploadDocument, BeginUpload, UploadDocument, and AbortUploadDocument are used together to get the same functionality as UploadFile/uploadfiledocument, but provides more control over the upload process. This method is often called in a loop to upload chunks of data to the cache over and over until the entire document has been uploaded. UploadDocument gives the developer control over when and how chunks are uploaded.

UploadDocument should not be called multiple times in a row without waiting for each call's Promise to be resolved, or the uploaded LEADDocument may be corrupt.

This method does not receive a DocumentUploadProgress object in the progress callback of the Promise.

When uploading is finished, EndUpload must be called to inform the factory that the uploading process has finished.

Unlike UploadFile/uploadfiledocument, the Promise object returned by this method does not have an abort method. Instead, AbortUploadDocument must be called with the same uri being used to upload the document. This will not necessarily cause the Promise object from this method to fail immediately, but continued calls to UploadDocument will.

Note that the browser must support the FileReader API in order to manipulate file system data on the client. If the FileReader API is not supported, an error will be thrown and IsBrowserError will return true.

Refer to Uploading Using LEADTOOLS Document Library for more information on how to use this method.

Example

This example will download, upload, and load a document from the service to show that it is given a new cache entry.

UploadDocument.ts

DocumentHelper.ts

UploadDocument.js

DocumentHelper.js

UploadDocument.html

import { DocumentHelper } from "../../utilities/DocumentHelper"; 
 
export class DocumentFactory_UploadDocumentExample { 
    public constructor() { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
        DocumentHelper.initFactory(); 
    } 
 
    public run = (buttonID: string) => { 
        document.getElementById(buttonID).onclick = this.onClick; 
    } 
 
    onClick = () => { 
        //Load the initial document 
        const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
        this.loadDocument(url, true); 
    } 
 
    loadDocument = (url: string, downloadAfterLoad: boolean) => { 
        DocumentHelper.log("Loading document " + url); 
        lt.Document.DocumentFactory.loadFromUri(url, new lt.Document.LoadDocumentOptions()) 
            .done((doc) => { 
                DocumentHelper.log("Document loaded and has cache id: " + doc.documentId); 
                if (downloadAfterLoad) { 
                    this.afterLoadDocument(doc); 
                } 
            }) 
            .fail(DocumentHelper.showServiceError); 
    } 
 
    afterLoadDocument = (doc: lt.Document.LEADDocument) => { 
        // Download its data 
        lt.Document.DocumentFactory.downloadDocumentData(doc.documentId, null, false) 
            .done((result) => { 
                DocumentHelper.log("Finished downloading, mime type: " + result.mimeType + " data length: " + result.data.byteLength); 
                // Upload the data to a different document 
                this.uploadDocument(result.data); 
            }) 
            .fail(DocumentHelper.showServiceError); 
    } 
 
    uploadDocument = (data: ArrayBuffer) => { 
        // Start the data 
        const uploadDocumentOptions = new lt.Document.UploadDocumentOptions(); 
        // If we have the total size of the document set it. 
        // This will help optimize the upload process on the service 
        uploadDocumentOptions.documentDataLength = data.byteLength; 
        lt.Document.DocumentFactory.beginUploadDocument(uploadDocumentOptions) 
            .done((uploadUri) => { 
                // Upload the data 
                lt.Document.DocumentFactory.uploadDocument(uploadUri, data, 0, data.byteLength) 
                    .done(() => { 
                        // Finish it 
                        lt.Document.DocumentFactory.endUpload(uploadUri) 
                            .done(() => { 
                                // Load it and check 
                                this.loadDocument(uploadUri, false); 
                            }) 
                            .fail(DocumentHelper.showServiceError); 
 
                    }) 
                    .fail(DocumentHelper.showServiceError); 
            }) 
            .fail(DocumentHelper.showServiceError); 
    } 
}

export class DocumentHelper { 
   static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert("Error returned from service. See the console for details."); 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
   } 
 
   static log = (message: string, data?: any) => { 
      const outputElement = document.getElementById("output"); 
      if (outputElement) { 
         const time = (new Date()).toLocaleTimeString(); 
         const textElement = document.createElement("p"); 
         textElement.innerHTML = (outputElement.childElementCount + 1) + " [" + time + "]: " + message; 
         outputElement.insertBefore(textElement, outputElement.firstChild); 
      } 
 
      if (!data) 
         console.log(message); 
      else 
         console.log(message, data); 
   } 
 
   static initFactory = () => { 
      // To communicate with the DocumentsService, it must be running! 
      // Change these parameters to match the path to the service. 
      lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
      lt.Document.DocumentFactory.servicePath = ""; 
      lt.Document.DocumentFactory.serviceApiPath = "api"; 
   } 
}

import { DocumentHelper } from "../../utilities/DocumentHelper"; 
 
export class DocumentFactory_UploadDocumentExample { 
    constructor() { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
        DocumentHelper.initFactory(); 
    } 
 
    run = (buttonID) => { 
        document.getElementById(buttonID).onclick = this.onClick; 
    } 
 
    onClick = () => { 
        //Load the initial document 
        const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
        this.loadDocument(url, true); 
    } 
 
    loadDocument = (url, downloadAfterLoad) => { 
        DocumentHelper.log("Loading document " + url); 
        lt.Document.DocumentFactory.loadFromUri(url, new lt.Document.LoadDocumentOptions()) 
            .done((doc) => { 
                DocumentHelper.log("Document loaded and has cache id: " + doc.documentId); 
                if (downloadAfterLoad) { 
                    this.afterLoadDocument(doc); 
                } 
            }) 
            .fail(DocumentHelper.showServiceError); 
    } 
 
    afterLoadDocument = (doc) => { 
        // Download its data 
        lt.Document.DocumentFactory.downloadDocumentData(doc.documentId, null, false) 
            .done((result) => { 
                DocumentHelper.log("Finished downloading, mime type: " + result.mimeType + " data length: " + result.data.byteLength); 
                // Upload the data to a different document 
                this.uploadDocument(result.data); 
            }) 
            .fail(DocumentHelper.showServiceError); 
    } 
 
    uploadDocument = (data) => { 
        // Start the data 
        const uploadDocumentOptions = new lt.Document.UploadDocumentOptions(); 
        // If we have the total size of the document set it. 
        // This will help optimize the upload process on the service 
        uploadDocumentOptions.documentDataLength = data.byteLength; 
        lt.Document.DocumentFactory.beginUploadDocument(uploadDocumentOptions) 
            .done((uploadUri) => { 
                // Upload the data 
                lt.Document.DocumentFactory.uploadDocument(uploadUri, data, 0, data.byteLength) 
                    .done(() => { 
                        // Finish it 
                        lt.Document.DocumentFactory.endUpload(uploadUri) 
                            .done(() => { 
                                // Load it and check 
                                this.loadDocument(uploadUri, false); 
                            }) 
                            .fail(DocumentHelper.showServiceError); 
 
                    }) 
                    .fail(DocumentHelper.showServiceError); 
            }) 
            .fail(DocumentHelper.showServiceError); 
    } 
}

export class DocumentHelper { 
   static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert("Error returned from service. See the console for details."); 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
   } 
 
   static log = (message, data) => { 
      const outputElement = document.getElementById("output"); 
      if (outputElement) { 
         const time = (new Date()).toLocaleTimeString(); 
         const textElement = document.createElement("p"); 
         textElement.innerHTML = (outputElement.childElementCount + 1) + " [" + time + "]: " + message; 
         outputElement.insertBefore(textElement, outputElement.firstChild); 
      } 
 
      if (!data) 
         console.log(message); 
      else 
         console.log(message, data); 
   } 
 
   static initFactory = () => { 
      // To communicate with the DocumentsService, it must be running! 
      // Change these parameters to match the path to the service. 
      lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
      lt.Document.DocumentFactory.servicePath = ""; 
      lt.Document.DocumentFactory.serviceApiPath = "api"; 
   } 
}

<!doctype html> 
<html lang="en"> 
<title>Document Example | UploadDocument</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> 
   <link rel="stylesheet" type="text/css" href="../../css/examples.css"> 
 
   <!-- 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="exampleButton">Run Example</button> 
   </div> 
   <div id="output"></div> 
   <div> 
      <img id="img" /> 
   </div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.DocumentFactory.UploadDocument(); 
      example.run("exampleButton"); 
   }; 
</script> 
</html>