Monthly Archives: July 2020

JavaScript || FileIO.js – Open, Save, & Read Local & Remote Files Using Vanilla JavaScript

The following is a module that handles opening, reading, and saving files in JavaScript. This allows for file manipulation on the client side.

FileIO.js Source

Contents

1. Open File Dialog
2. Reading Files
3. Saving Files
4. Reading Remote URL Files
5. Saving Remote URL Files
6. FileIO.js Namespace
7. More Examples

 

1. Open File Dialog

Syntax is very straightforward. The following demonstrates opening a file dialog to get files from the user.

FileIO.openDialog‘ returns an array of File objects that contains the selected files after the user hits submit. You can specify the accepted file types, as well as if selecting multiple files is allowed or not.


2. Reading Files

The following example demonstrates how to read a file. This allows to read file contents.

FileIO.read‘ accepts either a File, or a Blob as acceptable data to be read.

By default, ‘FileIO.read‘ will read the file contents as text. To read file contents as an array, set the property ‘readAsTypedArray‘ to true. A Uint8Array is returned when this option is set to true.


3. Saving Files

The following example demonstrates how to create and save a file. This allows to save contents to a file.

FileIO.save‘ accepts either a String, Blob, File, or a Uint8Array as acceptable data to be saved.

If the data to be saved is a base64 string, set the property ‘decodeBase64Data‘ to true in order to decode the string before saving. If the bease64 string is a file, this will allow the actual file to be decoded and saved to the client. Note: This action is only performed if the data to be saved is a string.


4. Reading Remote URL Files

The following example demonstrates how ‘FileIO.read‘ can be used to read downloaded file contents from a remote URL.

The example above uses fetch to retrieve data from the remote URL. Once the data is received, ‘FileIO.read‘ can be used to read its file contents.


5. Saving Remote URL Files

The following example demonstrates how ‘FileIO.save‘ can be used to save downloaded file contents from a remote URL to the client.

The example above uses fetch to retrieve data from the remote URL. Once the data is received, ‘FileIO.save‘ can be used to save its file contents.


6. FileIO.js Namespace

The following is the FileIO.js Namespace. Include this in your project to start using!


7. More Examples

Below are more examples demonstrating the use of ‘FileIO.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || Deserialize & Parse JSON Date To A Date Object & Convert Date String To Date Object Using Vanilla JavaScript

The following is a module which demonstrates how to parse a JSON date string to a date object, as well as converting a date string to a date object.


1. Convert Date String To Date Object

Using ‘Utils.parseDate‘, the example below demonstrates how to convert a date string to a date object.


2. Parse JSON Date String To Date Object

Using ‘Utils.parseDate‘, the example below demonstrates how to automatically parse a JSON string to a date object via a reviver function.


3. Utils.parseDate Namespace

The following is the Utils.js Namespace. Include this in your project to start using!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || Convert & Deserialize JSON & Simple Object To A Class Type Using Vanilla JavaScript

The following is a module which demonstrates how to convert a simple object to a class type, as well as parsing a JSON serialized object back to its class type.


1. Convert Simple Object To Typed Class

The example below demonstrates how to convert a simple object to its class type. Converting the simple object to its class type allows us to use its class functions.

The ‘Utils.ctype‘ function converts the object to a class, which allows to use the functions from that class.


2. Deserialize Simple JSON Object To Typed Class

Parsing a simple JSON string and converting it to a typed class can be achieved in a similar way. The example below demonstrates this.


3. Deserialize Simple Nested JSON Object To Typed Class

Parsing a multi-leveled, nested JSON string and converting it to a typed class is done a little differently. We have to map the JSON structure with the values we want to convert. This is done using ‘Utils.ctypeMap‘.

The example below demonstrates this.


4. Deserialize Complex Nested JSON Object To Typed Class

Parsing a complex JSON string and converting it to a typed class can be achieved in a similar way. The example below demonstrates this.


5. Utils.ctype/ctypeMap Namespace

The following is the Utils.js Namespace. Include this in your project to start using!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || Promise – Resolve Promises In Order Of Completion Using Vanilla JavaScript

