Native File System API

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

Native File System API

Post by Peter »

This thread is outdated and the code no longer works.
Please continue reading here: viewtopic.php?t=2235


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: 47
Joined: Tue Feb 25, 2014 2:13 am
Location: Boston, MA

Re: Native File System API

Post by skywalk »

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: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Native File System API

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

Re: Native File System API

Post by skywalk »

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: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Native File System API

Post 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
loulou2522
Posts: 51
Joined: Wed Mar 18, 2015 5:52 am

Re: Native File System API

Post by loulou2522 »

HI peter,
I make all you do in theses post
but i am blocked by these two line
Define myToken.s = "[YourToken]"

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

What is [Your token[
and what to put in define metaTag
Can you help me please.
THanks
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Native File System API

Post by Peter »

My posting is now almost two years old. In the meantime, the native file access has changed. For this reason, it is not worth explaining this old code.
loulou2522
Posts: 51
Joined: Wed Mar 18, 2015 5:52 am

Re: Native File System API

Post by loulou2522 »

Ok i undesrtdand. Is-ti another way to do the same job ?
plouf
Posts: 194
Joined: Tue Feb 25, 2014 6:01 pm
Location: Athens,Greece

Re: Native File System API

Post by plouf »

both chrome and firefox ( and most probably edge) has an filesystem api, but its a NON STANDAR api
it has difficulties and securities reason is should fault, block by antivirus etc

in general you should avoid using it, or accept the fact that it will be always "something fault"
you should prefer server side storage (like local webserver with PHP or whatever)
and/or cooperation with local binary exe (like one purebasic creates)

but in general a webserver is the most robust, future proof, and in general the best option

may i ask what the reason you realy need to access local files ? requesting from user to save or upload files isnt sufficient ?
Christos
Post Reply