Page 1 of 1

Native File System API

Posted: Thu Oct 24, 2019 2:22 pm
by Peter
ollǝH,

since version 78 Google Chrome offers a Native File System API, which makes it possible to read and save files on the user's device.

See also: https://web.dev/native-file-system/

Here is a basic demo in form of a simple text editor. The special feature is that you can load, change and save files:
Code: Select all
EnableExplicit

Define myToken.s = "[YourToken]"

Define MetaTag.s = ~"<meta http-equiv=\"origin-trial\" content=\"" + myToken + ~"\">"

! $("head").append(v_metatag);

Global FileHandle

Enumeration
  #Window
  #LoadButton
  #SaveButton
  #SaveAsButton
  #Editor
EndEnumeration

Procedure WriteFile(e, t.s)
  ! (async() => {
  !   // Create a writer (request permission if necessary).
  !   const i = await v_e.createWriter();
  !   // Make sure we start with an empty file
  !   await i.truncate(0),
  !   // Write the full length of the contents
  !   await i.write(0, v_t),
  !   // Close the file and write the contents to disk
  !   await i.close()
  ! })(); 
EndProcedure

Procedure LoadButtonEvent()
 
  Protected FileContent.s
 
  ! (async() => {
 
  !   const opts = {
  !     type: 'openFile',
  !     accepts: [{
  !       description: 'Text file',
  !       extensions: ['txt'],
  !       mimeTypes: ['text/plain'],
  !     }],
  !   }; 
 
  !   v_filehandle  = await window.chooseFileSystemEntries(opts);
  !   var file      = await v_filehandle.getFile();
  !   v_filecontent = await file.text();
 
  SetGadgetText(#Editor, FileContent)
  SetActiveGadget(#Editor)
 
  ! })();
 
EndProcedure

Procedure SaveAsButtonEvent()
 
  Protected FileContent.s = GetGadgetText(#Editor)
 
  ! (async() => {
  !   const opts = {
  !     type: 'saveFile',
  !     accepts: [{
  !       description: 'Text file',
  !       extensions: ['txt'],
  !       mimeTypes: ['text/plain'],
  !     }],
  !   };
 
  !   v_filehandle = await window.chooseFileSystemEntries(opts);
 
  !   if (typeof v_filehandle != "undefined") {
  WriteFile(FileHandle, FileContent)
  !   }
 
  ! })(); 
 
EndProcedure

Procedure SaveButtonEvent()
 
  ! if (typeof v_filehandle === "undefined") {
  SaveAsButtonEvent()
  ProcedureReturn
  ! }
 
  Protected FileContent.s = GetGadgetText(#Editor)
 
  ! (async() => {
  WriteFile(FileHandle, FileContent)
  ! })(); 
 
EndProcedure

Procedure AddClickEventListener(Gadget, Callback)
  Protected GID = GadgetID(Gadget)
  ! v_gid.div.addEventListener('click', async (e) => { v_callback(e) });
EndProcedure

OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 800, 600, "Native FileSystem - Demo", #PB_Window_ScreenCentered)

ButtonGadget(#LoadButton,    10, 10, 80, 30, "Load")
ButtonGadget(#SaveButton,   100, 10, 80, 30, "Save")
ButtonGadget(#SaveAsButton, 190, 10, 80, 30, "Save as...")

EditorGadget(#Editor, 10, 50, WindowWidth(#Window) - 20, WindowHeight(#Window) - 60)

AddClickEventListener(#LoadButton,   @LoadButtonEvent())
AddClickEventListener(#SaveButton,   @SaveButtonEvent())
AddClickEventListener(#SaveAsButton, @SaveAsButtonEvent())


Greetings ... Peter

Re: Native File System API

Posted: Thu Oct 24, 2019 8:46 pm
by skywalk
How did you enable Native support in Chrome?
I get no response.

Re: Native File System API

Posted: Thu Oct 24, 2019 10:18 pm
by Peter
skywalk wrote:How did you enable Native support in Chrome?

First make sure you have Chrome version 78.

Then enter chrome://flags in the address bar and search for "File Handling API". Set the flag to Enabled

Image

After this you have to request a token for your address (http://localhost:9080), which you enter in the code.

Image

Then it should work.

Re: Native File System API

Posted: Fri Oct 25, 2019 4:55 pm
by skywalk
Thanks, this is a lot of steps for a user of my web page :shock:

Re: Native File System API

Posted: Mon Oct 28, 2019 7:43 am
by Peter
skywalk wrote:Thanks, this is a lot of steps for a user of my web page :shock:

The only step that a user of your website must take is to enable the "File Handling API" - Flag.

Greetings ... Peter