Home :: DOM :: Load File

  1. Introduction
  2. Reference
    1. Class Variables
      1. VERSION
    2. Object Methods
      1. constructor
      2. makeProgressBar
      3. loadFile
      4. send
      5. operationComplete
      6. getFileSize
      7. update
      8. updateProgress
      9. replaceNode
    3. Properties
      1. url
      2. file
      3. increment
      4. oldNode
      5. currentPosition
      6. totalBytes
      7. buffer
      8. progress
      9. status
      10. state
  3. Use
    1. Loading LoadFile into you SVG Document
    2. Loading a File
    3. Example
  4. Known Problems
  5. Download

Introduction

LoadFile is an ECMAScript object that allows you to load an SVG document from your server. While this file is loading, a progress bar is shown to the end user. This work in Adobe's SVG Viewer 3.0 and makes use of the postURL() and parseXML() methods.

Reference

Class Variables

LoadFile.VERSION

This is a number which represents the current version number for this implementation of the LoadFile object. This can be used by scripts to check that the correct version of the object is being used.

Object Methods

constructor - new LoadFile(url, file, increment, oldNode);

Included in the initialization of LoadFile is the creation of a progress bar and progress text. The constructor initiates the download of the new file.

url is the url to the server side script that will provide the file data. This must be in the same domain as the SVG document that uses this object.

file is the name of the SVG file on thw server that you wish to download.

increment is the number of bytes to read with each invocation of the server-side script.

oldNode is the node that will be replaced by the file that is downloaded by this object. Most likely this will be the top-most <svg> element in your SVG document.

makeProgressBar()

makeProgressBar() creates a progress bar and the associated progress text. These elements will be updated as the file download progresses.

This method is invoked by the constructor so there should be no need to call this method directly.

loadFile()

loadFile() initiates the download of server-side file.

send(start, length)

send() sends a request the server-side script.

If the start or length parameters are null, they will be set to the values of this object's currentPosition and increment properties, respectively.

When the start and length parameters are set to -1, this indicates that send() should request the size of the file that will be downloaded from the server. The file size is used to determine the percentage of progress as the file is downloaded from the server.

operationComplete(status);

operationComplete() is a dispatch routine that is used by the LoadFile object. This method determines which object method needs to be invoked to process the latest information received from the server-side script. There should be no need to call this method directly.

status is an object that is returned by getURL() once it has completed its processing.

setFileSize(content);

setFileSize() is invoked by operationComplete() when this object is in the getFileSize state. The server-side script returns the size of the file that will be downloaded by this object. This value is used to determine the percentage of progress as the file is downloaded from the server.

content specifies the size of the file to be downloaded by this object.

update(content);

update() is invoked by operationComplete when this object is in the getChunk state. The server-side script returns the number of bytes that are specified in the increment property of this object. The data received with each call to update() is appended to the buffer property of this object. If processing of the file is not complete, then the next chunk is requested; otherwise, the replaceDocument() method is invoked.

content is the last chunk of data from the file being downloaded from the server.

updateProgress();

updateProgress is called by the update() method each time a chunk of the file being downloaded is received. The current percentage of the file that has been received is used to update the progress bar and progress text.

replaceNode();

replaceDocument() is called by the update() method once the file download has been completed. replaceDocument() converts the file's text into a document fragment via the parseXML() method. The current document is then replaced with the new document fragment.

Properties

Use

Loading LoadFile into your SVG document

In order to use the LoadFile object in your SVG file, you will need to insert a <script> element inside of your <svg> element. As an example, if LoadFile.js is in the same directory as your SVG document, then you would include the LoadFile object with the following text:

Loading a File

In order to load an SVG file from your server, you must first designate the file to download, the URL of the server-side script that sends the file contents, the number of bytes to send each time the server-side script is called, and finally, the node that will be replaced by the downloaded file.

url  = "http://www.mydomain.com/fileServer.php";
file = "sample.svg";
new LoadFile(url, url, 1024, SVGRoot);

In this example, the "sample.svg" file will be downloaded from the "mydomain.com" domain. The file, in this case, is a relative path which is relative to the server-side script. You may need to specify the filename differently depending on which scripting language is used by the server-side script. The URL is the address of the server-side script at "mydomain.com." Each time the server-side script is called, 1024 bytes of "sample.svg" will be downloaded. Once the file has been completely downloaded, the node pointed to by SVGRoot will be replaced with the contents of "sample.svg."

Example

Click here to see an incredibly slow download of a rectangle element. This example purposesly downloads only 10 bytes each time the server-side script is called. Realistically, you will use a much larger increment size. This small number was used to force the download to be slow enough to witness the progress bar being updated.

Known Problems

  1. Script tags will not be processed. Scripts would need to be handled separately. Most likely this will involve the use of the eval() method
  2. External file references will not be processed. This includes external images and scripts. Again, special processing would need to be written to handle these cases.

Download

LoadFile.js

Also, you will need a server-side script to send the contents of the file you are downloading. LoadFile uses a simple protocol with two commands. The first command asks for the file size. The second command asks for a certain number of bytes starting at a specific position in the file. Here is the PHP script that is being used in the example above.

LoadFile