WebApps with LocalStorage and AppCache/Load/API

In this part of the learning resource we consider API for the Javascript Class: LoadFile4DOM. The general purpose of the library is to create a hidden file tag in the DOM to emulated loading interactively files from the local file system of you computer or mobile device into the browser for further processing

• the UML structure of LoadFile4DOM was created with ClassEditorUML - Date: 2018/12/12 14:49:10
• last modifications at 2018/12/30 21:41:04
• URL Class Editor for UML: https://niebert.github.io/ClassEditorUML
• File: js/loadfile4dom.js
• UML-File: jscc/loadfile4dom_uml.json - open with ClassEditorUML

Diagram

LoadFile4DOM
+ aDocNaNDocument + aOptionsNaNHash + aFileLoaderNaNHash + aLoadFileHolderNaNObject + defaults_options + type2accept + defaults_loader + aLoaderCount
+ init(pDoc:Document,pOptions:Hash) + getTimeStamp():Integer + create_input_tags() + create() + get_holder():Object + create_load_dialog(pOptions: ) + create_holder() + open_dialog(pID:String) + set_defaults(options: , defaults: ) + get_loader_options(pID:String ,pFileType: ,pOptions:Hash ):Hash + get_input_attributes(pID:String ,pFileType:String ) + error_file_type(pLoader:Hash ,pFileToLoad:Object ) + handle_text(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object ) + handle_json(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object ) + handle_image(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object ) + handle_image_thumb(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object ) + handle_data(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object ) + handle_audio(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object ) + handle_video(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object ) + handle_zip(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object ) + handle_jszip(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object ) + handle_file_type(pLoader:Hash ,pFileReader:FileReader ,pFileToLoad:Object ) + handle_single_file(pLoader:Hash ) + handle_multiple_files(pLoader:Hash ) + handle_file(pID:String) + log(pMessage:String )

Create Instance of Class

Instances of the class LoadFile4DOM can be generated with:

    var lf4d = new LoadFile4DOM();

Definition Methods - Comparison of Approaches

• If you want to assign definitions of methods for single instances individually, defined the method the following way. This approach allows to overwrite the method definition of single instances dynamically, but if consumes also more memory because every instance stores a copy of that function.

  function LoadFile4DOM() {
  
    // attributes/states
    this.counter = 0;
  
    // methods
    this.my_method = function (pPar1,pPar2) {
      // the code for the method here
    }
  }
  
  var lf4dom = new LoadFile4DOM();
  

• A prototype definition of methods for LoadFile4DOM will be set the definition as prototye for all instances of the class. Alteration of the prototye definition with change the method definition of all instances of LoadFile4DOM. Use the following prototype definition for methods name for 'LoadFile4DOM'.

  function LoadFile4DOM() {
    // attributes/states
    this.counter = 0;
  }
  
  //define the method as prototype
  LoadFile4DOM.prototype.my_method = function (pPar1,pPar2) {
     // the code for the method  here
  }
  
  var lf4dom = new LoadFile4DOM();
  

  The prototype definition for methods consumes less memory for generated instances, because they are stored once for all instances.

The methods of LoadFile4DOM are defined as prototypes.

Attributes: LoadFile4DOM

For class LoadFile4DOM the following attributes are defined:

Attribute aDoc : Document

This attribute stores a reference to the document object of the browser. Reference provided with the init-method

• Visibility: public
• Class: Document
• Default Init: null set by my_instance.aDoc = null;
• Access of attribute in the code of methods by this.aDoc = null;

Attribute aOptions : Hash

This hash stores the options of the init method - e.g. "id4loadfile" as DIV container for the input elements in the DOM that holds all created file loaders i.e. holding the input-file-tags for load a JSON file

• Visibility: public
• Class: Hash
• Default Init: null set by my_instance.aOptions = null;
• Access of attribute in the code of methods by this.aOptions = null;

Attribute aFileLoader : Hash

This attribute stores the number of file loaders created with instance

• Visibility: public
• Class: Hash
• Default Init: {} set by my_instance.aFileLoader = {};
• Access of attribute in the code of methods by this.aFileLoader = {};

Attribute aLoadFileHolder : Object

This attribute stores the reference to the DIV node of the file holder node in the DOM that is created by this.create_holder()

• Visibility: public
• Class: Object
• Default Init: { "id": "holder4loadfile", "dom": null, "var4dom": "undef_call_var", "debug": false } set by my_instance.aLoadFileHolder = { "id": "holder4loadfile", "dom": null, "timeout": 0, "var4dom": "undef_call_var", "debug": false };
• Access of attribute in the code of methods by

