Share your advanced knowledge/code with the community.
User avatar
Peter
 
Posts: 641
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Native File System API

by Peter Thu Oct 24, 2019 2:22 pm

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
User avatar
skywalk
 
Posts: 42
Joined: Tue Feb 25, 2014 2:13 am
Location: Boston, MA

Re: Native File System API

by skywalk Thu Oct 24, 2019 8:46 pm

How did you enable Native support in Chrome?
I get no response.
When working toward the solution of a problem, it always helps if you know the answer. ~ ?
An expert is one who knows more and more about less and less until he knows absolutely everything about nothing. ~ Weber
User avatar
Peter
 
Posts: 641
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: Native File System API

by Peter Thu Oct 24, 2019 10:18 pm

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.
User avatar
skywalk
 
Posts: 42
Joined: Tue Feb 25, 2014 2:13 am
Location: Boston, MA

Re: Native File System API

by skywalk Fri Oct 25, 2019 4:55 pm

Thanks, this is a lot of steps for a user of my web page :shock:
When working toward the solution of a problem, it always helps if you know the answer. ~ ?
An expert is one who knows more and more about less and less until he knows absolutely everything about nothing. ~ Weber
User avatar
Peter
 
Posts: 641
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: Native File System API

by Peter Mon Oct 28, 2019 7:43 am

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
Return to Tricks 'n' Tips

Who is online

Users browsing this forum: No registered users and 2 guests