Skip to content

Grounded Wren
Gizmos
FileLib

FileLib

Personalization

saveToFile

Signature: (<text>, <fileType>, <extension>, <suggestedName>)

fileType

extension suggestedName

text

promptFileAsJSON

Signature: no parameters()

Not loaded

promptFileAsText

Signature: (<fileType>, <extension>)

fileType

extension

Not loaded

Page Notes

Prompting the user to upload files of a certain kind or downloading files to the user's machine can be a bit daunting, especially if you want to use the new shiny showSaveFilePicker and showOpenFilePicker APIs which don't yet have complete support across browsers.

The FileLib Gizmo abstracts away the complexity of both using these APIs and creates a fallback if they're not available, distilling the most essential functionality into three easy functions which should suit most purposes. Once you include the fileLibGizmo.js file on your page, you may call them on the GW.Gizmos.FileLib object! See how this page calls them for an example (in the inline <script> element).

All of the provided functions return Promises, so to use them you should use await or .then().

saveToFile

saveToFile will save a file to the user's computer.
Parameters:

text: The contents saved to the file as a string
fileType: The MIME Type of the file to save. For a text file, this would be text/plain. Some common MIME types are listed here.
extension: The extension of the saved file, without a period. For example, txt or json
suggestedName: Optional. The name that defaults in to the file picker that helps the user save the file.

Returns: a Promise<string> which resolves once the file has been saved with the chosen file name.

promptFileAsJSON

promptFileAsJSON will prompt the user to upload a .json file, then give it to you as a JavaScript object.
Parameters: none.
Returns: a Promise<object> with the JSON file as an object.

promptFileAsText

promptFileAsText will prompt the user to upload the type of file you specify, then gives you its contents as plain text.
Parameters:

fileType: The MIME type of the file to upload.
extension: The extension of the saved file, without a period.

Returns: a Promise<string> with the file's contents as text.

Files

Markup

fileLibDemo.html

Scripts

fileLibGizmo.js
svgIconControl.js
personalizationControl.js

Styles

fileLibDemo.css