In This Topic ▼

uploadFile Method

Summary

Uploads a new document to the server in one shot.

Syntax

TypeScript

JavaScript

uploadFile = function( 
   blob, 
   documentId 
)

static uploadFile( 
   blob: Blob, 
   documentId: string 
): AbortableJqueryPromise;

Parameters

blob

The JavaScript Blob/File object representing the file to upload.

documentId

Optional: The ID to be used with the loaded document.

Return Value

A Promise object that can resolve successfully to a special uri pointing to the location of the newly-created LEADDocument in the cache (verifiable with IsUploadDocumentUri). The returned Promise has a unique type of AbortableJQueryPromise that holds the Abort method.

Remarks

UploadFileDocument performs the same functionality as UploadFile while accepting full UploadDocumentOptions options for more control on the upload operation.

When the value of documentId is null (the default), then the document factory will create a new, unique ID using a GUID generator. If the value is not null, then it is assumed to be a user-defined ID and used as is. In either case, the value is set in the LEADDocument.DocumentId property of the newly created document.

User-defined IDs can be used when the system already has unique IDs associated with the documents to be viewer. The document factory will neither check nor guarantee the uniqueness of these IDs.

The UploadFile method is an abstraction of three other methods used together to manage the upload of a resource:

UploadFile wraps together the functionality of these three methods, and returns a URL to the uploaded resource when the Promise resolves. This URL can be used to load the document with LoadFromUri.

The data is uploaded in chunks and the size of each chunk uploaded is determined by uploadBlobChunkSize.

The Promise for this method can receive progress events. Refer to DocumentUploadProgress for more information.

The Promise object that is returned immediately by calling UploadFile is of type AbortableJQueryPromise, an extension of the usual jQuery Promise object. This class adds an additional method, Abort, which has the same functionality as AbortUploadDocument but is not static, and thus does not need the URI of the uploading file. If the upload is aborted, the fail callback to the Promise object will be called with all three parameters set as null. See Promises for more information.

This method uses the JavaScript File object to obtain access to a file on the local machine.

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

Refer to Uploading Using the Document Library for detailed information on how to use this method and the various options used.

Example

This example will upload a file from the local machine and then download it as a LEADTOOLS Document object ready to be used.

UploadFile.ts

DocumentHelper.ts

UploadFile.js

DocumentHelper.js

UploadFile.html

import { DocumentHelper } from "../../utilities/DocumentHelper"; 
 
export class DocumentFactory_UploadFileExample { 
    public constructor() { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
        DocumentHelper.initFactory(); 
    } 
 
    public run = (buttonID: string) => { 
        const exampleButton = document.getElementById(buttonID); 
 
        // Add a file select 
        const fileInput = document.createElement("input"); 
        fileInput.type = "file"; 
        exampleButton.parentNode.appendChild(fileInput); 
 
        // add an "upload" button 
        const uploadButton = document.createElement("button"); 
        uploadButton.type = "button"; 
        uploadButton.innerHTML = "Click to Upload"; 
        exampleButton.parentNode.appendChild(uploadButton); 
 
        uploadButton.onclick = () => { 
            const file = fileInput.files[0]; 
            if (!file) { 
                alert("No file!"); 
                return; 
            } 
 
            // Upload it 
            DocumentHelper.log("Uploading..."); 
            lt.Document.DocumentFactory.uploadFile(file) 
                .done((uri) => { 
                    // Done, now load it 
                    DocumentHelper.log("Finished uploading. Now loading..."); 
                    const loadDocumentOptions = new lt.Document.LoadDocumentOptions(); 
                    // Set the name 
                    loadDocumentOptions.name = file.name; 
                    lt.Document.DocumentFactory.loadFromUri(uri, loadDocumentOptions) 
                        .done((doc) => { 
                            DocumentHelper.log("Document was loaded successfully"); 
                            DocumentHelper.log("Name is " + doc.name); 
                            DocumentHelper.log("MIMEType is " + doc.mimeType); 
                            DocumentHelper.log("Number of Pages is " + doc.pages.count); 
                        }) 
                        .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_UploadFileExample { 
    constructor() { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
        DocumentHelper.initFactory(); 
    } 
 
    run = (buttonID) => { 
        const exampleButton = document.getElementById(buttonID); 
 
        // Add a file select 
        const fileInput = document.createElement("input"); 
        fileInput.type = "file"; 
        exampleButton.parentNode.appendChild(fileInput); 
 
        // add an "upload" button 
        const uploadButton = document.createElement("button"); 
        uploadButton.type = "button"; 
        uploadButton.innerHTML = "Click to Upload"; 
        exampleButton.parentNode.appendChild(uploadButton); 
 
        uploadButton.onclick = () => { 
            const file = fileInput.files[0]; 
            if (!file) { 
                alert("No file!"); 
                return; 
            } 
 
            // Upload it 
            DocumentHelper.log("Uploading..."); 
            lt.Document.DocumentFactory.uploadFile(file) 
                .done((uri) => { 
                    // Done, now load it 
                    DocumentHelper.log("Finished uploading. Now loading..."); 
                    const loadDocumentOptions = new lt.Document.LoadDocumentOptions(); 
                    // Set the name 
                    loadDocumentOptions.name = file.name; 
                    lt.Document.DocumentFactory.loadFromUri(uri, loadDocumentOptions) 
                        .done((doc) => { 
                            DocumentHelper.log("Document was loaded successfully"); 
                            DocumentHelper.log("Name is " + doc.name); 
                            DocumentHelper.log("MIMEType is " + doc.mimeType); 
                            DocumentHelper.log("Number of Pages is " + doc.pages.count); 
                        }) 
                        .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 | UploadFile</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.UploadFile(); 
      example.run("exampleButton"); 
   }; 
</script> 
</html>