The return values of Promise.all are returned in the order that the Promises were passed in, regardless of completion order. Sometimes, it is nice to know which promise completed first.

The following is sample code which demonstrates how to resolve an array of promises and return the results in order of completion.

Contents

1. Resolve By Completion
2. Fail-Fast Behavior
3. Timeout
4. Utils.resolveByCompletion
5. More Examples


1. Resolve By Completion

The examples below demonstrate the return values of Promise.all compared to ‘resolve by completion‘.

‘Resolve by completion’ returns the completed values from fastest to slowest.



2. Fail-Fast Behavior

Promise.all is rejected if any of the elements are rejected. For example, if you pass in multiple promises that will resolve, and one promise that rejects, then Promise.all will reject immediately.

Similar to Promise.allSettled, ‘Resolve by completion’ allows returning the promises rejected value to the result list.

The following example demonstrates this behavior.

‘Resolve by completion’ returns the rejected value as apart of the result list, depending on the boolean ‘rejectOnError’ parameter.



3. Timeout

By default, ‘resolve by completion’ has no timeout. If setting a timeout is desired, it can be done like so.



4. Utils.resolveByCompletion

The following is Utils.resolveByCompletion. Include this in your project to start using!



5. More Examples

Below are more examples demonstrating the use of ‘Utils.resolveByCompletion’. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || Resources.js – JavaScript & CSS Parallel File Loader To Dynamically Import & Load Files To Page Document Using Vanilla JavaScript


The following is a module that handles loading JavaScript and CSS files into a document in parallel, as fast as the browser will allow. This module also allows to ensure proper execution order if you have dependencies between files.

Resources.js Source

Contents

1. Load Files One By One
2. Load Multiple Files In Parallel
3. Load Multiple Files In Parallel With Dependencies
4. Load A JavaScript Function From Another JS File
5. Resources.js Namespace
6. More Examples


1. Load Files One By One

Syntax is very straightforward. The following demonstrates loading single files one by one:

The ‘Resources.load‘ function returns an object that contains information about the load status. It can let you know if a file was loaded successfully or not.

To get the load status in order to determine if the file was loaded correctly, it can be done like so:

In the example above, the load results can let you know which files were loaded into the document, and the reason for failure.



2. Load Multiple Files In Parallel

In the examples above, files were added sequentially, one by one.

Ideally, you would want to load all of your files at once in parallel. This makes it so you are able to add multiple files as fast as the browser will allow. Parallel loading also allows you to set if there are any file dependencies.

Using the files from the examples above, this can be done like so.

For parallel loading, the parameter supplied to the ‘Resources.load‘ function is an object that is made up of the following properties.



3. Load Multiple Files In Parallel With Dependencies

The ‘wait‘ property is a great way to manage file dependencies. When the ‘wait‘ property is set to true, that indicates that the file should be completely loaded before loading subsequent files in the group.

This makes it so loading files in parallel does not cause files to be loaded before its dependent files.

The following examples demonstrates the ‘wait‘ functionality when loading files in parallel.

The example below demonstrates what happens when ‘wait‘ is not used. Load order behavior is undefined because files are loaded as they become available. This could cause an issue if the second file depends on the first file, but loads before it.

In the example below, the ‘wait‘ property is set to true for the first file, ensuring that it will always be loaded before any subsequent files.



4. Load A JavaScript Function From Another JS File

Resources.load‘ could be used to call a JavaScript function in another js file. The example below demonstrates this.

In the following example, main.html is the ‘driver’ file. It loads ‘fullName.js‘ to get the functions located in that file. ‘fullName.js‘ then uses ‘Resources.load‘ to load the files ‘display.js‘, ‘log.js‘ and ‘date.js‘, and calls the functions from those files to display information.

Below is fullName.js

Below is display.js

Below is log.js

Below is date.js



5. Resources.js Namespace

The following is the Resources.js Namespace. Include this in your project to start using!



6. More Examples

Below are more examples demonstrating the use of ‘Resources.load‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.