this.aLoadFileHolder = {
    "id": "holder4loadfile",
    "dom": null,
    "var4dom": "undef_call_var",
    "debug": false
};

Attribute defaults_options :

the attribute stores the default options for LoadFile4DOM

• Visibility: public
• Class: ` `
• Default Init:

{
    "id": "loadfile_holder_div",
    "dom": null,
    "debug": false
}

set by

my_instance.defaults_options = {
    "id": "loadfile_holder_div",
    "dom": null,
    "debug": false
};

• Access of attribute in the code of methods by

  this.defaults_options = {
  "id": "loadfile_holder_div",
  "dom": null,
  "debug": false
  };
  

Attribute type2accept : Hash

the attribute maps the type to the accept tag of files of the input-file-tag

• Visibility: public
• Class: Hash
• Default Init:

{
    "all": "*",
    "audio": "audio/*",
    "audiourl": "text/*",
    "data": "*",
    "image": "image/*",
    "imagethumb": "image/*",
    "json": "application/json",
    "text": "text/*",
    "texturl": "text/*",
    "video": "video/*",
    "videourl": "text/*",
    "url": "text/*",
    "zip": "application/zip"
}

set by

my_instance.type2accept = {
    "all": "*",
    "audio": "audio/*",
    "audiourl": "text/*",
    "data": "*",
    "image": "image/*",
    "imagethumb": "image/*",
    "json": "application/json",
    "text": "text/*",
    "texturl": "text/*",
    "video": "video/*",
    "videourl": "text/*",
    "url": "text/*",
    "zip": "application/zip"
};

• Access of attribute in the code of methods by

  this.type2accept = {
  "all": "*",
  "audio": "audio/*",
  "audiourl": "text/*",
  "data": "*",
  "image": "image/*",
  "imagethumb": "image/*",
  "json": "application/json",
  "text": "text/*",
  "texturl": "text/*",
  "video": "video/*",
  "videourl": "text/*",
  "url": "text/*",
  "zip": "application/zip"
  };
  

Attribute defaults_loader : Hash

the attribute stores the default loader tags if not options are provided

• Visibility: public
• Class: Hash
• Default Init:

{
    "filetype": "text",
    "id": "loader123456789",
    "name": "defaultloader",
    "value": "Dialog Loader Button",
    "accept": "text/*",
    "onchange": "console.log('open dialog click on 'defaultloader')",
    "multiple": true
}

set by

my_instance.defaults_loader = {
    "filetype": "text",
    "id": "loader123456789",
    "name": "defaultloader",
    "value": "Dialog Loader Button",
    "accept": "text/*",
    "onchange": "console.log('open dialog click on 'defaultloader')",
    "multiple": true
};

• Access of attribute in the code of methods by

  this.defaults_loader = {
  "filetype": "text",
  "id": "loader123456789",
  "name": "defaultloader",
  "value": "Dialog Loader Button",
  "accept": "text/*",
  "onchange": "console.log('open dialog click on 'defaultloader')",
  "multiple": true
  };
  

Attribute aLoaderCount : Integer

the attribute stores the number of created loaders to create unique loader IDs in the DOM together with the method getTimeStamp()

• Visibility: public
• Class: Integer
• Default Init: 0 set by my_instance.aLoaderCount = 0;
• Access of attribute in the code of methods by this.aLoaderCount = 0;

Methods: LoadFile4DOM

For class LoadFile4DOM the following methods are defined:

Method init(pDoc,pOptions)

the method performs the initialization of the instance of LoadFile4DOM. pOptions contains the ID for the LoadFile4DOM holder, it is in general a DIV element with the HTML-input-tags for uploading a files.

• Visibility: public
• Call: vLoadFile4DOM.init(pDoc,pOptions); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pDoc:Document the parameter contains a reference to the document object of the browser
  • pOptions:Hash the parameter stores options

Method getTimeStamp()

the method performs ...

• Visibility: public
• Returns: Integer
• Call: var vIntegerRet = vLoadFile4DOM.getTimeStamp(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class = LoadFile4DOM.
• Parameter List:

Method create_input_tags()

the method injects the input-files tags for the loaders in the DOM - the method is called by LoadFile4DOM.create() with body-onload attribute.

• Visibility: public
• Call: vLoadFile4DOM.create_input_tags(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:

Method create()

the method creates a DOM node for the file in the window.document of the browser and adds an object in this.aFileLoader the each constructed file loader with the appropriate ID.

• Visibility: public
• Call: vLoadFile4DOM.create(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:

Method get_holder()

the method returns the LoadFile4DOM holder as DOM node. The id of the LoadFile4DOM holder is stored in this.aOptions.id4loadfile. The holder is an existing DIV node in the DOM (Document Object Model) or it will be created by the create_holder

• Visibility: public
• Returns: Object
• Call: var vObjectRet = vLoadFile4DOM.get_holder(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class = LoadFile4DOM.
• Parameter List:

Method create_load_dialog(pOptions)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.create_load_dialog(pOptions); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pOptions:Hash the parameter provides ...

Method create_holder()

the method creates a hidden holder DIV element for the input-tags of the load file instance. The loader ID of the DIV element is stored in this.aOptions.id4loadfile

• Visibility: public
• Call: vLoadFile4DOM.create_holder(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:

Method open_dialog(pID)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.open_dialog(pID); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pID:String the parameter provides the ID of the FileLoader input tag in the DOM

Method set_defaults(options, defaults)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.set_defaults(options, defaults); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • • options: the parameter provides options that set by the user.
    • defaults: the parameter provides the default settings, which are set by the method, if the options are not defined in options

Method get_loader_options(pID,pFileType,pOptions)

the method returns a hash for loader e.g. the command var loader4txt = lf4d.get_loader_options("mytxtfile","text",loader_opts); creates the following hash:

    loader4txt={
       "type": "text",
        "id": "mytxtfile1t1545978644012",
        "name": "mytxtfile",
        "value": "Dialog mytxtfile",
        "accept": "text/*",
        "onload": "var4dom0t1545978644011.open_dialog('mytxtfile')",
        "multiple": false
    }

In loadfile4dom.js the call of create_load_dialog(loader_option) creates the loader.

• Visibility: public
• Returns: Hash
• Call: var vHashRet = vLoadFile4DOM.get_loader_options(pID,pFileType,pOptions); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class = LoadFile4DOM.
• Parameter List:
  • • pID: the parameter provides name for DOM input-file for the loader
    • pFileType: the parameter provides the type of loader e.g. text, image, imagethumb, audio, video, zip
      

• • pOptions:Hash the parameter provides additional options e.g. style options with width and height for an image

Method get_input_attributes(pID,pFileType)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.get_input_attributes(pID,pFileType); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pID: the parameter provides ...
  • pFileType: the parameter provides type of loader e.g. text, image, zip, ...

Method error_file_type(pLoader,pFileToLoad)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.error_file_type(pLoader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
  • pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method handle_text(pLoader,pFileReader,pFileToLoad)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_text(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
  • pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
  • pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method handle_json(pLoader,pFileReader,pFileToLoad)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_json(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
  • pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
  • pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method handle_image(pLoader,pFileReader,pFileToLoad)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_image(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
  • pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
  • pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method handle_image_thumb(pLoader,pFileReader,pFileToLoad)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_image_thumb(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
  • pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
  • pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method handle_data(pLoader,pFileReader,pFileToLoad)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_data(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
  • pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
  • pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method handle_audio(pLoader,pFileReader,pFileToLoad)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_audio(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
  • pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
  • pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method handle_video(pLoader,pFileReader,pFileToLoad)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_video(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
  • pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
  • pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method handle_file_type(pLoader,pFileReader,pFileToLoad)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_file_type(pLoader,pFileReader,pFileToLoad); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...
  • pFileReader: the parameter provides access to the FileReader of the triggered upload event of the <input type="file" ...> tags in the DOM
  • pFileToLoad: the parameter provides access to loaded files, selected by the user from the Load Dialog for uploads.

Method handle_single_file(pLoader)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_single_file(pLoader); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...

Method handle_multiple_files(pLoader)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_multiple_files(pLoader); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pLoader: the parameter provides hash with all attributes defining the loader, e.g. multiple file selection, the DOM id of the loader, ...

Method handle_file(pID)

the method performs ...

• Visibility: public
• Call: vLoadFile4DOM.handle_file(pID); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pID: the parameter provides ...

Method log(pMessage)

the method performs a console log report dependent of the debug=true setting. This creates more console.log() messages.

• Visibility: public
• Call: vLoadFile4DOM.log(pMessage); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:
  • pMessage: the parameter provides message for the log command.

Method set_onload()

the method assigns the create()-method to onload-event in the <body>-tag (e.g. <body onload="lf4d.create()">) - DO NOT USE - Currently not working.

• Visibility: public
• Call: vLoadFile4DOM.set_onload(); where vLoadFile4DOM = new LoadFile4DOM() is an instance of the class LoadFile4DOM.
• Parameter List:

Build and Compress with Browserify, Watchify, UglifyJS

The NodeJS modules can use require()-command. Browsers cannot execute the require()-command and other node specific programming features.

• Browserify loads the file ./src/main.js as input file and resolves e.g. the require()-command and creates an output file in dist/loadfile4dom.js
• Watchify observes any changes in the source files in src/ and starts on the event of changes the build process of the file ./src/main.js as input file and creates an output file in dist/loadfile4dom.js.
• UglifyJS compresses the code in dist and takes the file dist/loadfile4dom.js and generates the compressed library in dist/loadfile4dom.min.js. The same is applied for docs/js/loadfile4dom.js and the output is docs/js/loadfile4dom.min.js. The compression of the source code can be perform without a total build by npm run compress.
• The main browserify command creates a standalone library that can be used in the browser and it assign LoadFile4DOM to the window object by

  browserify src/main.js --standalone window > dist/loadfile4dom.js

Browserify and Watchify

Browserify and Watchify are used in this repository to control the WebApp-javascript development with the required Javascript libraries installed with NPM Node.js and similar framework world that greatly improve your javascript workflow: Using them, you no longer need to micro-manage your script tags but instead you just declare the libraries each of your client-side modules is using - or you can even create your own reusable modules! Also, installing (or updating) javascript libraries is as easy as running a single command!

• Additional Information about Browserify and Watchify on GitHub
• Youtube Video about Browserify and Watchify by Kyle Robinson Young 2015/04/16 In this repository Browserify and Watchify are used for javascript code development with NPM Node.js.

Global Installation of Browserify, Watchify, UglifyJS and DocToc

Requirement: NPM is intalled. Now call for global installation of Browserfy, Watchify, UglifyJS and DocToc by:

npm install -g browserify watchify uglify-js doctoc

This is recommended because your will not install Browserfy, Watchify and UglifyJS for all your repositories separately.

• Browserfy converts node_modules in a single library, that can be imported in WebApp. Browserify resolves dependencies and included the required libraries into the bundled javascript code.
• Watchify watches changes in the source code and runs the build process whenever it detects changes in the your source code.
• UglifyJS compresses the source code of dist/class_editor_uml.js into class_editor_uml.min.js to reduce download time and WebApp performance during load.
• DocToc is used to create a helpful table of contents in the README (see [DocToc-Installation]https://github.com/thlorenz/doctoc#installation) for further details on NPM DocToc ). Run doctoc README.md for updating the table of contents.
• jsLint is used to check the Javascript code, quality of code can be improved by application of jsLint

Package Installation of Browserify and Watchify - Alternative

If your prefer that browserify and watchify is installed with your npm install command, save these to modules to your dev-dependecies in your package.json by calling

• (Install Browsersify) npm install browserify --save-dev
• (Install Watchify) npm install watchify --save-dev
• (Install UglifyJS) npm install uglify-js --save-dev
• (Install DocToc) npm install doctoc -g
• (Install jshint) npm install jslint -g

The difference between --save and --save-dev is, that development dependencies are installed with npm install because they are required for the development process of the code but they are not added to the generated Javascript-bundle that are used in the WebApp ClassEditorUML. The --save-dev commands for browserify and watchify will install the two modules with all the the dependencies in node_modules and add the dev-dependencies to your package.json.

"devDependencies": {
  "browserify": "^14.5.0",
  "watchify": "^3.9.0",
  "uglify-js": "^2.6.2",
  "doctoc":"^1.3.0",
  "lint": "^1.1.2"  
}

In the current repository Browserfy and Watchify are expected to be installed globally, because the package.json does not contain the dev-dependencies mentioned above.

Start Watching the Files with Watchify

Watchify will trigger the npm run build process if files were change due to alteration of code. To start watching the files, run the npm-watch script by npm run watch, which is defined in package.json

Source JS file and development bundle output

The main JS source file for the build process is src/main.js. The output library (resp. output file of build process) is stored in distrubtion library for browser based web-development in dist/loadfile4dom.js. Compressed code is generated with UglifyJS. It takes the dist/loadfile4dom.js as input file and creates the compressed file dist/loadfile4dom.min.js. The compression of dist/loadfile4dom.js into dist/loadfile4dom.min.js uses uglify-js module and can be started by

npm run compress